前言
最近看自己之前用 Bootstrap 做的 Github Page 實在難看,決定來研究大家常常使用的靜態網站產生器 (Static Site Generator),到底有多好用。講到網站生成器,最常被提到的大概就是 JeckyII、Hexo、Hugo 等工具,也有人做了評比,來比較不同產生器的優劣。目前看下來最方便功能又齊全的應該是 Hugo,基本上架設部落格所需要的功能,Hugo 開發文檔都有寫,所以最後決定直接使用 Hugo。
Hugo 已經被封成二進制的執行檔,因此只需要設置環境變數即可完成環境配置,而實際使用 Hugo 進行建構時,產生靜態檔案速度也很快,光是安裝、速度這兩點就讓我決定直接使用 Hugo 了。
我自己通常習慣用 Markdown 語法作筆記,就連現在用 Wordpress 寫部落格也是用 MD 編輯器去寫,也因為自己平常有使用 Notion 關係,所以對於用 Hugo 寫作其實沒啥障礙。
Hugo 相關文章很多,技術生態也很成熟,所以這邊也不介紹,直接介紹我的安裝過程跟使用的主題。
安裝 Hugo
下載:Releases · gohugoio/hugo (github.com)
-
下載並解壓縮 Hugo Windows-64bit (當時版本為 0.97.3)
-
我的路徑是 C:\SDK\hugo (可以照個人習慣決定位置)
-
將路徑設為”環境變數”
-
開啟 CMD 輸入
hugo version
確認是否可以出現版本資訊
主題:Hugo Profile
需要使用 CMD 輸入指令。
Hugo Profile | Hugo Themes (gohugo.io)
hugo new site my-site -f=yaml
cd my-site
cd themes
git clone https://github.com/gurusabarish/hugo-profile.git
設定 config.yaml 範例
hugo-profile/config.yaml at master · gurusabarish/hugo-profile (github.com)
預設文章
my-site\archetypes\default.md
---
title: "{{ replace .Name "-" " " | title }}"
date: {{ .Date }}
draft: true
author:
tags:
image:
description:
toc:
---
使用 Google Analytics
Internal Templates | Hugo (gohugo.io)
使用 Google Analytics v4 必須呼叫 _internal/google_analytics.html
Hugo 指令
確認版本
hugo version
建立網站
hugo new site {FolderName}
加入新檔案
hugo new {ContentPath}
開啟本地預覽
hugo server