Install Hugo in Windows

Jacky | Jul 30, 2022 min read

此內容由 Notion 編輯並經由 Notion API 自動轉成 Hugo 頁面
The content write by Notion, and use Notion API convert to Hugo page.

前言

最近看自己之前用 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
comments powered by Disqus