從零開始：在 NAS 上打造個人部落格的完整歷程

2026-10-04

這篇文章記錄我在飛牛 fnOS NAS 上，從零開始架設 Hugo 靜態部落格、透過 Cloudflare Tunnel 對外發布、並逐步加入各種自動化功能的完整過程。

🎯 專案背景

硬體：飛牛 fnOS NAS (IP: 192.168.0.57)
域名：nnainas.org (透過 Cloudflare Tunnel)
靜態網站產生器：Hugo v0.128
主題：自訂極簡風格

📦 核心架構

1. Hugo 部落格部署

NAS 上路徑：/home/nn/blog/
├── content/posts/          # 文章 (Markdown)
├── layouts/_default/       # 模板
├── static/                 # 靜態資源
│   ├── tabs/              # 吉他譜爬蟲頁面
│   └── ukulele/           # 烏克麗麗譜頁面
├── hugo.toml              # 設定檔
└── public/                # 建置輸出

2. Cloudflare Tunnel 穿透

不需開放 NAS 防火牆埠口
自動處理 HTTPS 憑證
域名 nnainas.org 直接指向 NAS 上的 Hugo dev server (port 1313)

🛠 開發過程中的關鍵里程碑

生日專頁實驗 (已移除)

一開始在 Python SMB 檔案瀏覽器 (nas_web.py) 加了 /birthday 路由，後來決定統一用 Hugo 管理內容，移除並改為靜態頁面部署到 static/birthday/，最後又完整移除。

SMB 檔案瀏覽器 (`nas_web.py`)

Python http.server + impacket SMB
掛載 NAS 共享資料夾 (nn01, Photos, password)
功能：列目錄、下載檔案
埠口：8080 (內網)

吉他譜爬蟲 (`/tabs/`)

靜態頁面 + 後端 API (tabs.nnainas.org/api)
功能：搜尋歌名/歌手 → 顯示來源 → 一鍵生成 PDF
整合 ultimate-guitar.com 等來源

烏克麗麗譜 (`/ukulele/`)

複製吉他譜頁面，改接同一組 API
搜尋關鍵字預設為烏克麗麗相關曲目
選單項目：weight = 6

桌面：橫向顯示所有選單
手機 (≤768px)：收成 ☰ 漢堡按鈕
側邊欄滑入動畫、遮罩關閉、ESC 鍵支援、無障礙屬性

🔧 遇到的坑與解法

問題	解決方案
Hugo 配置 TOML 格式錯誤	手動重寫 `hugo.toml` 確保縮排正確
Heredoc `EOF` 殘留在 HTML	`sed -i ’s
SMB 檔案被佔用無法備份	確認 Excel 未在其他處開啟，或用 `io.BytesIO` 讀取
OpenVINO GPU 模型載入失敗	驅動問題，改用 CPU 或檢查 Intel GPU 驅動
Cloudflare Tunnel 連不上	確認 `cloudflared` 服務運行、DNS 設定正確

📝 自動化腳本清單

腳本	用途
`nas_web.py`	SMB 檔案瀏覽器 (port 8080)
`nas_smb.py`	SMB CLI 工具 (ls/get/shares)
`backup_nas.py`	每日自動備份 Excel 到 NAS
`update_ag.py`	定時同步投資理財表格
`ddns_update.py`	dynv6 DDNS 更新 IPv6
`rotunda-stack/server.py`	OpenVINO LLM API 服務 (實驗性)

🚀 部署流程標準化

# 1. 寫文章
vim content/posts/new-post.md

# 2. 本地預覽
hugo server -D --bind 0.0.0.0 -p 1313

# 3. 正式建置
hugo

# 4. 自動透過 Cloudflare Tunnel 對外 (無需手動操作)

💡 心得與未來規劃

已完成

✅ 部落格核心架構穩定
✅ 吉他/烏克麗麗譜爬蟲可用
✅ 響應式設計支援手機
✅ 自動化備份與同步

進行中

🔄 優化 PDF 生成品質
🔄 增加文章搜尋功能
🔄 留言板後端整合

計劃中

📅 相簿頁面 (整合 NAS Photos)
📅 文章標籤雲與分類頁
📅 RSS/Atom Feed
📅 部署流程 CI/CD 化 (GitHub Actions + Cloudflare Pages)

原始碼與設定：都在 NAS 的 /home/nn/blog/ 目錄，隨時可版控、備份、遷移。

下一篇預計分享：如何用 GitHub Actions 自動建置部署到 Cloudflare Pages，完全脫離 NAS 也能跑。

這篇文章本身也是用 Hugo + Markdown 寫成，推送後自動發布。 🎉