跳槽到 Hugo

我個人寫 JS 和 node.js 比較多，所以一開始想用 Hexo 來建部落格，因為它也是使用 npm packages，還有主題好看，但是後來部署還有調 style 遇到一些麻煩的問題，就果斷改用 Hugo 了。

Hexo 的各種小問題

講一下我遇到的一些問題

我還在用第一版的 yarn，所以部署前要在 package.json 指定 packageManager 欄位，才不會有衝突
要產生 Hexo 專案需要全域安裝 hexo-cli，但是 Cloudflare Pages build 指令也需要，而我不想用全域安裝。我後來的解決方法是在 package.json 裡面再裝一個 hexo-cli 的 dev dependency，就不需要讓 Cloudflare 全域裝東西了（滿足潔癖）
我在 Next 主題沒辦法改成用 Prism 的 syntax highlight，所以就放棄了，可能是 Hexo 版本或是主題的問題
個人感覺要調的東西太多了

結論：好像也沒有因為用 JS 而比較簡單

Hugo + Cloudflare Pages 步驟

照官方文件裝 Go, Hugo, DartSass
跟著 quickstart 設定 Hugo 內建的 hugo.toml
設定主題的 toml
去 Cloudflare Pages 綁定一個 github repo
把程式推上 repo

前置作業

所以我照官方文件裝了 Go, Hugo, DartSass, 唯一的問題就是 apt 裝的 Hugo 版本太舊，跟文件對不上，重裝 Github release 上的最新版就好了。接著跟著 quickstart 跑，就有個部落格網站了。

因為我沒用過 Cloudflare Pages，所以這次來試試看

Gokarna 主題設定

先去挑一個自己喜歡的主題，然後跟著官方的文件設定，我覺得 Gokarna 很好看，而且文件有基礎和進階兩種，可以簡單上手也可以改很多細節、文件也很完整（除了 customFooterHtml 只有提到，沒有寫出欄位）。

我把設定都塞在 hugo.toml

注意事項

baseUrl

如果沒有自己的網域，部署在 Cloudflare pages 會使用它給你的網域，因為部署前不確定，可以忽略這個欄位、build 指令改用 hugo -b $CF_PAGES_URL，可以自動把 baseUrl 綁到 Cloudflare 給的網域，詳見官方文件。如果是用自己的網域，可以參考 Hugo 文件，正常設成自己的網域就好

中文字體

Gokarna 預設的中文字體太粗了，字會糊在一起，所以我打算中文改用 Google fonts 的 Noto Sans TC。下載 ttf 以後，把 Regular 和 Bold 兩種放到 static/ 裡面，然後在 toml 裡面加入 ChatGPT 生的 code

customHeadHTML = """<style>
    @font-face {
      font-family: 'Noto Sans TC';
      font-weight: 400;
      src: url("/NotoSansTC-Regular.ttf");
      unicode-range: U+4E00-9FFF; /* 這是中文的Unicode字元範圍 */
    }

    @font-face {
      font-family: 'Noto Sans TC';
      font-weight: 700;
      src: url("/NotoSansTC-Bold.ttf");
      unicode-range: U+4E00-9FFF;
    }

    /* 字體堆疊：中文使用 Noto Sans TC，其他使用 Lato */
    body {
      font-family: 'Noto Sans TC', 'Lato', sans-serif;
    }
</style>
"""

就會在 html 的 <head> 裡面加入這些程式，讓中文用 Noto Sans TC，其他的還是使用 Lato。

我也放了一小段 css，讓 inline code 好看一點

:not(pre) > code {
  padding: 2px 4px;
  border-radius: 4px;
}

我放了 html 的 footer 顯示圖片來源

customFooterHtml = """<p style=\"font-size:.85em\">Credits :
<a href=\"https://unsplash.com/@bradthemann\"> 大頭貼</a>、
<a href=\"https://www.flaticon.com/free-icons/tree\">favicon</a></p>"""

Favicon 和 Manifest

Hugo 預設是沒有 Favicon 的，所以我用 realfavicon.net 生了 favicon 和 manifest、放在 static/、把引用的 html 放在 customHeaderHtml，後面加上中文字體那段程式

customHeadHTML = """<link rel=\"apple-touch-icon\" sizes=\"180x180\" href=\"/apple-touch-icon.png\">
<link rel=\"icon\" type=\"image/png\" sizes=\"32x32\" href=\"/favicon-32x32.png\">
<link rel=\"icon\" type=\"image/png\" sizes=\"16x16\" href=\"/favicon-16x16.png\">
<link rel=\"manifest\" href=\"/site.webmanifest\">
<link rel=\"mask-icon\" href=\"/safari-pinned-tab.svg\" color=\"#5bbad5\">
<meta name=\"msapplication-TileColor\" content=\"#da532c\">
<meta name=\"theme-color\" content=\"#ffffff\">
"""

設定完 favicon 以後，網站就變成可以下載的 PWA 了，但是好像因為沒有 service worker 所以不能離線使用，之後再看看要不要加

看不見文章

文章如果設定 draft = true 、發佈日期在未來、expiryDate 過了都會讓文章看不到，除非寫文章的時候 hugo serve 有加 -D, -E, -F flag

另一種可能是用了 Gokarna 主題，貼文的 Front Matter（md 檔最上面）需要加上 type= "post" 才能看到

文章頁面 404

如果你的 baseUrl 照上面設定，但是點開文章連結卻顯示 404 NotFound，有可能其實是因為你沒有文章發佈。這個設計怪怪的，應該顯示沒有貼文才對，害我 debug baseUrl 一段時間都沒有效果

改了設定但是沒有更新

先 rm -rf public 看看

結論

我目前對 Hugo 是挺滿意的，quickstart 很快上手、調整的設定可多可少、除了 Gokarna 有一點點文件沒寫清楚都沒什麼問題

用 Hugo 架部落格沒有我想得那麼簡單（wordpress 等級），還是需要瞭解 CLI、html 才能順利的部署和調整成自己喜歡的樣子，不過肯定是比自己重新寫一個簡單多了