用 Hugo 搭建個人網站

前言

#

之前我就有用 Hexo 來搭建個人 blog，但說來慚愧，只寫了兩篇就懶了，真是不愧對我極度懶惰的稱號 ಠ⁠◡⁠ಠ

這次重拾寫文章便重新搜尋了一下，這次打算改用 Hugo 來搭建個人 blog。了解到 Hugo build 靜態文章的的速度真的飛快，加上也看到不錯的 theme，看能不能讓我多撐個幾篇文章 (⁠◍⁠•⁠ᴗ⁠•⁠◍⁠)⁠

安裝 Hugo

#

首先先來安裝 Hugo 吧！

我是選 windows 的 extended 版本 (版本差異可以查看 GitHub 說明)，可以直接下載 prebuilt binary 比較簡單

下載後解壓縮，然後把檔案都放到 c:\hugo\bin 底下

修改一下環境變數

另外，我自己平常都用 git bash 作為主要 terminal，所以還要改 .bashrc

# ~/.bashrc
export PATH="$PATH:/c/hugo/bin"

最後用 hugo version 確認安裝是否完成

hugo version
# hugo v0.147.8-10da2bd765d227761641f94d713d094e88b920ae+extended windows/amd64 BuildDate=2025-06-07T12:59:52Z VendorInfo=gohugoio

安裝其實滿簡單的 (⁠｡⁠•̀⁠ᴗ⁠-⁠)⁠✧

建立文章後台

#

這裡先說明一下靜態網頁 blog 的運作模式：
我們會搭建出一個 Hugo 專案（我這邊稱為文章後台），在裡面去寫很多篇 Markdown 格式的文章，然後再透過 Hugo 指令去轉換(build) 成靜態網頁的形式。最後只要部署靜態網頁到網路上就好囉，Hugo 專案內的其他東西就像是你的後台，都是產出文章的原始資料、設定檔或工具，不需要部署到網路上

我們現在先來做 Hugo 專案的搭建

hugo new site mywebsite

安裝 theme，我選擇 blowfish

git init
git submodule add -b main https://github.com/nunocoracao/blowfish.git themes/blowfish

設定 theme 的 configurations

先刪掉原本 hugo 產生的 hugo.toml，然後把 blowfish theme 裡面的 config/* 整個複製到 root/*

要注意如果原本就有 module.toml 的話，要小心不要覆蓋掉 (雖然我沒這問題)

然後打開 config/_default/hugo.toml 把這兩行改一下，baseURL 是要填到時候個人網站的網址哦！

theme = "blowfish" # UNCOMMENT THIS LINE
baseURL = "https://ianchiu28.github.io"

到這邊可以先在 local 端試一下，理論上會看到成功畫面，有看到的話代表到目前為止都成功哦 d(`･∀･)b

hugo server

寫一篇文章試試看

#

輸入指令，會自動升成一篇文章在 content/posts/ 底下

hugo new content content/posts/my-test-post.md

要注意改 draft = false，這樣用 Hugo 才會知道你這篇文章已經可以發布囉

改一下 layout，這樣才可以顯示文章

把 menu 打開

# config/_default/menus.en.toml
[[main]]
  name = "Blog"
  pageRef = "posts"
  weight = 10

調整 homepage 顯示內容

# config/_default/params.toml
[homepage]
  layout = "profile" # valid options: page, profile, hero, card, background, custom
  #homepageImage = "IMAGE.jpg" # used in: hero, and card
  showRecent = true
  showRecentItems = 5
  showMoreLink = true
  showMoreLinkDest = "/posts/"
  cardView = true
  cardViewScreenWidth = false
  layoutBackgroundBlur = false # only used when layout equals background

這樣就可以順利顯示囉 (◔⊖◔)つ

後面就再自己依喜好去調整自己喜歡的 configurations，可以看著 Hugo 的文件去調整，推薦先看這兩篇：

• https://blowfish.page/docs/getting-started/
• https://blowfish.page/docs/configuration/

把寫好的文章發布到個人網站

#

我是採用 GitHub Page 作為我個人網站的 Host。因為不用錢，滿推薦的哦 (✪ω✪)

先在你的 GitHub 帳號底下開一個新 repo，要注意名字必須是 <你的帳號>.github.io。

接著只要在這個 repo 下有一個 index.html，就可以透過 https://<你的帳號>.github.io 去瀏覽你的個人網站囉～不過我們直接用 Hugo 來試試吧！

先把文章 build 成靜態網頁

hugo

把 public/* 都複製到 GitHub Page 的 repo 內，然後 commit 上去，就部屬完成囉～

題外話：integrity 問題

#

我部屬到 GitHub Page 後，有遇到 integrity 問題。找了一下，可能是 build 的時候有壓縮或是什麼導致的。目前沒有看到很好的解法，也找不到 Hugo/Blowfish 有關閉 integrity config 的方法

現況是找到 /theme/blowfish/layouts/partials/head.html，找到有 integrity 的地方都把他砍掉。以及 /theme/blowfish/layouts/partials/vendor.html，把 jQuery 的 integrity 砍掉。然後重新用 hugo build 靜態網頁即可～

如果有更好的做法請再跟我說 இдஇ

最後加碼：我覺得每次都要複製 public/* 好麻煩

#

寫了一個 script

#!/bin/bash

# 設定目標資料夾
TARGET_DIR="../ianchiu28.github.io"

# 確認目標資料夾存在
if [ ! -d "$TARGET_DIR" ]; then
    echo "錯誤：目標資料夾 $TARGET_DIR 不存在"
    exit 1
fi

# 先建立 public 資料夾
hugo

# 清空目標資料夾（保留 .git）
find "$TARGET_DIR" -mindepth 1 -maxdepth 1 ! -name '.git' -exec rm -rf {} +

# 複製所有檔案，包含隱藏檔案
cp -rf public/. "$TARGET_DIR/"

echo "已將網站內容發布到 $TARGET_DIR" 

執行方式

sh publish.sh

然後用 git commit & push 就完成囉 (｡◕∀◕｡)

不太重要的閒聊

#

最近換了一份新工作，正處在努力適應的階段。回想起準備求職的這段期間，發覺自己其實沒留下什麼記錄在這世界上，我能講的好像只有工作經歷而已。看著眾多對手（？）都有著豐富的經歷，加上我也想讓自己的人生看起來豐富一點，準備重拾寫文章啦！這裡算是立一個 flag，希望極度懶惰的我能堅持下去 (⁠ʘ⁠ᗩ⁠ʘ⁠’⁠)