2021最新 Hugo 部署 Netlify 教學(下) – 網站部署及域名綁定

最後更新於 2021 年 10 月 3 日

上一節已經把 Hugo 安裝和主題下載的部分說完了,這節就來說如何部署網站內容,讓其他人能夠瀏覽。

將網站內容上傳到 Github

首先我們需要註冊一個 Github 帳號,然後創建一個 repo,名稱自取,可以設為 private。

https://i.imgur.com/qycE7oh.png

在網站根目錄底下新增 netlify.toml ,貼上以下內容:(請注意修改 Hugo 版本號)

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

[build.environment]
  HUGO_VERSION = "0.85.0"

接著在網站目錄底下輸入指令,將網站內容 build 後 push 到 Github :

hugo -D
git init
git remote add origin 你的倉庫地址
git add -A
git commit -m "log"
git push -u origin master

push到 github 上後確認一下倉庫裡是否有東西。

https://i.imgur.com/lokRg2B.png

部署到 Netlify

註冊一個 Netlify 帳號,創建一個 site

https://i.imgur.com/73SFvan.png

選擇 Github,然後選擇存放網站的 repo,其他設定都不需要修改,直接部署。

https://i.imgur.com/t6v9dQE.png
https://i.imgur.com/vMutnOk.png
https://i.imgur.com/WMWhBKj.png
https://i.imgur.com/uHV0CGZ.png

這邊是 netlify 自動讀取你網站根目錄裡面 netlify.toml 檔案的內容,因此不需要去修改:

https://i.imgur.com/K5IOqnj.png

成功後就能看見網址變成綠色的了:

https://i.imgur.com/4ca9ko8.png

一旦將 Github 與 Netlify 連結,在未來只要 push 網站到 Github 就會同步部署到 Netlify。

綁定域名

首先你需要先準備好一個域名(也可以使用 freenom 提供的免費域名)。

在 netlify 後台找到 Site settings -> Domain management :

https://i.imgur.com/AJOFaGo.png

點擊 Add Custom domain

https://i.imgur.com/ywK3PdN.png

輸入域名,然後按 Yes,add domain

https://i.imgur.com/fafFtgy.png
https://i.imgur.com/ved2fxc.png

在剛剛新增的域名旁邊找到 Check DNS configuration

https://i.imgur.com/62z1Aac.png

將 netlify 提供的 DNS 填到域名商後台新增記錄:

【A 記錄】

https://i.imgur.com/sNMXh7A.png

【CNAME】

https://i.imgur.com/4kEtctE.png
https://i.imgur.com/Dbdkh3O.png

等待 5~10 分鐘 DNS 解析完畢後,就可以使用註冊的域名瀏覽網站了。

https://i.imgur.com/e0JMjGU.png
https://i.imgur.com/HL8yWTz.png

使用 HTTPS

netlify 提供免費的 HTTPS,包括自動證書創建和更新,證書使用的是 TLS 協議。

在 netlify 後台 Site settings -> Domain management -> HTTPS,按下 Verify DNS configuration 後等待一會 netlify 驗證你的域名是否已經綁定。

https://i.imgur.com/y8lmu0I.png
https://i.imgur.com/2ts2JMC.png

驗證完畢,現在你的網站就會有小鎖頭啦!

https://i.imgur.com/4dbkAzC.png

完事!

0 0 評分數
Article Rating
訂閱
通知
guest

0 Comments
在線反饋
查看所有評論