oDust 網站建置紀錄：從零開始打造個人部落格

兩天內從零到上線，一步步記錄這個部落格是怎麼誕生的。

oDust

2026年02月17日

Building, 2026

內文

oDust 這個部落格在 2026 年除夕夜正式誕生。從決定架站到第一篇文章上線，前前後後大約花了兩天的時間。這篇文章完整記錄了整個建置過程中的每一個環節，希望能給同樣想用 Hugo 架站的朋友一些參考。

一、Hugo 基礎架設

選擇 Hugo + Mainroad 主題

網站使用 Hugo 作為靜態網站生成器，搭配 Mainroad 主題。選擇 Hugo 的原因很簡單——速度快、部署方便，而且對 Markdown 的支援非常好，寫文章的體驗接近純文字編輯。

Mainroad 主題的特色是乾淨、有側邊欄、支援多種小工具（搜尋、近期文章、分類、標籤等），很適合個人部落格使用。

基本設定（hugo.toml）

在 hugo.toml 中進行了以下基本設定：

網址：https://odust.cc/
語言：繁體中文（zh-tw）
CJK 支援：開啟 hasCJKLanguage = true，確保中文字數統計和摘要截斷正確
日期格式：自訂為 2006年01月02日，顯示中文化的日期
字型：從 Google Fonts 引入 Noto Sans TC，取代預設的英文字型，讓中文排版更好看

languageCode = 'zh-tw'
defaultContentLanguage = 'zh-tw'
hasCJKLanguage = true
dateFormat = "2006年01月02日"
googleFontsLink = "https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;700&display=swap"
fontFamilyPrimary = "'Noto Sans TC', 'Open Sans', sans-serif"

二、「關於我」頁面設定

建立了一個獨立的「關於我」頁面，放在 content/about.md。透過在 front matter 中加入 menu: main，讓它自動出現在導覽列中。同時關閉了側邊欄和作者欄位，讓頁面看起來更簡潔。

---
title: "關於我"
authorbox: false
sidebar: false
pager: false
menu: main
---

三、Favicon 設定

為了讓瀏覽器分頁上顯示自訂的網站圖示，設定了完整的 Favicon。將各種尺寸的圖示檔案放在 static/ 目錄下：

favicon.ico（瀏覽器分頁圖示）
favicon-16x16.png、favicon-32x32.png
apple-touch-icon.png（iOS 桌面書籤）
android-chrome-192x192.png、android-chrome-512x512.png（Android）
site.webmanifest（PWA 設定檔）

Hugo 的 baseof.html 中已經有 <link rel="shortcut icon" href="{{ "favicon.ico" | relURL }}"> 這行，所以只要把檔案放在 static/ 下就能自動生效。

四、Vercel 部署

網站部署在 Vercel，透過 GitHub 倉庫自動建置。每次 push 到 GitHub，Vercel 就會自動拉取最新的程式碼，重新建置並部署。

過程中遇到了一個小問題：把 GitHub 倉庫設成 Private 後，Vercel 無法偵測到更新。後來透過重新設定 Vercel 與 GitHub 的整合權限，解決了這個問題。現在倉庫保持 Private，同時 Vercel 也能正常自動部署。

五、Umami 流量分析

為了追蹤網站流量，整合了 Umami 分析服務。在 baseof.html 的 <head> 中加入了追蹤腳本：

<script defer src="https://umami/script.js" 
        data-website-id="xxxx-xxxx-xxxx-xxxx-xxxx"></script>

Umami 是一個隱私友好的開源分析工具，不使用 Cookie，不追蹤個人資料，比 Google Analytics 輕量許多。

六、行動裝置優化

上線後發現「關於我」頁面在手機上顯示異常——只看到一個無法互動的選單按鈕，頁面內容完全沒有出現。

經過排查，問題出在 Mainroad 主題的手機版選單設計。在手機螢幕寬度下，選單會摺疊成漢堡選單，而「關於我」作為選單項目，其頁面內容的顯示受到了影響。最終透過調整 baseof.html 的佈局結構，解決了這個相容性問題。

七、介面中文化

Mainroad 主題預設顯示英文介面文字，像是 “Recent Posts”、“Categories”、“Read more…” 等。雖然主題已經內建了完整的繁體中文翻譯檔案（i18n/zh-tw.yaml），但因為 hugo.toml 中缺少一行關鍵設定，Hugo 一直使用英文預設值。

只需要在設定檔中加上：

defaultContentLanguage = 'zh-tw'

所有介面文字就自動切換成繁體中文了：

原本（英文）	修改後（中文）
Recent Posts	近期文章
Categories	分類
Read more…	閱讀全文…
Tags	標籤
Search…	搜尋…
Menu	選單

八、宇宙風格視覺設計

這是最後也是最有趣的一個環節——為網站加上宇宙星空風格的視覺設計。

背景圖

使用了一張以 “DUST” 為主題的宇宙星雲圖片作為整個網站的背景。圖片放在 static/img/odust.png，透過自訂 CSS 設定為固定背景：

body {
    background-image: url('/img/odust.png');
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-color: #0a0a1a;
}

background-attachment: fixed：背景固定不動，滾動頁面時會產生類似 Parallax 的視差效果
background-size: cover：圖片自動填滿整個畫面，不會有空白
background-color: #0a0a1a：圖片載入前顯示深色底色，避免閃白

為了確保文字可讀性，主要容器設定了半透明白底：

.container--outer {
    background: rgba(255, 255, 255, 0.92);
}

手機相容處理

iOS Safari 不支援 background-attachment: fixed，所以針對手機裝置改用 scroll：

@media (max-width: 768px) {
    body {
        background-attachment: scroll;
    }
}

主題色：深紫色

把 Mainroad 主題的 highlightColor 從原本的深藍色 #1e3a5f 改為深紫色 #6a1b9a，呼應背景圖中的紫色星雲。這個設定會影響到所有主題內的強調色元素——連結 hover 效果、引用框線、標籤色塊、分頁按鈕等。

淡紫色統一配色

為了讓整體配色更協調，將以下元素統一改為淡紫色系：

元素	顏色	色碼
導覽列（選單）	淡紫	`#b39ddb`
導覽列 hover	中紫	`#9575cd`
Footer 背景	更淡紫	`#d1c4e9`
Read more 按鈕	淡紫	`#b39ddb`
Read more hover	中紫	`#9575cd`
Header	白色	`#ffffff`

這些顏色都來自 Material Design 的紫色色票，彼此之間有明確的深淺層次，視覺上和諧統一。

所有的客製化樣式都寫在獨立的 static/css/custom.css 中，不修改主題原始檔案，方便日後主題升級時不會衝突。

九、自訂文章範本

為了加快寫文章的效率，建立了 Hugo 的 archetype 範本。每次執行 hugo new posts/文章名/index.md 時，就會自動產生包含常用 front matter 欄位的模板，不需要每次手動複製貼上。

結語

兩天的時間，從最初的 hugo new site 到現在的宇宙紫色風格部落格，中間踩了不少坑，也學到了很多。Hugo 的生態系非常成熟，大部分問題都能透過自訂 layout 和 CSS 來解決，不需要修改主題原始碼。

接下來的計畫是持續產出內容，分享關於 AI、生活、還有遊戲設計的所見所聞。

如果你也在考慮用 Hugo 架站，希望這篇紀錄能幫上忙。有任何問題，歡迎留言交流！