簡介

• 這篇內容將快速帶你建立一個 Hugo Blog 並將其部屬到 GitHub 上

相關連結

• Hugo - Hugo 官網
• Hugo Themes - 選擇自己喜歡的主題
• Hugo Releases - 下載 Hugo 並安裝進電腦

教學開始

建立 Hugo Blog

1. 安裝 Hugo
   • 這裡以 Ubuntu 為示範
   • 先至 Hugo Releases 下載自己所需的版本

     1	$ dpkg -i hugo_extended_0.79.0_Linux-64bit.deb # 記得依照檔案自行更改

2. 創建一個 Hugo Site
   • 這裡創建一個名為 blog

     1 2	$ cd ~ $ hugo new site blog # 可自行修改名稱

3. 新增主題
   • 這裡我選擇了 Stack 這個主題

   1 2 3

   $ cd ~/blog/ $ git init $ git submodule add https://github.com/CaiJimmy/hugo-theme-stack/ themes/hugo-theme-stack

4. 跟著主題的教學文檔修改 config file
5. 如要建立新文章時

   1	$ hugo new post/test.md

   • 此時會在 content/post/ 下，建立新文章，檔名為 test.md
   • draft: 草稿
   • slug: 此文章的 url (可自行建立)
6. 本機測試

   1	$ hugo server -D

   • -D: 將會連草稿都顯示出來

部署到 GitHub

1. 在 GitHub 上建立一個新的 Repository
   • 名稱為 "Your account".github.io (“Your account” 使用自己 GitHub 的名稱)
2. 將剛才建立好的 Blog 上到這個 Repo

   1 2 3 4 5 6

   $ cd ~/blog/ $ git add --all $ git commit -m "blog init" $ git branch -M main $ git remote add origin [email protected]... #這裡使用了 ssh 的方式 $ git push -u origin main

3. 使用 GitHub Actions
   • 建立一個 workflows 名叫 hugo_publish.yml (有些地方須自行依照情況修改)
   • 內容：hugo_publish.yml
4. 修改 Repo 的設定
   • 先找到 GitHub Pages 的地方
   • 將 Source 改成 Branch: gh-pages
   • 有 custom domain 的記得填入
   • Enforce HTTPS 打勾
5. 這樣就完成了，之後只要 push 時，便會自動更新網站了