2020-06-12

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,也讓我達到了更趨近於隨時都可以更新的目標。