iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 17
0
Modern Web

Hugo 貼身打造個人部落格系列 第 17

Day 17. Hugo Site 部署 - Netlify

  • 分享至 

  • xImage
  •  

簡介

Netlify 官網寫著:「The fastest way to build fastest sites.」,似乎在對著 Hugo 使用者說我可以讓你快上加快,摩多海鴨古。

註冊

Netlify 首頁,點選右上角的 Sign Up ->

來到註冊頁面,我們會看到列出了三種 OAuth 2.0 提供者:GitHub、GitLab、BitBucket,以及 Email 等四種註冊方式。

建議事先註冊好其中一種託管平台,直接透過第三方授權註冊,因為後續我們還是需要:

  • 將網站 (public 整包) 丟到你的託管平臺
  • 允許 Netlify 讀取我們的 repository
  • 透過 git push 觸發 Netlify 跑部署腳本
  • 最後 Netlify 會把網站部署更新上線

這邊以 GitHub 為例,下圖為選擇 GitHub 註冊,進行登入授權的頁面:

讀取 Repository

從 Git 讀 Repository,點選區塊右邊的按鈕 New site from Git:

選擇你要讀取的 Repository Source,這邊我們選 GitHub:

授權存取頁面,這邊我先選了 all repository:

資源庫存取授權完成後,可透過搜尋找到之前已經 git push 到資源庫的 public repository:

載入完成後,回到 Netlify 首頁會看到多了個資料夾:

設置部署

點進去資料夾,選擇 deploy 會出現設置部署的介面:

啟用 auto publishing 之後,只要本地的 public 有被更新,cd 到你的 public 進行 git push,就能觸發網站自動部署。

成果

這是部署好的範例網址 (寫完文章暫時已移除),https://littlebookboy.netlify.app/

小結

與 GitHub Pages 相比,Netlify 更專注在「管理靜態網站」,而且它已經內建自動部署更新、custom domain 設置等等服務,你可以直接在 Netlify 頁面上指定你已經擁有的域名,或是直接在官網上面買一個

筆者認為 GitHub 是專注在提供程式版本控制的託管平台,兩者的定位本質上就不一樣;假設你剛起步,只有或只需要一個網站,單單使用 GitHub Pages 已堪用,但若是你有「很多網站」,或是需要更多「進階」功能 (Netlify 有許多付費服務可選用),使用 Netlify 是蠻不錯的選擇。

參考連結


上一篇
Day 16. Hugo Site 部署 - GitHub Pages
下一篇
Day 18. Hugo Site 自動部署 - 使用 Bash Shell Script
系列文
Hugo 貼身打造個人部落格30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
alicexdcw
iT邦新手 5 級 ‧ 2021-06-05 15:44:50

不好意思 想請問 筆者
發現到如果直接 git clone https://github.com/kakawait/hugo-tranquilpeak-theme.git themes/tranquilpeak 如果有改到下載下來的主題裡面的檔案,就無法部屬到netlify和完整的把東西推到github上(會留有一個檔案無法stage)

所以如果有更改到下載下來的主題裡面的檔案,是不是要fork到自己的資料夾後,git clone自己fork的那個網址呢? 我也有這樣試過,不過就是上傳上去的時候沒有套用到樣式

看更多先前的回應...收起先前的回應...

我沒試過直接改動 themes/tranquilpeak 底下的檔案,我都是以 override 的做法,在我專案根目錄底下,取同名的 path/file 去覆寫。

我印象中同路徑檔案,會優先於佈景的對應路徑檔案,是 Hugo 預設行為,可能還要在查一下官網文件。一旦你異動的是你版控的專案目錄,就不會有上述說的還要 fork 去改動的必要了 (除非無法覆寫)。

你可以試著把佈景中的 layout (假設這是你要改的地方) 資料夾複製到你根目錄底下,接著去變更內容跑看看,若有異動生效,應該能部署到 netlify 上再試一次看看。

alicexdcw iT邦新手 5 級 ‧ 2021-06-07 11:00:19 檢舉

不好意思 我應該給錯誤訊息的 Error checking out submodules: fatal: No url found for submodule path 'themes/hugo-tranquilpeak-theme' in .gitmodules
我後來沒有更動 themes/tranquilpeak底下的檔案 ,但是部屬的時候出現這個

抱歉,那我也回錯方向了,我平常都跑自動腳本,且沒使用 netlify,忘記自己部署有跑過哪些東西。

如果是「部署到 netlify」跟「更新你的 hugo 專案(包含佈景)」應該是兩件事喔:

如果你是要更新你的 hugo 專案 (包含佈景),當你 git push 失敗,拋出你貼那段訊息,你要試著解決的是:「git push 時,遇到 .gitmodules 中沒有包括 path 'themes/hugo-tranquilpeak-theme'」的問題

不過我似乎沒遇過你這問題,你是不是透過以下方式安裝佈景的?

# 在專案目錄底下 ./myblog
git init
git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke

我的做法是直接從 github download 佈景,並且複製到我的 hugo 專案中,或許你可以試試看。

至於「部署到 netlify」,只要你把本地下 hugo 編譯好的 public 資料夾給 git push 到 github,且 netlify 有設定 auto publishing 的話,他就會抓到你的 github repo 有更新,自動更新網站了。

補充一點 不曉得你是不是知道@@
「hugo 專案」與「編譯好的 public repo」是兩個 repository 唷,因為 hugo 專案通常會有草稿還沒寫完,所以 repo 我會設為 private,而 public 那包 repo 就是設為 public。

Hi 你好
我再來補充一下我目前 git repo 存放 hugo 專案的方式,是沒有把布景資料夾裡面東西一併 push 的喔,所以不會有 submodule 的問題,你再參考一下。

alicexdcw iT邦新手 5 級 ‧ 2021-06-16 07:40:17 檢舉

阿~ 不好意思 我沒有分成兩個repo,可以了~~ 謝謝你!!!
不過可以部屬nefily的時候只選public那個資料夾就好了嗎? 所以一般來說比較常分成兩個,另一個只有Public資料夾是嗎?

對於使用 Netlify 的話,你只需要 push public 那包即可,例如

# 先將本次異動編譯成靜態包,產生 public
cd your-hugo-repo && hugo

# 進入靜態包,push 本次更新
cd your-hugo-repo/public && git add . && git commit -m 'update' && git push

而不是在 your-hugo-repogit add /public 的異動去 git push 這樣

alicexdcw iT邦新手 5 級 ‧ 2021-06-21 10:28:06 檢舉

了解~ 謝謝你~

我要留言

立即登入留言