前言

在某天晚上，和同事們吃飯聊天時談到了寫技術部落格這件事身為工程師的我們常常會遇到各種技術問題，如果能將自己的技術經驗記錄下來，不僅能幫助遇到相同問題的人，更能強化自己對技術的理解跟記憶

寫部落格對我來說有三個重要價值：一是記錄學習歷程，將零散的知識系統化；二是訓練自己的表達能力，學會如何清楚地解釋技術概念；三是與開發社群交流，透過文章分享和討論，互相學習成長

在評估了幾個靜態網站生成器後，最終選擇了 Hugo，除了因為它是用 Go 開發的原因，更重要的是它具備快速的建置速度、豐富的主題選擇，以及活躍的社群支援

這篇文章將簡單記錄如何使用 Hugo 建立部落格的過程

環境準備

  • Git (v2.39.2)
  • Go (v1.23.4)
  • Homebrew (v4.4.12)

建立新的 Hugo 網站

安裝 Hugo

brew install hugo

.

安裝完成後，檢查是否安裝成功，如果成功，會看到類似以下的輸出:

hugo version
# hugo v0.140.0+extended+withdeploy darwin/arm64 BuildDate=2024-12-17T14:20:55Z VendorInfo=brew

建立基本框架

hugo new site myblog --format yaml
cd ./myblog

.

進來後會看到 hugo 預設建立好的資料夾，這些資料夾的用途大致如下:

myblog/
├── archetypes/    # 📝 文章範本
│   └── default.md
├── assets/        # 🎨 需處理的資源
│   ├── css/       #    - 樣式表
│   ├── js/        #    - JavaScript
│   └── images/    #    - 圖片
├── content/       # 📚 網站內容
│   ├── posts/     #    - 部落格文章
│   └── pages/     #    - 獨立頁面
├── data/          # 📊 結構化資料 (JSON/YAML)
├── layouts/       # 🎯 頁面模板
├── public/        # 🌐 產生的靜態網站
├── resources/     # 📦 資源快取
├── static/        # 📄 靜態檔案
├── themes/        # 🎭 網站主題
└── hugo.toml      # ⚙️ 主要設定檔

.

就跟 go module 一樣，需要先初始化 hugo module

hugo mod init github.com/your-username/your-repo

.

我這邊是使用 hugo module 的方式來安裝 theme，也可以選擇用 submodule 之類的

這樣可以直接在 hugo.yaml 內設定喜歡的 theme，有很多 hugo themes 可以去挑選

module:
  imports:
    - path: 'github.com/adityatelange/hugo-PaperMod'

.

再來就是把一些基本設定搞定，例如 baseURL、languageCode、title 等等

比較進階的設定可以之後再參考 hugo configuration 或是 hugo-PaperMod 來配置就好

baseURL: 'https://blog.christseng.com/'
languageCode: 'zh-tw'
title: '克里斯🐤的技術隨筆'

.

完成後就可以試著在本地 (http://localhost:1313) 跑起來看看囉

hugo server -D

建立新文章

hugo new posts/my-first-post.md

.

這個指令會在 content/posts/ 目錄下建立一個新的檔案 my-first-post.md

再來就可以看你要寫什麼內容囉，用熟悉的 markdown 語法寫起來就對了

推到 GitHub Repository

都設定好了之後，就可以把 code 推到 GitHub 上囉

git init
git add .
git commit -m "init blog"
git branch -M main
git remote add origin https://github.com/your-username/your-repo.git
git push -u origin main

部署到想要的主機上

可以參考 hosting-and-deployment 來挑選一個最適合你的方案，像我選擇的是 Cloudflare Pages，因為有無上限的流量請求以及每月 500 次的 build 次數，應該是蠻夠用的

如果不介意把 repo 設定成 public 的話，可以考慮 GitHub Pages，但如果不想要公開 repo 的話，可能就要考慮 Cloudflare 或是 Netlify 之類的方案囉

建立新的 Pages

登入 Cloudflare Dashboard 後，先進到 Workers & Pages 頁面，點選 Create 後選擇 Pages 會需要先 Conneect to Git 後進行設定

Cloudflare Pages 設定 1

進入設定頁後 Framework Preset 選擇 Hugo，Env 設定 HUGO_VERSION 後就可以開始部署，更方便的是只要有新內容 push 到 GitHub 上，Cloudflare 也會自動幫你建置和部署喔

Cloudflare Pages 設定 2

設定 Custom Domain

Cloudflare 會提供免費的 *.pages.dev

如果想要設定自己的網域的話:

  1. 直接在 Cloudflare 上買一個屬於自己的 doamin，再到 Custom domains 頁面進行設定
  2. 如果你已經有在其他服務商註冊的話，就要參考 Cloudflare Pages 設定自訂網域

小結

如果有看到最後，恭喜你已經成功建立了一個部落格，接下來就是好好享受寫文章的樂趣吧

接下來會來研究一下怎麼美化跟做進階設定，例如 SEO 優化、GA 追蹤等等，有機會的話就留到下一篇再來分享囉！

參考資料