使用Hugo + Github + Netlify免費架設靜態網站教學

這篇文章主要簡介在個人電腦用Hugo生成靜態網站，將原始碼提交到Github，並部署至Netlify操作方法，完全免費。

你將會得到一個簡單的個人網站，購買獨立網域不在本篇的討論範圍。

本文假定讀者已知道如何在Github新增儲存庫，還有如何使用Git的指令，以及Markdown的語法。

0. 為何選擇Hugo ＋ Github ＋ Netlify的方案

這個網站「Ivon的部落格」就是用Hugo生成的。

要架設網站可以考慮採用此方案：寫好文章，推送至Github儲存庫，之後再部署網站至主機供應商。這樣做的好處是網站原始碼掌握在自己手上，並且若能引入Git版本控制的話，網站開發原始碼亦比較方便。

“Hugo"是一支Go語言寫的靜態網站生成工具，支援Linux/Windows/MacOS。Hugo寫文章使用Markdown語法，使用者不需要費心排版，也適合邊寫文章邊引用大量程式碼。部份主題甚至支援插入Mermaid、LaTeX語法。

寫好文章後執行Hugo程式，就會自動產生含有首頁和文章頁面的HTML檔案，下一步要做的就是將HTML檔案放到某個雲端主機。

根據Hugo官網推薦的列表，能免費託管靜態網站的主機供應商有Github Pages和Netlify，我選擇Netlify，因每月流量限制100GB，夠給小型網站用了。

但是我們可以先將原始碼提交到Github儲存庫，再自動部署至Netlify。這樣的好處是網站原始碼能以私人儲存庫放在Github備份，Netlify那邊也會自動部署新文章。

備份整個網站原始碼到Github的好處是不怕本機檔案毀損，且如果熟悉使用git push和git pull指令的話，你甚至可以在多台電腦撰寫文章並即時更新。

1. 安裝Hugo

Hugo是沒有圖形界面的，需要使用終端機存取。

Hugo的Github有提供各大作業系統的安裝檔。

1.1. Linux

Linux發行版大多有收錄"hugo"套件，透過套件管理員安裝即可，但非滾動發行版需注意版本不要太舊，並至Github確認是否為最新版。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
# Debian/Ubuntu
sudo apt install hugo

# Fedora/ RHEL /CentOS
sudo dnf install hugo

# openSUSE
sudo zypper install hugo

# Arch Linux / Manjaro
sudo pacman -S hugo

裝好後開啟終端機，輸入hugo version指令，應會印出目前版本。

1
hugo v0.111.3+extended linux/amd64 BuildDate=unknown

1.2. Windows

至Hugo的Github下載最新版的hugo_extended_windows-amd64.zip，解壓縮，在C:\Program Files\新增hugo資料夾，將hugo.exe放進去。

接著設定環境變數，新增hugo，指向C:\Program Files\hugo\hugo.exe位置，才能透過終端機執行。

開啟Windows終端機，輸入hugo version指令，應會印出目前版本。

1
hugo v0.111.3+extended windows/amd64 BuildDate=unknown

2. 建立網站雛型

於Github新開一個儲存庫，設為私人(private)。
開啟終端機，將該儲存庫clone到電腦上，這個就是網站根目錄，放置網頁原始碼與正式網頁的地方。

`1`	`git clone [email protected]:ivon852/mywebsite.git`

輸入Hugo指令建立新網站。它會將網站的必要檔案放到剛剛clone下來的儲存庫mywebsite目錄。

1
hugo new site mywebsite --force

接著進入目錄mywebsite，會看到Hugo為我們產生的網站檔案。

3. 安裝Hugo主題

Hugo官網有很多主題可以選，官方文件示範的主題為"Ananke”。主題可以用git submodule加入:

1
2
cd mywebsite
git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke

編輯mywebsite目錄下的config.toml檔案，加入以下內容：

1
2
3
4
theme = "ananke"
baseURL = "https://example.org/"
languageCode = "zh-TW"
title = "我的網站"

4. 撰寫第一篇文章

使用以下指令建立新文章，一律是.md結尾。或者手動在網站根目錄下的/contents/posts新增.md檔案也可以。

1
hugo new posts/helloworld.md

開啟helloworld.md檔案，輸入以下內容。下文---包起來的地方是文章的frontmatter，之後開始的Hellow World才是正文。Hugo一律以Markdown語法撰寫文章，可插入HTML作為裝飾。另外圖片可以放Imgur這類的圖床，這樣網站就只有文字檔案，減少容量。

1
2
3
4
5
6
7
8
---
title: "我的第一篇文章"
date: 2023-03-25T17:00:00+08:00
draft: false
---

Hello World
![](https://c.tenor.com/x8v1oNUOmg4AAAAd/rickroll-roll.gif)

再來於網站目錄新增一個netlify.toml，此檔案的用意是在告訴Netlify要部署哪個網站目錄。

1
2
3
4
5
6
7
8
# 部署時執行的指令
[build]
  publish = "public"
  command = "hugo --gc --minify"

# 指定Hugo版本，應與本機安裝的Hugo版本一致
[build.environment]
  HUGO_VERSION = "0.111.3"

5. 在本機預覽網站

此步驟的意義在於讓Hugo生成靜態網站並於自己的電腦預覽，還沒有要推送到網路上。

在網站目錄開啟終端機，輸入以下指令生成網站：

1
hugo server -D

終端機會顯示Web Server is available at，表示網站伺服器已開啟，之後網站根目錄下會產生一個public目錄，那就是靜態網站的「成品」。
開啟瀏覽器，輸入http://localhost:1313就能看到自己的網站樣子。
如果要停止本機伺服器，在終端機按下CTRL+C。

另外介紹Hugo好用的功能：網站根目錄一有檔案變更，不用關閉伺服器，Hugo也會自動重新生成網站。

6. 將網站原始碼推送到Github

執行以下指令，將網站根目錄下的全部檔案推送至Github儲存庫:

1
2
3
git add -A
git commit -m "網站更新"
git push

由於下一節我們會將Github與Netlify連結，Netlify會在每次儲存庫有新commit時，自動將你的儲存庫clone過去並用hugo指令生成public目錄再讓網站上線。

所以其實本機生成的public和resources目錄是用不到的，可在本機預覽網站後將其刪除。

7. 將Github與Netlify連結設定自動部署

到Netlify官網，以Github帳號登入。
在Netlify後台，點選Add a site → Import an existing project from a Git repository
選擇Github的mywebsite儲存庫，設定好之後Netlify就會自動部署過去。每次只要Github儲存庫有新的commit，Netlify便會自動將儲存庫clone，在線上用hugo指令生成public目錄並自動讓網站上線。
在網站後台點選Site Settings，將Netlify指派給你的網域改成你喜歡的名字。但因為沒有購買網域，網址中的netlify.app是不能去掉的。
至此你的簡單網站便架設完成了，要添加更多功能，請自行參閱Hugo官方說明文件吧。

8. 撰寫快捷部署script

以後撰寫文章的流程就是在網站根目錄/contents/posts/新增Markdown檔案，並按照上述第4節的語法規則撰寫內容，再推送到Gitbub儲存庫。

而我為了加快部署程序，故在網站根目錄寫了一個整合全部程序的快捷指令稿deploy_n.sh:

1
2
3
4
git add -A
git commit -m "網站更新"
git push
echo -e "\e[93mDeployed to Netlify.\e[0m"

這樣我一寫完新文章，只要在網站根目錄執行./deploy_n.sh指令稿就可以完成推送網站程式碼到Github的操作。

9. 給Netlify網站新增自訂域名

購買一個域名，例如跟GoDaddy或Google買。

編輯網站根目錄的config.toml，將baseURL後面的網址改成https://你購買的域名。
到Netlify，點選Site Settings → Domains management → Domains，按Add a Domain

填入購買的域名

點選Edit Netlify DNS

跳過Add DNS Records

然後將出現的這四組Netlify名稱伺服器記下
到GoDaddy後台 → 編輯網域 → 編輯DNS → 名稱伺服器，新增Netlify提供的名稱伺服器
等個幾分鐘，此域名應該就會連到Netlify部署的網站了。這樣日後就可以打你買的網域來開啟網站，而不用使用netlify.app的網址。

使用Hugo + Github + Netlify免費架設靜態網站教學

留言板