Hugo 是一款流行的靜態網站生成器，而 PaperMod 是其中一個廣受歡迎的主題。然而，在本地機器上安裝 Hugo 和各種依賴可能會造成環境污染。本文將介紹如何使用 Docker 容器技術，在完全隔離的環境中運行 Hugo 與 PaperMod 主題，無需在宿主機上安裝任何依賴。
前置需求
- 已安裝 Docker 和 Docker Compose
- 基本的命令行操作能力
步驟 1: 創建項目目錄結構
首先，我們需要創建一個項目目錄，用於存放 Docker 相關配置和 Hugo 網站內容：
mkdir hugo-papermod-docker
cd hugo-papermod-docker
步驟 2: 創建 Dockerfile
在項目目錄中創建一個 Dockerfile，用於定義 Docker 映像：
FROM alpine:latest
# 安裝 Hugo、git 和其他必要工具
RUN apk add --no-cache hugo git curl bash
# 設置工作目錄
WORKDIR /site
# 設置環境變數
ENV HUGO_ENV=production
# 安裝 PaperMod 主題的腳本
COPY ./scripts/setup.sh /setup.sh
RUN chmod +x /setup.sh
# 暴露 Hugo 服務器端口
EXPOSE 1313
# 容器啟動命令
ENTRYPOINT ["/bin/bash", "/setup.sh"]
這個 Dockerfile 基於 Alpine Linux 映像，安裝了 Hugo 和必要的工具，並設置了容器啟動時執行的腳本。
步驟 3: 創建設置腳本
我們需要創建一個設置腳本，當容器啟動時自動初始化 Hugo 網站並安裝 PaperMod 主題：
mkdir -p scripts
創建 scripts/setup.sh 文件並添加以下內容：
#!/bin/bash
# 檢查 /site 目錄是否為空
if [ -z "$(ls -A /site)" ]; then
echo "初始化新的 Hugo 站點..."
hugo new site /site --force
# 克隆 PaperMod 主題
git clone https://github.com/adityatelange/hugo-PaperMod.git /site/themes/PaperMod
# 創建基本配置
cat > /site/config.yml << EOL
baseURL: "/"
title: "我的 PaperMod 博客"
theme: "PaperMod"
paginate: 5
params:
assets:
disableHLJS: false
# 禁用外部資源
googleFonts: false
# 主題設定
defaultTheme: auto
disableThemeToggle: false
# 首頁設定
profileMode:
enabled: true
title: "PaperMod 博客"
subtitle: "使用 Docker 建立的無依賴 Hugo 站點"
# 社交圖標（本地圖標）
socialIcons:
- name: github
url: "https://github.com/"
EOL
# 創建示範文章
mkdir -p /site/content/posts
cat > /site/content/posts/first-post.md << EOL
---
title: "第一篇文章"
date: $(date +"%Y-%m-%dT%H:%M:%S+08:00")
draft: false
---
# 歡迎使用 Hugo PaperMod！
這是你的第一篇文章。你可以使用 Markdown 格式編寫內容。
## 特點
- 完全離線運行
- 使用 Docker 容器
- 無需在主機上安裝任何依賴
EOL
echo "Hugo 站點已成功初始化！"
else
echo "使用現有的 Hugo 站點..."
fi
# 啟動 Hugo 服務器
echo "啟動 Hugo 服務器..."
cd /site && hugo server --bind=0.0.0.0 --port=1313 --disableFastRender
這個腳本的功能是：
- 檢查是否需要初始化新的 Hugo 站點
- 安裝 PaperMod 主題
- 創建基本配置和示例文章
- 啟動 Hugo 服務器
記得設置腳本的執行權限：
chmod +x scripts/setup.sh
步驟 4: 創建 Docker Compose 配置
接下來，創建一個 docker-compose.yml 文件來簡化容器的管理：
version: '3'
services:
hugo:
build: .
container_name: hugo-papermod
ports:
- "1313:1313"
volumes:
- ./site:/site
restart: unless-stopped
此配置將：
- 使用當前目錄的 Dockerfile 構建容器
- 將容器命名為
hugo-papermod - 將容器的 1313 端口映射到宿主機的 1313 端口
- 掛載
./site目錄到容器的/site目錄 - 設置容器在意外停止時自動重啟
步驟 5: 構建和運行容器
現在，確保項目結構如下：
hugo-papermod-docker/
├── Dockerfile
├── docker-compose.yml
├── scripts/
│ └── setup.sh
└── site/ # 這個目錄會自動創建並掛載
運行以下命令來啟動項目：
docker-compose up -d
第一次運行時，Docker 會：
- 構建容器映像
- 初始化一個新的 Hugo 站點
- 安裝 PaperMod 主題
- 創建基本配置和示例文章
- 啟動 Hugo 服務器
步驟 6: 訪問你的網站
現在你可以通過瀏覽器訪問 http://localhost:1313 來查看你的網站。
步驟 7: 編輯內容
所有網站內容會保存在 ./site 目錄中。你可以直接編輯這些文件，容器中的 Hugo 服務器會自動檢測變更並刷新頁面。
要創建新文章，可以使用以下命令：
docker-compose exec hugo hugo new posts/新文章.md
日常使用命令
以下是一些常用的命令，方便你管理 Docker 容器和 Hugo 網站：
啟動服務
docker-compose up -d
停止服務
docker-compose down
查看日誌
docker-compose logs -f
創建新文章
docker-compose exec hugo hugo new posts/新文章.md
構建靜態網站
docker-compose exec hugo hugo --minify
構建完成後，靜態文件會生成在 ./site/public 目錄中。
優化配置
本地化所有資源
為了確保網站完全離線運行，可能需要對 PaperMod 主題進行一些修改，確保所有資源（包括字體、圖標等）都是本地的。
編輯 ./site/config.yml 文件，添加以下配置：
params:
assets:
disableHLJS: false
favicon: "/favicon.ico"
favicon16x16: "/favicon-16x16.png"
favicon32x32: "/favicon-32x32.png"
apple_touch_icon: "/apple-touch-icon.png"
# 禁用 Google 字體
googleFonts: false
自定義主題
要自定義 PaperMod 主題，可以在 ./site/assets 目錄中添加自己的 CSS 和 JS 文件，覆蓋主題的默認設置。
結論
透過使用 Docker 容器，我們成功地在本地機器上無依賴地運行了 Hugo 網站和 PaperMod 主題。這種方法的優點包括：
- 不需要在本地機器上安裝 Hugo 或任何依賴
- 環境完全隔離，不會影響宿主機系統
- 易於遷移和分享項目
- 可以輕鬆地在不同機器上重現相同的開發環境
希望這篇教程對你有所幫助！如果你有任何問題或建議，歡迎在下方留言。