Will
Will
Jun 12, 2020 閱讀成本 4 分鐘

Hugo 轉部署到 Netlify

thumbnail for this post

這次的轉換遇到太多的撞牆期,這一篇特別記錄一下撞牆的解決方法,如果大家有相關的問題可以參考,期待大家都能夠找到自己的部署網站的方式。

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

文章於 Jun 13, 2020 更新

訂閱我們的電子報

感謝閱讀!如果想要第一時間收到文章與活動通知,請於下方欄位填寫您的 Email,之後將會收到不定期電子報。

訂閱服務確認

已發送 Email 驗證信給你,請點擊信件連結以完成訂閱程序

訂閱失敗

暫時無法接受訂閱,請稍候重新嘗試
如果您喜歡這篇文章,除了按讚、拍手,也歡迎分享到自己的社群中,文章採用創用 CC 姓名標示-非商業性-相同方式分享 3.0 台灣 授權條款授權,分享、引用請依授權規定,並附上原文連結(按右鍵複製連結):Hugo 轉部署到 Netlify