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

Midqiu發表於2022-11-22
Github網站

這個可能是目前最簡單的搭建部落格網站的方式了。你只需要有一個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功能更強大一些，不過部署起來要稍微麻煩一點，感興趣的可以看這裡

相關文章