HUGO

  • 前往 HUGO 官網

簡單來說,

HUGO 可以選擇不同的主題樣板讓你套用,

再自行修改裡面的內容,

能夠產生 靜態網站,

並且可以直接架在 GitHub.io 、 Netlify 等…

為了成為軟體工程師,

懶惰 & cost down 是不可或缺的特質,

Hugo 宣稱他們是 The world’s fastest framework for building websites,

最重要的是 HUGO & GitHub Pages 都 不用錢!!!

阿毛本身是用 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

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

參考