個人網站架設紀錄 #1

Jian 收錄於 Blog

2022-11-09 約 691 字預計閱讀 2 分鐘

Blog 的第一篇文章就用來記錄自己從零到一的個人網站架設紀錄，使用到的工具如下：

Hugo

網路上有很多對於 Hugo 的說明以及教學，在這裡我就不多做介紹了，有興趣的話可以直接 Google Hugo 的關鍵字搜尋，我選擇 Hugo 的原因很簡單：

環境建置可以直接參考官方文件，裡面有詳細的教學流程可以快速建置出一個 Demo Site

備註：我是使用 macOS + Homebrew 進行安裝

接著到 Hugo Themes 挑選自己喜歡的模板後，透過下面的方式引用

1
2
3
4
git submodule add [-b <branch>] [--name <name>]

# e.g.
# git submodule add https://github.com/dillonzq/LoveIt.git themes/hugo-theme-loveit

記得到根目錄下的 config.yaml 或 config.toml 指定該樣板

1
2
3
4
5
6
...

# See Module Config for how to import a theme.
title: "your-theme"

...

其餘的參數設定可以到 Configure Hugo 查詢

將 GitHub Discussions 嵌入至個人網站成為訪客使用的留言系統，詳細運作原理與快速設定請參考 giscus

設定好後可視 theme 本身是否已經預留 giscus 的擴充功能，或是自行嵌入頁面

這邊 shout out to LoveIt Hugo Theme 的作者，真的簡潔乾淨又好用 🫡

有了個人網站的雛形後，可以嘗試將網站發佈到 GitHub 上看看結果怎麼樣，執行以下操作編譯靜態網站：

1
hugo --minify

編譯結果會放在根目錄下的 /public 內，接著將靜態網站推送到 GitHub Pages 的專案位置就完成了，如果還沒有 GitHub Pages 的人可以到這裡查看官方的建置文件

為了讓日後只需專注在內容的產出，我們可以建立 Git Action 當 main branch 更新時就自動幫我們執行部署流程，workflow 的腳本可以參考官方的部署文件

記得在第一次執行腳本後要到 repo 設定 GitPages 的預設分支到 gh-pages 上，當然也可以改成自己喜歡的分支，還是不清楚的話可以參考 GitHub 的教學文件

至此，我們就完成了使用 Hugo Framework + GitPages 的個人網站建置，日後有時間會再將更多的管理工具依序加入，例如：