↓ 快轉到主要內容
首頁

Hugo + Blowfish 快速入門

·529 字·3 分鐘
作者
Mao

什麼是 Hugo？
#

Hugo 是用 Go 語言開發的靜態網站生成器，特點：

  • ⚡ 編譯速度極快
  • 📝 Markdown 原生支援
  • 🔧 無需資料庫、無 runtime
  • 🚀 適合部落格、文件站、作品集

為什麼選擇 Blowfish 主題？
#

Blowfish 是 Hugo 生態中功能完整的現代化主題：

核心功能
#

  • 🌓 暗色/亮色主題切換
  • 📱 響應式設計
  • 🎨 高度可客製化
  • 🔍 內建搜尋功能
  • 🌐 多語言支援

版面選項
#

  • Profile：個人檔案風格
  • Page：簡單頁面
  • Hero：英雄區版面
  • Card：卡片網格
  • Background：背景滿版

快速開始
#

1. 安裝 Hugo Extended
#

1
2
3
4
5
6
7
8

# Windows (winget)
winget install Hugo.Hugo.Extended

# macOS (Homebrew)
brew install hugo

# 驗證安裝
hugo version

2. 建立專案
#

1
2
3

hugo new site my-blog
cd my-blog
git init

3. 加入 Blowfish 主題
#

1

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

4. 基礎配置
#

hugo.toml:

1
2
3
4

baseURL = 'https://example.org/'
languageCode = 'zh-tw'
title = '我的部落格'
theme = 'blowfish'

config/_default/params.toml:

1
2
3
4
5
6

colorScheme = "blowfish"
defaultAppearance = "dark"

[homepage]
  layout = "page"
  showRecent = true

5. 建立第一篇文章
#

1

hugo new posts/hello-world.md

編輯 content/posts/hello-world.md:

1
2
3
4
5
6
7
8
9

---
title: "Hello World"
date: 2026-04-01
draft: false
---

## 我的第一篇文章

歡迎來到我的部落格！

6. 本地預覽
#

1
2
3
4

hugo server -D

# 開啟瀏覽器
# http://localhost:1313/

常用操作
#

建立新文章
#

1

hugo new posts/my-post.md

建立新分類
#

1
2

mkdir -p content/category-name
hugo new category-name/_index.md

編譯靜態檔案
#

1
2
3

hugo

# 輸出到 public/ 目錄

自訂樣式
#

建立 assets/css/custom.css:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

/* 自訂主題色 */
:root {
  --color-primary: #00ff88;
  --color-bg-dark: #0a0e12;
}

/* 自訂程式碼區塊 */
pre {
  background-color: #1a1a1a;
  border-radius: 8px;
  padding: 1rem;
}

Blowfish 會自動載入這個檔案。

Front Matter 參數
#

常用參數：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

---
title: "文章標題"                # 必填
date: 2026-04-01                # 必填
draft: false                    # 是否為草稿
tags: ["tag1", "tag2"]          # 標籤
categories: ["category"]        # 分類
description: "文章描述"          # SEO 描述
showToc: true                   # 顯示目錄
showReadingTime: true           # 顯示閱讀時間
feature: "cover.jpg"            # 封面圖
---

選單配置
#

config/_default/menus.zh-tw.toml:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

[[main]]
  name = "首頁"
  pageRef = "/"
  weight = 10

[[main]]
  name = "文章"
  pageRef = "posts"
  weight = 20

[[main]]
  name = "關於"
  pageRef = "about"
  weight = 30

部署到 GitHub Pages
#

1. 建立 GitHub Repository
#

1
2
3
4

git remote add origin https://github.com/username/my-blog.git
git add .
git commit -m "Initial commit"
git push -u origin main

2. 建立 GitHub Actions Workflow
#

建立 .github/workflows/hugo.yml:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

name: Deploy Hugo site to Pages

on:
  push:
    branches: ["main"]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
        with:
          submodules: true

      - name: Setup Hugo
        uses: peaceiris/actions-hugo@v2
        with:
          hugo-version: 'latest'
          extended: true

      - name: Build
        run: hugo --minify

      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./public

3. 啟用 GitHub Pages
#

  1. 進入 Repository Settings
  2. Pages → Source → gh-pages branch
  3. 等待部署完成

常見問題
#

Q: 如何更換主題？
#

A: 修改 hugo.toml 的 theme 參數，或直接修改主題檔案。

Q: 如何新增分類？
#

A: 建立對應目錄並在 params.toml 加入 mainSections。

Q: 如何加速編譯？
#

A: 使用 hugo server --disableFastRender=false 啟用快速渲染。

推薦資源
#

總結：Hugo + Blowfish 是建立技術部落格的絕佳組合。無需資料庫、編譯快速、完全掌控內容，非常適合開發者使用。