技術筆記｜Hugo 轉部署到 Netlify

去年初把 Blog 改版使用 Hugo 之後，就一直都是使用 Github Pages 來當作網站的伺服器，這次的轉換其實並不是因為不穩定，或者有所謂的必要性，其實很大的一個原因在於 Netlify 提供了 Hugo 的內容管理（CMS, Content Management System）功能，因為想用這個功能，才進一的研究。

先說結論，最後我並沒有成功的開始用 Netlify CMS 去管理我的每個網站，但是我還是依序地把自己用的網站，轉部署在 Netlify 之中。

實際上動工是因為看到梅問題分享的一篇文章，剛好看到自己想要找的技術資源（程式碼），所以就順勢自己來測測看。

過程之中，其實是充滿不順利的，因為對我來說不是完全重新的佈建，我是想要把自己使用 Hugo 架設的四個網站，能夠原樣的重新部署在 Netlify 之上。

過去這一年多中，因為自己不斷的修改部分的程式碼以及版型，加上 Hugo 也發布了許多版本，等於如果用最新版本去套，很容易發生錯誤。

中間忘記經歷過幾次的撞牆期，就是一段段去看程式碼到底出了什麼問題，也促成了我想寫這一篇的原因。步驟的部分就是照梅干站長在網站所寫的方式，一步一步的往前進，但我也中間斷斷續續好多次，特別記錄在下面。

資料夾裡面的隱藏檔案要刪掉

我是透過 Github Desktop 來管理 Git 檔案的，一方面是我對於直接用終端機操作真的很不熟悉，加上我不是一個程式開發人員，使用上來說追求的是我能懂且方便，因此在一開始的時候就都是透過 Github Desktop 來做這件事情。

不過再把原本只有 Publish 網頁的那個資料夾上傳的模式，改成要把所有 Hugo 檔案都上傳的時候，真的是吃足了苦頭。

創了一個新的 git repository，想說可以直接把檔案傳上去，不斷的失敗、失敗、失敗。中間我曾經放棄過好幾次，想說幾天後真的還想要做在試試看。

沒想到幾天之後就還是繞回來想要試試看，真是有客家人硬頸的精神，再找很多網路資料後，終於發現了一個關鍵點，就是 publish 資料夾之中，經過 git 上傳過後，會自動創造一個隱藏資料夾。

小技巧：Mac 要在 Finder 叫出隱藏檔案，按 command + shift + .(dot)

打開了隱藏檔案，就會發現原來裡面有一個 .git 的資料夾，這個資料夾一定要刪掉，才會能夠把所有的內容都上傳成功。

我還特別把去看了一下其他資料夾，有可能也有，只要是顯示無法上傳的資料夾，應該多數都是這個問題。刪掉之後，第一次感受到海闊天空，因為第一部建立一個 git repo 終於完成。

原始的程式碼需要修改

梅干站長所提供的 netlify.toml 設定檔案，不知道為什麼的，對我來說就是不適用。我研究可能是因為 Hugo 版本或者 netlify 內建設定的支援版本問題。

一次次看到的就是不斷的收到 failed 的訊息，我是屬於比較土法煉鋼的方式，看到一行錯誤，就去 debug 一次，把錯誤的那個地方做修改或者刪掉。

期間，我收到比較多錯誤就是 unknown command “-XXX” for “hugo”，經過嘗試大概就把辨識不出來的刪掉，就會一關一關推進，最後就就完成了部署。

我最後成功的程式碼，精簡到如下：

[build]
publish = "public"
command = "hugo"

[context.production.environment]
HUGO_VERSION = "0.69.1"
HUGO_ENV = "production"
HUGO_ENABLEGITINFO = "true"

[context.split1]
command = "hugo –enableGitInfo"

[context.split1.environment]
HUGO_VERSION = "0.69.1"
HUGO_ENV = "production"

[context.deploy-preview]
command = "hugo –buildFuture -b $DEPLOY_PRIME_URL"

[context.deploy-preview.environment]
HUGO_VERSION = "0.69.1"

[context.branch-deploy]
command = "hugo -b $DEPLOY_PRIME_URL"

[context.branch-deploy.environment]
HUGO_VERSION = "0.69.1"

[context.next.environment]
HUGO_ENABLEGITINFO = "true"

最後說說為什麼要改部署到 Netlify

其實要轉部署這件事情，我思考了很久，畢竟我最早開始的 blog 經驗是從 Blogger 而來。

Blogger 是一個免費且非常完整的平台，不僅僅只是發布以及版型的多元，還有妥善的管理介面，雖然後來因為後台對 Mobile 支援度低，加上我喜歡嚐鮮且發現 Hugo 有更大的可塑性，所以轉使用 Hugo。但始終難以忘懷 Blogger 方便的管理。

Netlify CMS 是一個吸引我的點，雖然這次沒部署成功，但相信未來還是有機會往這個目標邁進。

不過，會仍開始改用 Netlify，其實在免費資源的支持度上面並沒有太多的差異，但有一件事情卻還是讓我覺得很大的優勢，就是「自動部署」，也就是 CI/CD，可以在 Repository 變動的同時，自動 Depoly Hugo 指令，等於就幫我發布網站。

之前使用 Github Pages 都是要在本機先執行 Hugo 部署好，再把已經產生的網站（HTML等）檔案上傳。

但使用 Netlify 就大大減少了這一關，也就是我只要在 git 的資料夾新增了任何檔案，直接發佈到 github 上面之後，就會自動部署，進而發布網站。

這亦就充滿了想像力，即使沒有網路平台的 CMS 系統，還是可以透過手機、平板更新 github 裡面的檔案，間接的完成了遠端管理、直接部署。

因為 Hugo 編輯就是一個個檔案的堆疊加上 Markdown 寫出來的文章，透過這次的重新部署在 Netlify，也讓我達到了更趨近於隨時都可以更新的目標。