歡迎使用 Hugo 快速建立個人網站！這個指南將引導你完成在 GitHub 上建立私人網站並部署到 GitHub Pages 的過程。

這個指南包括什麼重點

  • .gitignore: 排除版本管理的檔案
  • .github/workflows/hugo.yml: 使用 GitHub Action 將私人 Hugo 存放庫部署到公開的 GitHub Pages 存放庫。

步驟

  1. 在 GitHub 建立一個私人儲存庫 hugo-site 來管理你的網站原始碼，請記得包含 README.md 檔案。

  2. 在 GitHub 建立一個公開儲存庫 {YOUR_USER_NAME}.github.io 來上傳你的靜態網頁到 GitHub Pages。

  3. 將 hugo-site 複製到本地：

    git clone https://github.com/{YOUR_USER_NAME}/hugo-site.git

    或者，如果你已經使用了 Git Submodule，可以使用以下方式複製：

    git clone --recursive https://github.com/{YOUR_USER_NAME}/hugo-site.git

  4. 在 hugo-site 的同一層目錄創建 Hugo 專案（不要放在 hugo-site 裡面）：

    hugo new site hugo-site --force --format yaml

  5. 新增範例主題，這邊以 PaperMod 為例：

Add theme 
cd hugo-site

git submodule add --depth=1 https://github.com/adityatelange/hugo-PaperMod.git themes/PaperMod

echo "theme : 'PaperMod'" >> hugo.yaml

  1. 將 .gitignore 檔案複製到 hugo-site。

  2. [可選] 新增 GitHub Action 自動部署：

     mkdir -p .github/workflows/
 touch .github/workflows/hugo.yml

    將 hugo.yml 的內容複製到上述新增的空白 hugo.yml。請記得修改以下兩處：

    • token: ${{ secrets.ACCESS_TOKEN }}: 在這裡使用私人儲存庫的存取權杖（Access Token）。
    • repository-name: YOUR_USER_NAME/YOUR_USER_NAME.github.io: 將 YOUR_USER_NAME 改為你的 GitHub 帳號名稱。

  3. 測試 Hugo 網站：

    hugo server -D

  4. 開始創建自己的文章：

    hugo new posts/20231006/index.md

    在 content/posts/20231006 裡面的 index.md 開始撰寫，並將圖片放在同一個資料夾。

  5. 恭喜你，已經完成私人儲存庫的設定，請不要忘記將變更提交到私人儲存庫。

參考資料