使用 github 和 Deno Deploy 搭建一個部落格網站

Midqiu發表於2022-11-22

這個可能是目前最簡單的搭建部落格網站的方式了。你只需要有一個github賬號就行了。本部落格一切從簡,直接用github的線上編輯功能,不需要本地安裝Nodejs/Deno、git客戶端、然後再配置git的代理,配置程式碼倉庫地址,本地再下載安裝編輯器、克隆程式碼到本地……

github 是一個用來放程式碼的網站,程式設計師大多使用此網站存放自己的程式碼,和別人交流自己/別人的程式碼的bug……

Deno Deploy 是一個服務部署網站,你把程式碼交給它,它就會把你的程式碼跑起來了。類似於騰訊雲、阿里雲之類的,比他們更簡單更易用,不用再自己買機器裝系統blabla等繁瑣的操作了。只不過是只能部署用Deno (javascript & typescript)寫的服務。可以使用 github 的賬號登入。部署在Deno Deploy的服務,會部署到全球34個地區,確保在世界範圍內的人都能快速的訪問到 Deno Deploy 上部署的服務。

效果展示:https://midqiu.deno.dev/

簡單概括一下步驟:

  1. 在 github 上建立一個程式碼倉庫,用來存放部落格系統的程式碼和內容。
  2. 在 Deno Deploy 平臺上建立一個專案,關聯上一步的程式碼倉庫。
  3. 在github上編寫部落格內容,推送到github倉庫後,等個10s左右,Deno Deploy 會自動部署完成。

建立 github 倉庫,存放部落格程式碼和內容

0. 建立程式碼倉庫,可以選擇私有的或公開

image.png
專案按照你的需要填你自己起的名字。
可以選擇Private,也可以選Public,選擇Public的話,別人就能看到你的程式碼倉庫裡面的內容,注意不要放些敏感內容。

一個小技巧:在github 的倉庫主頁,按句號.對應的按鍵,可以用github的線上編輯器開啟此倉庫,可以直接線上編輯提交到程式碼倉庫。
image.png

1. 配置部落格相關資訊

在專案根目錄下建立一個名為main.tsx的檔案,檔案內容如下(根據需要改成你的相關資訊):

import blog from "https://deno.land/x/blog/blog.tsx";

blog({
  author: "Dino",
  title: "My Blog",
  description: "The blog description.",
  avatar: "https://deno-avatar.deno.dev/avatar/83a531.svg",
  avatarClass: "rounded-full",
  links: [
    { title: "Email", url: "mailto:bot@deno.com" },
    { title: "GitHub", url: "https://github.com/denobot" },
    { title: "Twitter", url: "https://twitter.com/denobot" },
  ],
  lang: "zh",
});

更多詳細設定,看 deno_blog 文件

2. 建立部落格內容

建立資料夾posts,注意,這個資料夾名字固定是這個;然後在資料夾中建立第一篇部落格,比如這裡建立了一個名為hello_world.md,的檔案作為第一篇部落格(注意:檔名稱不要有空格和中文),內容如下:

---
title: 第一篇部落格
publish_date: 2022-11-20
tags: ['hello-world']
---

這是我的第一篇部落格!這裡是部落格內容

將內容推送到 github 的程式碼倉庫中。

在Deno Deploy 平臺建立專案,並繫結github 上的倉庫

  1. 選擇 Sign Up註冊或 Sign In登入。按提示使用github賬號登入就行了。
  2. 進入到管理臺,點選 New Project 按鈕建立新的專案。
    image.png
  3. 依次選擇,對應的程式碼倉庫-分支-構建方式(Automatic)-入口檔案(main.tsx),並設定name,然後點選 Link按鈕建立專案。
    image.png
注意:如果name是aaa,那麼最終的部落格的訪問域名是 https://aaa.deno.dev;可以到設定裡面修改。當然你可以在設定中配置繫結自己的域名如 aaa.com 等。這裡就不做說明了。

image.png

更新、新增部落格

posts檔案下,新增一篇.md結尾的檔案,內容格式參考上面的例子。(我們這個部落格系統會自動掃描posts資料夾裡面的md檔案解析成部落格內容的。)

更新部落格的話,就修改相應的 .md檔案的內容。

然後將改動推送到github 的程式碼倉庫裡,等個十幾秒,Deno Deploy會自動構建成功,重新整理部落格地址就能看到新的內容了。

其他

下面是網站在國內的測速:
image.png

此教程使用的 Deno 官方出的 blog 庫,優點是簡單,預設主題簡潔好看。此外,Deno官方還寫了一篇如何將 流行的部落格系統 Hugo 部署到Deno Deploy上的文章,Hugo功能更強大一些,不過部署起來要稍微麻煩一點,感興趣的可以看這裡

相關文章