去年在工作上學習到很多技術，但一直沒有好好整理，在朋友的推薦下決定開始寫部落格，記錄一下學習心得。
說到部落格就會想到 Blogger, Medium, WordPress 等平台， 但身為一個工程師感覺就是要自己架設部落格，只是建置網站的成本很高，伺服器貴貴 QQ
就找了一下看有甚麼方式可以花少少的錢錢就建置部落格，看了幾款開源的部落格專案後決定使用 Hugo + GitHub Page 來進行建置。
所以我們的部落格之旅的第一站就是如何用 hugo 建置靜態網站。
為什麼選擇 Hugo #
在眾多靜態網站生成器中，我選擇 Hugo 的原因如下：
- 它是個靜態頁面產生器，目前市面上有許多架設靜態頁面的服務都是免費的，且 SEO 對靜態網站較為友善
- Hugo 是用 Golang 撰寫的，剛好符合我的學習規劃
- 身邊有朋友在使用 Hugo，遇到問題可以互相討論
Hugo 簡介 #
Hugo 是一個強大的靜態網站生成器，可以將 Markdown 檔案轉換成純靜態 HTML。 截至 2025/01/21，在 GitHub 上已有 77.4k 星星，並支援 macOS、Linux、Windows 等各大平台。
Hugo 最大的特點就是建置速度快，官方自豪地宣稱：
The world’s fastest framework for building websites
安裝 hugo #
由於工作時是使用 mac，所以下面介紹 mac 的安裝方式。
官方有提供個平台多種安裝方式，可以去官網看看。
前置 #
理論上如果沒有要自己 build，或是使用 hugo 的模組功能只要下載 git 就好。
Homebrew #
brew install hugo
安裝完後可以使用以下指令查看有無成功。
## 查看版本
hugo version
## 應該會看到一下回應
hugo v0.140.2+extended+withdeploy darwin/arm64 BuildDate=2024-12-30T15:01:53Z VendorInfo=brew
簡單指令介紹 #
基本上要會用 hugo 只需要記四個指令就可以了。
## 創建網站
hugo new site [proj_name]
## 建立新文章
hugo new posts/[my-post].md
## 開啟 local 伺服器, -D 顯示草稿
hugo server
hugo server -D
## 產生靜態頁面檔案
hugo
簡單目錄介紹 #
這邊簡單介紹一下目錄，建立新專案後目錄如下。
- assets：放置靜態資源的地方 (images, css, js)。
- content：放置 md 檔的地方。
- themes：放置主題的地方。
- hugo.toml：設定檔。
- public： 靜態檔產生的目錄，一開始不會有。
開始撰寫部落格 #
知道以上基本知識後就可以來撰寫部落格瞜。
首先當然是先挑選一個順眼的主題 #
翻了一輪官網的主題後，挑了這個 blowfish 主題，
在眾多看起來蠻正式的部落格主題中出現一隻河豚，當然選他XD
建置專案並匯入主題 #
# 建置部落格專案
hugo new site new_proj
# git 初始化
git init
# 把 blowfish 的 Git 專案（子模組）加到你的專案裡
git submodule add -b main https://github.com/nunocoracao/blowfish.git themes/blowfish
# 刪除原本的設定檔
rm hugo.toml
# 把主題的設定目錄複製出來
cp -r themes/blowfish/config/ config/
接下來就可以來設定基本資訊 #
這邊先貼一下官方的教學。
- 修改 config/_default/hugo.toml
# theme 原本是註解的，拿掉＃即可 theme = "blowfish" baseURL = "https://your_domain.com/" languageCode = "en" - 修改 config/_default/languages.en.toml
# 填寫 params.author 區塊，記得要把＃拿掉 # image 圖像應放在 assets 中 (預設為河豚) [params.author] name = "小Ｐ" email = "[email protected]" image = "img/blowfish_logo.png" imageQuality = 96 headline = "I'm only human"
設定完後就可以先開啟 local 伺服器來看看。
# hugo local server 預設 port 為 1313
hugo server
撰寫第一篇文章 #
由於靜態檔案都會產生在 public 目錄。
在新增文章之前可以先新增 .gitignore，將 public 目錄排除。
#.gitignore
/public
新增第一個 md 檔，他會放置在 content 目錄底下。
hugo new posts/first-post.md
每篇文章最上面都會有 Front matter，而文章內容是寫在下方。
如下
+++
date = '2025-02-17T01:59:30+08:00'
draft = true
title = 'First Post'
+++
## 歡迎來到我的 Hugo 網站
這是我的第一篇 Hugo 文章，我正在學習如何使用 Hugo 來建立靜態網站。
Front matter 用來設定文章的 標題、日期、分類、標籤 等資訊。
開啟伺服器來看看 #
如果文章還是草稿模式 (draft = true) 記得開啟伺服器時要加 -D。
網址為：http://localhost:1313/posts/first-post
hugo server -D
其他設定 #
如果有在網站點過一輪會發現我們目前無法從 homepage 找到我們剛剛的文章，因此建議開啟兩個設定。
- 開啟 menus
# config/_default/menus.en.toml # 打開註解即可 [[main]] name = "Blog" pageRef = "posts" weight = 10 - 最近文章顯示首頁
# config/_default/params.toml [homepage] showRecent = true cardView = true
設定完後畫面如下:
看到這個地方就代表我們的靜態網站已經建置完成了！不過這只是開始而已，下一站將介紹如何把網站部署到 GitHub Pages，以及如何設定自己的網域。
