前言

HUGO 是一個快速的靜態網站生成器，可以選擇不同的主題樣板來快速建立個人部落格。最重要的是 HUGO 和 GitHub Pages 都不用錢！這篇文章將帶你一步步建立自己的 HUGO 部落格。

HUGO 簡介

簡單來說，HUGO 可以選擇不同的主題樣板讓你套用，再自行修改裡面的內容，能夠產生靜態網站，並且可以直接架在 GitHub.io、Netlify 等平台。

Hugo 宣稱他們是 The world’s fastest framework for building websites。阿毛本身是用 Mac 作為主要開發環境，使用 Windows 的建置方法可以參照 HUGO 的官網。

安裝 Homebrew

先確認電腦有沒有安裝過 Homebrew。

brew --version

如果沒有安裝過 Homebrew。

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"

安裝的時候會需要等一陣子，裝完後再去查看，最後應該會是這樣子。

==> Installation successful!

==> Homebrew has enabled anonymous aggregate formulae and cask analytics.
Read the analytics documentation (and how to opt-out) here:
  https://docs.brew.sh/Analytics
No analytics data has been sent yet (nor will any be during this install run).

==> Homebrew is run entirely by unpaid volunteers. Please consider donating:
  https://github.com/Homebrew/brew#donations

==> Next steps:
- Run brew help to get started
- Further documentation:
    https://docs.brew.sh

安裝 Hugo

用 Homebrew 下載 HUGO:

brew install hugo

結果應該會是:

==> Summary
🍺  /usr/local/Cellar/hugo/0.102.3: 48 files, 57.5MB
==> Running `brew cleanup hugo`...
Disable this behaviour by setting HOMEBREW_NO_INSTALL_CLEANUP.
Hide these hints with HOMEBREW_NO_ENV_HINTS (see `man brew`).

阿毛以前就下載過 Homebrew,

結果遇到衝突:

fatal: Could not resolve HEAD to a revision
==> Searching for similarly named formulae...
Error: No similarly named formulae found.
Error: No available formula or cask with the name "hugo".
==> Searching for a previously deleted formula (in the last month)...
Error: No previously deleted formula found.
==> Searching taps on GitHub...
Error: No formulae found in taps.

最懶的解決辦法就是解除安裝 Homebrew,

然後再重新安裝一次(注意!!! 刪除 Homebrew 會讓以前下載的 packages 也被刪除)

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/uninstall.sh)"

最後可以確認 HUGO 的版本:

hugo version

會回應:

hugo v0.102.3+extended darwin/amd64 BuildDate=unknown

建立新的網站

建立一個新的網站,

資料夾名稱可以自己調整,

這裡先跟著官方的教學一樣:

hugo new site quickstart

接著就可以在目錄底下找的你的新網站資料夾.

選擇喜歡的主題套用

用主題為 hugo-theme-onelou 為例,

必須先到網站資料夾裡面:

cd quickstart

再來初始化 git:

quickstart % git init

藉由 git 下載主題至 themes 資料夾:

quickstart % git submodule add https://github.com/jyygithub/hugo-theme-onelou.git themes/onelou

在 site configuration 加入 theme(在 config.toml 檔案裡, 新增一行 theme = “onelou”):

quickstart % echo theme = \"onelou\" >> config.toml

調整檔案位置

由於 HUGO Theme 是開源的,

因此每個人的寫作方式都不一樣,

有可能你今天選中的主題,

會跟網站資料夾有重複的地方

例如 quickstart/content & quickstart/themes/onelou/content,

因此我會將其整理移至網站資料夾,

並刪除 quickstart/themes/onelou/content,

也就看個人習慣囉

建立文章

在 /content/posts 資料夾中建立 .md:

quickstart % hugo new posts/my-first-post.md

打開 .md 的話應該會長這樣:

---
title: "2022-09-13"
date: 2022-09-13T10:21:27+08:00
draft: true
---

將 draft 改為 false 就可以將其顯示到網站上囉

draft: truedraft: false
不顯示在網站上顯示在網站上

進行本地端測試

啟動 HUGO 伺服器:

quickstart % hugo server -D

終端機會呈現:

Start building sites …
hugo v0.102.3+extended darwin/amd64 BuildDate=unknown

                   | EN
-------------------+-----
  Pages            | 15
  Paginator pages  |  0
  Non-page files   |  0
  Static files     |  8
  Processed images |  0
  Aliases          |  3
  Sitemaps         |  1
  Cleaned          |  0

Built in 60 ms
Watching for changes in /quickstart/{archetypes,content,data,layouts,static,themes}
Watching for config changes in /quickstart/config.toml, /quickstart/themes/onelou/config.yaml
Environment: "development"
Serving pages from memory
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop

本地端的測試就成功了!!!

總結

透過 HUGO 可以快速建立個人部落格，不需要複雜的後端設定，也不需要資料庫。選擇喜歡的主題，調整設定，就能擁有自己的靜態網站。下一篇文章將介紹如何進一步客製化 HUGO 主題。

參考資料