第一篇文章：從 Medium 轉移到 Hugo + Cloudflare Pages

2026-01-01 約 1293 字預計閱讀 3 分鐘

背景

因為 Medium 的內容設計實在太難用了，沒辦法像 Markdown 一樣動態的調整，所以搜尋了一下，決定使用 Hugo + Cloudfare Pages 來架設自己的網站，此篇文章紀錄一下整個過程。

整個流程參考 Ivon 的 Hugo + Github + Netlify免費架設靜態網站教學以及 Huli 的再會了，Medium 搬家到 Hexo 心得的文章，強烈建議先去看他們的文章。

Hugo

一開始先在 Hugo Theme 頁面決定主題，看了看所有 “blog” tag 的主題，最後選定 LoveIt，根據他們的 repo 說明，下載了 v0.145 版本的 Hugo，注意可能要下載 Extended 版本才能正確編譯 SCSS。

        
$ wget https://github.com/gohugoio/hugo/releases/download/v0.145.0/hugo_extended_0.145.0_linux-amd64.deb
$ sudo dpkg -i hugo_extended_0.145.0_linux-amd64.deb
$ hugo version
hugo v0.145.0-666444f0a52132f9fec9f71cf25b441cc6a4f355+extended linux/amd64 BuildDate=2025-02-26T15:41:25Z VendorInfo=gohugoio

常用到的 Hugo command 像是

        
hugo new site # 建立新網站
hugo new posts/.../*.md # 建立新的 post
hugo server # 開啟本地端伺服器

LoveIt Theme

簡單介紹一下 LoveIt，他不只是外觀，還提供了很多 SEO 選項, 額外 Markdown 語法, 顯示數學算式等很多功能，可以參考他們的文件網站同時也是他們的 Demo 網站，有很多設定的選項。

git submodule add LoveIt Theme 後，直接把 exampleSite 整個複製過來，做了以下微調。

hugo.toml

最主要產生主頁的設定檔案，我調整了以下內容：

title, description, eamil … 等個人內容
LoveIt Theme 提供了 i18n 多個語言管理網站的方式，但我目前暫時只會用正體中文，因此把其他語言先刪除
一些客制外觀，像是把 footer 關掉

assets

把 imgae 換成我自己想要用的圖片。

css

有 _overrid.scss 可以讓你替換顏色，像是我覺的 Dark mode 顏色很丑，我就用 $global-background-color-dark 替換了不同顏色。

content

把 template 的文章刪除，只剩下此篇。

static

換成自己像要的 icon，如下：

favicon-*.ico: 最古老但最通用的標準，所有瀏覽器都支援。主要用於舊版瀏覽器或當作最後的備用方案
favicon-*.png: 標準瀏覽器分頁圖示
apple-touch-icon-*.png: 這是現代 iOS 的通用標準，它會自動縮放給 iPhone 和 iPad 使用
web-app-manifest-*.png: 給 Android 手機用圖示，搭配 site.webmanifest 設定檔使用

gitignore

直接找現成的 Hugo gitignore

Markdown

Markdown 語法已經很熟悉了，我額外在 VSCode 用了 markdownlint and EditorConfig 擴充套件管理 Markdown 排版，像是強致用四個 space 縮排。

        
root = true

[*.md]
charset = utf-8
indent_style = space
indent_size = 4

LoveIt 常用語法

看了看 LoveIt 文件，紀錄一下常用到的語法。

font awesome 直接使用 icon
gist 引入
highlight 放程式碼，甚至可以直接畫熒光筆在某一行當重點
ref, relref 給站內連結，不要直接用 url
image 放圖片
admonition 放不同的摘要
可以直接放 mermaid code
raw 可以讓我們直接放 html 程式碼

部屬

如下用不同的工具部屬。

Private Repo

先把此 repo 部屬在自己的 private repo，同時設定了簡單的 CI (GitHub actio)，像是：

基本 Hugo build 檢查
Broken link 檢查
自動壓縮圖片

Namecheap

在 Namecheap 買了自己的 domain (kola.ink)

Cloudflare Page

參考 Cloudflare Pages免費部署Hugo靜態網站，不限傳輸流量文章設定，基本上就是：

連接 GitHub private repo
建置設定 Hugo, 並且新增 HUGO_VERSION = 0.145.0 變數
更換 Nameservers，確認 DNS record 沒有舊的跟 Namecheap 有關的紀錄
Pages 後台同時加入了 kola.ink 和 www.kola.ink
在 Cloudflare 啟用 DNSSEC 生成鑰匙，將 DS Record (Key Tag, Digest 等) 填回 Namecheap 後台
確認 whois 查詢已隱藏你的個人個資 (Redacted)

Medium

之後應該會在慢慢用 medium-2-markdown 把文章移動過來，並且在 GitHub repo CD 加入自動發布 Medium 文章，留待實做 …

遇到的問題

Google 沒辦法讀到我的文章

發現要去 Google Search Console 註冊，放上自己 Sitemap.xml 的網站給它讀，但在給它讀的時後會發現一直有錯誤，如圖。

經過詢問，發現可能只是 UI 錯誤，它會可能需要一個月才會讀取到。

Hugo 無法動起來

我在自己另外一個筆電跑得時候，用 hugo 跑會發現它會因為有些 blog 有它不懂的語法 “{{raw}}” 而無法執行。

        
$ hugo server
Watching for changes in /home/kola/git_projects/kola_blog/{archetypes,assets,content,layouts,static}
Watching for config changes in /home/kola/git_projects/kola_blog/hugo.toml
Start building sites … 
hugo v0.145.0-666444f0a52132f9fec9f71cf25b441cc6a4f355 linux/amd64 BuildDate=2025-02-26T15:41:25Z VendorInfo=gohugoio

Built in 3 ms
Error: error building site: process: readAndProcessContent: "/home/kola/git_projects/kola_blog/content/about/index.zh-tw.md:17:1": failed to extract shortcode: template for shortcode "raw" not found

最後發現，因為我用 LoveIt theme，他是一個 submodule，我們需要 init 它，所以跑 git submodule update --init --recursive 就解決了。

目錄