快轉到主要內容

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

資訊科技 Hugo網站架設 Hugo Github Netlify
🗓️ 民國112年 癸卯年
✍ 切換正體/簡體字

「Hugo」是一支Go語言寫成的靜態網站生成器(static site generator),支援Linux/Windows/macOS。使用者可以用Hugo架設個人部落格、程式說明文件,甚至是商業網站。

這篇文章簡介如何在個人電腦用Hugo生成靜態網站,將原始碼提交到Github,並部署至Netlify,完成網站架設。整個過程大致上免費,只有域名需要花錢。

你將會得到一個簡單的個人網站。

1. 使用Hugo架網站的優點
#

撰文當下,這個網站「Ivon的部落格」就是用Hugo生成的,只不過我用的主題不同而已。

我認為Hugo有以下優點:

  1. 靜態網站載入速度快,所有網頁都是單一html檔案,伺服器也不需要負擔太多資源,提昇網站訪客的體驗。

  2. Hugo生成HTML的速度十分之快,幾秒內就能把markdown跟你使用的Hugo主題結合在一起,變成html網頁。即使你有好幾百個markdown檔案,Hugo也能在10秒內完成上百頁html的建置。

  3. Hugo有許多漂亮的主題可以用,且設計上高度模組化,客製化程度高。如果使用者懂一點HTML、CSS、JavaScript,還有Go語言的語法,那麼便可以在下載主題後輕鬆按照自己的意思修改,加入新功能。

  4. Hugo原生支援多語系,方便架設多語言網站。

  5. 每篇Hugo文章都是Markdown檔案,格式一目了然。寫文章有點像在寫程式,不過語法十分簡單。在用Markdown時,使用者不需要費心排版,適合邊寫文章邊引用大量程式碼。部份主題甚至支援插入Mermaid、LaTeX語法。

2. Hugo網站部署流程
#

Hugo僅是負責生成HTML網頁而已,我們還需要一個主機託管商,放置這些HTML檔案給公眾瀏覽。

個人部署Hugo網站的過程:本機寫好文章,使用hugo指令預覽看看沒問題之後,再提交到git儲存庫,推送到Github,再部署到主機託管商,使網站能公開瀏覽,以及被Google搜尋引擎爬取到。

流程如下圖所示:

註:我並沒有強迫你要採用我寫的流程,你可以把Github換成其他Git託管網站,例如 Gitlab sourcehut;也可以用Netlify以外的主機託管商,例如 Cloudflare Pages Github Pages。本文僅是挑選比較容易上手的組合來部署Hugo網站。


為什麼架個網站還要開git儲存庫?這樣做的好處是方便控制網站原始碼版本,且你的網站原始碼掌握在自己手上,可以輕鬆的備份與遷移。

主機託管商我選擇Netlify,理由是Netlify每月提供100GB免費流量,支援自訂域名。且跟Git網站整合得不錯:Netlify會在每次儲存庫有新commit時,自動將你的儲存庫clone過去並用hugo指令生成public目錄再讓網站上線。

此外,Netlify可以從私人的Github儲存庫拉取原始碼來部署網站,不用擔心原始碼被人看光光。

3. 安裝Git、Hugo、文字編輯器
#

3.1. 安裝Git
#

請至 Git官網下載安裝。

3.2. 安裝Hugo
#

Hugo為使用Apache 2.0授權釋出的自由軟體,你可以在 Github取得各大作業系統的安裝檔。Hugo沒有圖形界面,需要使用終端機存取。

GNU/Linux
#

  1. Linux發行版大多有收錄"hugo"套件,透過套件管理員安裝即可
# 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
  1. 如果你的發行版收錄的Hugo版本偏舊,你也可以改到 Github Releases下載最新版二進位檔(選取Hugo_extended版本),直接塞到系統的/usr/bin。這樣還能確保Hugo不會自動更新。
wget https://github.com/gohugoio/hugo/releases/download/v0.121.0/hugo_extended_0.121.0_linux-amd64.tar.gz
tar zxvf hugo*.tar.gz
sudo mv hugo /usr/bin
sudo chmod +x /usr/bin/hugo
  1. 裝好Hugo後開啟終端機,輸入hugo version指令,應會印出目前版本。

Windows
#

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

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

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

macOS
#

  1. 開啟macOS終端機,安裝 Homebrew

  2. 安裝Hugo

brew install hugo
  1. 輸入hugo version指令,應會印出目前版本。

3.3. 安裝文字編輯器
#

因為Hugo網頁都是純文字檔案,基本上只要支援程式碼語法突顯的都可以當編輯器。

輕量的文字編輯器有 KDE Kate

功能豐富的選擇 Visual Studio Code

4. 建立Hugo網站雛型
#

  1. 在任意目錄建立名為mywebsite的資料夾,這就是「Hugo網站根目錄」了,網站原始碼和文章檔案都放在這裡。

  2. 開啟終端機,輸入hugo new指令建立新網站,它會將網站的最小檔案放到mywebsite目錄裡面。

hugo new site mywebsite
  1. 接著進入目錄mywebsite,會看到Hugo為我們產生的網站檔案。

  2. 為了方便日後推送到Github,我們在這個目錄直接初始化Git儲存庫。

cd mywebsite

git init
  1. 這個時候mywebsite下應該會出現.git的隱藏目錄

5. 安裝Hugo主題
#

  1. Hugo官網有很多主題可以選,安裝方式大同小異。這裡我使用 Ananke示範,你可以先試著用簡單主題了解安裝過程,再嘗試安裝更為複雜的主題。

  2. 在Hugo網站根目錄開啟終端機,用git submodule指令將Ananke主題下載到網站根目錄下的themes

git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke
  1. 編輯mywebsite目錄下的hugo.toml檔案

  2. 加入以下內容:

# 使用的主題
theme = "ananke"

# 網站網址,先維持預設
baseURL = "https://example.org/"

# 預設網站語言
languageCode = "zh-TW"

# 網站標題
title = "我的網站"

6. 撰寫第一篇Hugo文章
#

Hugo文章通常是存在content目錄下。

Hugo要新增文章可以選擇在content/posts下新增多個xxx.md的檔案,也可以每篇文章一個資料夾+index.md。本文採用的是後者作法,稱作page bundle,index.md的作用等同index.html,這樣可以方便你整理每篇文章所需的資源。

  1. 使用以下指令,在posts/新增helloworld資料夾,並新增index.md
hugo new posts/helloworld/index.md
  1. 或者,你也可以手動到網站根目錄下的contents/posts/,新增helloworld資料夾,再新增index.md檔案。資料夾名稱helloworld將會成為本篇文章的網址,可自由取名,但裡面的index.md不可更改名稱。

  2. 用文字編輯器開啟index.md檔案

  3. 輸入以下內容。下文---包起來的地方是文章的front matter,即文章屬性。之後開始的Hellow World才是正文。

---
title: "我的第一篇文章"
date: 2023-03-25T17:00:00+08:00
draft: false
---

Hello World
![](https://c.tenor.com/x8v1oNUOmg4AAAAd/rickroll-roll.gif)
  1. Hugo一律以 Markdown語法撰寫文章,可插入HTML、CSS、JavaScript裝飾。

  2. Hugo要插入圖片有很多種方法。上面的例子是把圖片放外部圖床,再直接貼網址,這樣網站儲存庫就只有文字檔案,減少容量。

7. 在本機預覽Hugo網站
#

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

  1. 在Hugo網站根目錄開啟終端機,輸入以下指令啟動網站伺服器:
hugo server -D
  1. 終端機會顯示Web Server is available at,表示網站伺服器已開啟

  2. 開啟瀏覽器,輸入http://localhost:1313就能看到自己的網站樣子。

  3. 如果要停止本機伺服器,在終端機按下CTRL+C。

  4. 另外介紹Hugo好用的功能:網站根目錄一有檔案變更,不用停止伺服器,Hugo也會自動重新生成網站。

  5. 如果僅執行hugo指令就是單純生成html,你可以此評估網站生成速度,網站根目錄下會產生一個public目錄,那就是靜態網站的「成品」。

由於後面我們會將原始碼放到Github,再交給Netlify雲端自動跑hugo指令建置,所以其實本機生成的publicresources目錄是用不到的,請在預覽網站後將其刪除。

8. 將網站原始碼推送到Github
#

  1. 開啟終端機,在你的電腦安裝SSH客戶端。參照 本文說明,新增存取Github帳號的金鑰到電腦上

  2. Github新開一個儲存庫,名字隨便取。將其設為私人(private),什麼檔案都不要加,README也不要有。

  3. 點選複製儲存庫頂部顯示的HTTPS儲存庫網址,應為https://github.com/帳號名稱/儲存庫名稱.git

  4. 切換到剛剛做好的mywebiste目錄

cd mywebsite
  1. 將遠端Git儲存庫設定為剛剛建立的新Github儲存庫網址
git remote add origin "網址"
  1. 執行以下指令,將網站根目錄下的全部檔案推送至Github儲存庫:
git add -A
git commit -m "網站更新"
git push -u origin main

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

  1. 在Hugo網站根目錄新增一個netlify.toml檔案,填入以下內容。此檔案的用意是在告訴Netlify要部署哪個網站目錄。
# 部署時執行的指令,--minify壓縮HTML,--gc自動在建置後刪除快取檔案
[build]
  publish = "public"
  command = "hugo --gc --minify"

# 指定Hugo版本,應與本機安裝的Hugo版本一致
[build.environment]
  HUGO_VERSION = "0.121.1"
  1. Netlify官網,以Github帳號登入。

  2. 在Netlify後台,點選Add a siteImport an existing project from a Git repository

  3. 選擇Github的mywebsite儲存庫,設定好之後Netlify就會自動部署過去。每次只要Github儲存庫有新的commit,Netlify便會自動將儲存庫clone,在線上用hugo指令生成public目錄並自動讓網站上線。

  4. 在網站後台點選Site Settings,將Netlify指派給你的網域改成你喜歡的名字。

  5. 至此你的簡單網站便架設完成了…一半。Netlify網站會有固定的netlify.app當網址,我建議你如果要長期經營網站,應該給自己買個域名。

8. 將Netlify的Hugo網站連結到你的域名
#

購買一個域名,例如GoDaddy、Cloudflare、Gandhi等網站

  1. 編輯Hugo網站根目錄的config.toml,將baseURL後面的網址改成https://你購買的域名

  2. 到Netlify後台,點選Site Settings → Domains management → Domains,按Add a Domain

  3. 填入購買的域名

  4. 點選Edit Netlify DNS

  5. 跳過Add DNS Records

  6. 然後將出現的這四組Netlify名稱伺服器記下

  7. 到你的域名託管商提供的管理後台,例如我是GoDaddy,點選編輯網域 → 編輯DNS → 名稱伺服器,新增Netlify提供的名稱伺服器

  8. 等個幾分鐘,此域名應該就會連到Netlify部署的網站了。這樣日後就可以打你買的網域來開啟網站,而不用使用netlify.app的網址。

  9. 要增加網站曝光度,除了研究SEO優化、多在社群媒體分享自己的網站外,你也可以把網站提交到 Google Search Console,增加被搜尋引擎收錄的機會。

9. 撰寫快捷部署網站指令稿
#

以後撰寫文章的流程就是在網站根目錄/contents/posts/新增Markdown檔案,再推送到Gitbub儲存庫,Netlify就會自動建置了。

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

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

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

10. 延伸閱讀
#

要添加更多功能、了解Hugo底層生成網頁的機制,請參閱 Hugo官方說明文件

你也可以到 HUGO discourse請求社群成員的幫助。

研究 別人的Hugo主題了解Hugo功能也是不錯的學習方式!

相關文章

為什麼我要用Disqus取代Giscus當作Hugo留言板
資訊科技 Hugo網站架設 Hugo Github
如何給Hugo + Netlify的網站加上Gitalk留言板
資訊科技 Hugo網站架設 Github Netlify
調整Hugo的permalinks,讓不同目錄下的頁面產生同一個網址
資訊科技 Hugo網站架設 Hugo

留言板

此處提供二種留言板。點選按鈕,選擇您覺得方便的留言板。要討論程式碼請用Giscus,匿名討論請用Disqus。

這是Giscus留言板,需要Github帳號才能留言。支援markdown語法,若要上傳圖片請貼Imgur連結。您的留言會在Github Discussions向所有人公開。

這是Disqus留言板,您可能會看到Disqus強制投放的廣告。有時留言可能會被系統判定需審核,導致延遲顯示,請見諒。