Hexo 轉到 Hugo

會想將網站改用HUGO架的最後稻草，算是npm肥大的問題
套用 CI/CD 之後，每次自動跑編譯更是把這個弊病放大
動不動編譯就要跑1X～2X分鐘 也有可能是我的伺服器太爛

之前還想哪天要整理一下貼文，剛好連生成器也一起換了

選用主題

主體就選用 stack，有些地方再自己修改

我這邊clone CaiJimmy/hugo-theme-stack-starter 來使用，省去自己安裝

PS:
因為用 starter 還有自行修改。所以如果主題有更新，還要另外檢查一下修改的地方有沒有跟更新衝突。

修改的詳細步驟請看 絕對不是想水文章

• Hugo 定製自己的Stack主題
• Hugo Theme Stack 修改 CodeBlock
• Hugo 短代碼 shortcode

修改預設設定

在修改之前，由於 Hugo 的設定檔格式十分有彈性 (相對複雜)，建議修改前先稍微了解一下 除非設定檔要照抄

• Hugo 設定檔結構

開啟換行自動轉 <br>

調整 markdown 處理器，將一般文字的換行符號轉 <br>
如果沒開 (預設沒開)，相鄰的兩行會接在同一行，例如：

1
2

第一行
第二行

第一行 第二行

修改 config/markup.toml 找到 [goldmark.renderer]
加上 hardWraps = true，就可以了，這樣寫起文章來也比較貼近平常習慣

1
2
3
4
5
6

# Markdown renderer configuration
[goldmark.renderer]
unsafe = true
hardWraps = true

...

設定 Google Analytics 網站分析

Hugo 官方本來就有提供設定方法，詳情請參考 hugo templates
通常沒特殊需要，只需要用 Hugo 內建的模版就好了

如果需要替換，在專案資料夾內新增 layouts/_internal/google_analytics.html 取代原模版
隨附 hugo 預設模版 google_analytics.html

在設定檔內加入 googleAnalytics 的評估 ID，就可以了

1
2
3

[services]
  [services.googleAnalytics]
    id = 'G-MEASUREMENT_ID'

設定 rss atom feed

這邊也切成另一篇文章

• Hugo 設定RSS, ATOM Feed

設定 CICD

我在用的環境之前有安裝 Drone CI 在用
但去年覺得怎很久沒跳需要更新，才發現免費版停更了
找了一陣子發現開源的替代方案 woodpecker，一樣是是用容器處理對應步驟
設定檔用起來也不會差太多

使用方法改天再來寫教學

當然，如果你是用 github 或是 gitlab，也可以用自帶的 github workflows 這類功能就可以了

設定自動更新主題

在 woodpecker repo 內點設定，在 cron 分頁中建好名叫 every week 的排程
更新主題應該不用太頻繁，所以我定每週跑一次，你也可以調更頻繁

更新步驟就照改自 stack starter 的 github workflows
在專案資料夾下新增 .woodpecker/update-theme.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

when:
  event: cron
  cron: "every week"

steps:
  - name: update theme
    image: hugomods/hugo:dart-sass-go-git
    commands:
    - hugo mod get -u github.com/CaiJimmy/hugo-theme-stack/v3

  - name: Tidy go.mod, go.sum
    image: hugomods/hugo:dart-sass-go-git
    commands:
    - hugo mod tidy

  - name: Commit changes
    image: appleboy/drone-git-push
    settings:
      branch: main
      remote:
        from_secret: gitea-remote-withpass
      force: false
      commit: true
      commit_message: "CI: Update theme"
      author_name: "zonelin"
      author_email: "th5331958@gmail.com"

hugo image 我是使用 razonyang 大大做的 docker image
他提供了各種版本跟套件的組合，有需要可以去 https://docker.hugomods.com/choose/ 找你需要的 image

這邊我有另外遇到一個小問題，就是我自己架的 git 是沒有開放 ssh 連線的
所以做了一點變通，將帳號密碼合併到 remote 字串，放在 secret 裡面

1

https://username:password@your.gitea.com/username/repository.git

至於安全性，我覺得既然都可以將 ssh private key 內容放在 secret 裡面了，帳號密碼也沒關係吧

詳細的設定請參考 Woodpeak Git Push 至私有 git

設定推送至 GitHub

同樣在 .woodpecker 新增流程設定檔 github.yml
這次稍微改動，只有並到 release 分支，才會觸發執行

 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

when:
  - event: push
    branch: Release

steps:
  - name: build
    image: hugomods/hugo:dart-sass-go-git
    commands:
    - hugo build
    - cp public/post/rss.xml public/rss.xml

  - name: deploy git page
    image: appleboy/drone-git-push
    environment:
      PLUGIN_BRANCH: main
      PLUGIN_SSH_KEY:
        from_secret: github_key
      PLUGIN_REMOTE: "git@github.com:ZoneLin/blog-public.git"
      PLUGIN_AUTHOR_NAME: zoneLin
      PLUGIN_AUTHOR_EMAIL: th5331958@gmail.com
      PLUGIN_FORCE: true
      PLUGIN_COMMIT: true
      PLUGIN_COMMIT_MESSAGE: "Auto generated using Woodpecker CI"
    commands:
    - cd public
    - git init
    - /bin/drone-git-push

這次是推送到 GutHub 所以可以用 SSH key 方式推送
我不想把網站程式碼公開出去，所以只將編譯完的 public 資料夾推到 GutHub 上

到這邊其實 GitHub Page 差一步就可以設定好了
到 repository 設定 > Pages 點 upgrade 就可以了

備註 repository 的名稱必須是 XXX.github.io
詳細可到 github page 官網看 https://pages.github.com/

部署到 CloudFlare Page

請參考 Cloudflare Page 架站教學

這邊就跟之前一樣沒作修改，流程大概如下

1. CloudFlare Page 設定監看 GitHub
2. 把編完的靜態網站檔案傳到 GitHub

後就等自動同步就好了，通常只需要幾秒

設定搜尋引擎

• Google Search Console - 讓 Google 搜尋到部落格內容
• Bing Webmaster Tools - 讓 Bing 搜尋到部落格內容

套用 Google AdSense

• Google AdSense 讓你的網站幫你賺錢

大概就這些了 🥱