📔 Hugo 部署指南

📔 Hugo 部署指南

歡迎使用 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 為例:

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. 恭喜你,已經完成私人儲存庫的設定,請不要忘記將變更提交到私人儲存庫。

參考資料