本文更新日期: 2023-11-01
Hugo特色#
Hugo 是用 Go 編寫的靜態網站生成器,一般只需幾秒鐘就能生成一個網站,被稱為「世界上最快的網站構建框架」,也使 Hugo 大受歡迎,成為最熱門的靜態網站生成器之一,被廣泛採用。
啟動 hugo server 後,寫文章時,網頁瀏覽器就能即時反應成果,不用(重新載入頁面) 。
一系列的 PaperMod主題設置,是作者的回憶錄
Windows 作業系統,建立D:\App資料夾
安裝Git Bash
前往Hugo的GitHub下載
hugo_extended_0.118.2_windows-amd64.zip (作者下載時的版本),若看不到 hugo_extended_0.xxx.x_windows-amd64.zip, 按 Show all 23 assets。
解壓縮後,如同wget安裝,將hugo.exe移至 D:\App\PortableGit\usr\bin
Arch Linux 作業系統
其它作業系統,可參閱 Installation | Hugo
建立網站與安裝主題#
參考自 Hugo-Quick Start及PaperMod-Installation
建立 D:\MyData 資料夾,勿存放資料於 D:\App\PortableGit 內。於 git-bash 貼上cd "D:\MyData"
建立資料夾網站 blog,於 git-bash 貼上hugo new site blog
以檔案總管觀察,blog資料夾內有8個子資料夾及hugo.toml,8個子資料夾只有archetypes內有default.md,其它7個空無一物。default.md及hugo.toml內容很少,正等待修改。空資料夾,正待補充!
於 git-bash 貼上cd blog
可於 Notepad++ 記下cd "D:\MyData\blog"
,下次啟動git-bash時貼上
安裝PaperMod主題
於 git-bash 貼上
git clone https://github.com/adityatelange/hugo-PaperMod themes/PaperMod --depth=1
刪除 hugo.toml
將代碼(修改自PaperMod-Sample config.yml 及 PaperMod-exampleSite config.yml)存至 D:\MyData\blog\config.yml,詳細資料可參閱 Configure Hugo
第1行baseURL: "https://examplesite.com/"
改為你的
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
|
baseURL: "https://examplesite.com/"
title: ExampleSite
defaultContentLanguage: zh-tw
paginate: 5 # 每頁顯示的文章數
theme: PaperMod
enableInlineShortcodes: true
enableRobotsTXT: true # 是否生成 robots.txt 檔案
buildDrafts: false
buildFuture: false
buildExpired: false
enableEmoji: true
pygmentsUseClasses: true
#googleAnalytics: UA-123-45
minify:
disableXML: true
#minifyOutput: true
params:
env: production # to enable google analytics, opengraph, twitter-cards and schema.
title: ExampleSite
description: "ExampleSite description"
keywords: [Blog, Portfolio, PaperMod]
author: Me
# author: ["Me", "You"] # multiple authors
images: ["<link or path of image for opengraph, twitter-cards>"]
DateFormat: "2006-01-02"
defaultTheme: auto # dark, light
#disableThemeToggle: true
ShowReadingTime: true
ShowShareButtons: true # 顯示分享文章按鈕
ShowPostNavLinks: true
ShowBreadCrumbs: true # 於頂部顯示文章路徑
ShowCodeCopyButtons: true # 顯示代碼複製按鈕
ShowWordCount: true
ShowRssButtonInSectionTermList: true
UseHugoToc: true
#disableSpecial1stPost: true
displayFullLangName: true
disableScrollToTop: false
#comments: false # 評論
hidemeta: false # 是否隱藏文章發布日期、作者...
hideSummary: false
showtoc: true # 是否顯示目錄
tocopen: true # 是否打開目錄
assets:
disableHLJS: true
# disableHLJS: true # to disable highlight.js
# disableFingerprinting: true
favicon: "<link / abs url>"
favicon16x16: "<link / abs url>"
favicon32x32: "<link / abs url>"
apple_touch_icon: "<link / abs url>"
safari_pinned_tab: "<link / abs url>"
label:
text: "Home"
icon: /apple-touch-icon.png
iconHeight: 35
# profile-mode
profileMode:
enabled: false # needs to be explicitly set
title: ExampleSite
subtitle: "This is subtitle"
imageUrl: "<img location>"
imageWidth: 120
imageHeight: 120
imageTitle: my image
buttons:
- name: Posts
url: posts
- name: Tags
url: tags
# home-info mode
homeInfoParams:
Title: "Hi there \U0001F44B"
Content: Welcome to my blog
socialIcons:
- name: twitter
url: "https://twitter.com/"
- name: email
url: "mailto:"
- name: github
url: "https://github.com/"
#analytics:
# google:
# SiteVerificationTag: "XYZabc"
cover:
hidden: true # hide everywhere but not in structured data
hiddenInList: true # hide on list pages and home
hiddenInSingle: false # hide on single page
# for search
# https://fusejs.io/api/options.html
#fuseOpts:
#isCaseSensitive: false
#shouldSort: true
#location: 0
#distance: 1000
#threshold: 0.4
#minMatchCharLength: 0
#keys: ["title", "permalink", "summary", "content"]
menu:
main:
- identifier: categories
name: categories
url: /categories/
weight: 10
- identifier: tags
name: tags
url: /tags/
weight: 20
- identifier: example
name: example.org
url: https://example.org
weight: 30
# Read: https://github.com/adityatelange/hugo-PaperMod/wiki/FAQs#using-hugos-syntax-highlighter-chroma
markup:
goldmark:
renderer:
unsafe: true
highlight:
noClasses: false
# anchorLineNos: true
# codeFences: true
# guessSyntax: true
# lineNos: true
# style: monokai
|
建立文章#
建立文章可參閱 写文章 的詳盡解釋
於 git-bash 貼上hugo new "posts/Hello World.md"
編輯 \content\posts\Hello World.md (省略了D:\MyData\blog),增加兩行
Hello World!
![](https://image.myanimelist.net/ui/BQM6jEZ-UJLgGUuvrNkYUHU1vZBDZ-VTzDhDozp-dH4brc97bzEKibhYrRXD3jZj2Xz-1yT9pOx1fs0V7vHAHQ#center)
本地主機預覽網站#
於 git-bash 貼上hugo server -D
開啟瀏覽器,網址貼上 localhost:1313
可於 git-bash 按 Ctrl+C 停止 hugo server
生成靜態網站#
生成靜態網頁於public資料夾內。列出常用的生成方法,參考自 Draft, future, and expired content及启动博客
於 git-bash 貼上hugo
生成方式只會往public資料夾裡添加內容,但是不會刪除外部已經不存在而public裡面還存在的檔案,不含草稿文章
於 git-bash 貼上hugo -D
生成方式包含草稿文章
於 git-bash 貼上hugo -F --cleanDestinationDir
生成的public都是全新的,會覆蓋原來的
上傳到 GitHub Pages#
先完成GitHub SSH 連線
前往 https://github.com/new 建立 GitHub Repository
Repository name 一定要填入 your-username.github.io,例如作者的 username 是 diy99,則建立資源庫名稱就要使用 diy99.github.io,設為Public
按 Create repository
於 git-bash 逐行執行下列指令,詳細解釋可參閱 部署 - GitHub Pages
diy99/diy99.github.io.git 改為你的
push 時遇到 LF will be replaced by CRLF in ******,可參閱 可能遇到的问题
1
2
3
4
5
6
7
8
|
cd public
git init
git remote add origin git@github.com:diy99/diy99.github.io.git
git add .
git commit -m 'Initial'
git branch -M main
git push -u origin main
cd ..
|
將指令執行過程存為 D:\MyData\blog\publish.sh,有些指令已執行過,所以使用 # 註解,以後只要 sh publish.sh 即可(Windows 作業系統不用 chmod +x publish.sh)
1
2
3
4
5
6
7
8
9
10
11
12
13
|
#!/bin/bash
# Linux: chmod +x publish.sh
# sh publish.sh
hugo
cd public
#git init
#git remote add origin git@github.com:your-username/your-username.github.io.git
git add .
git commit -m 'Update'
#git branch -M main
#git push -u origin main
git push
cd ..
|
瀏覽 https://your-username.github.io
文章的 Front Matter#
本段內容參考資料
貼身打造個人部落格 - 02. 文章 Front Matter
PaperMod-Sample Page.md
写文章
PaperMod 主題
| 小M平碎碎念
Front matter | Hugo
Front Matter 指的是: 每篇文章檔案內容中,放在最前面那塊以---
分隔的內容。
建立新文章(hugo new “posts/My First Post.md”)時,Hugo會從 \archetypes (省略了D:\MyData\blog) 複製模板 default.md 新建文章
將底下代碼取代 \archetypes\default.md 的內容
實際上,新建文章時,你可能要小部分更改
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
---
title: '{{ replace .File.ContentBaseName "-" " " | title }}'
date: {{ .Date }}
draft: false # 文章草稿狀態
summary: "" # 首頁顯示的文字總結段落
categories: ["分類1", "分類2"]
tags: ["標籤1", "標籤2"]
#author: ["Author"]
#keywords: [Blog, PaperMod] # 標示文章的關鍵字
description: "" #描述
weight: # 輸入1可以置頂文章,不填就按時間
isCJKLanguage: true # 是否是中文(chinese,japanese,korea) 字數判斷用
comments: false #是否展示評論
showToc: true # 顯示目錄
TocOpen: false # 自動打開目錄
UseHugoToc: true
hidemeta: false # 是否隱藏發布日期、作者
disableShare: false # 取消社群分享文章欄
showbreadcrumbs: true # 於頂部顯示文章路徑
ShowWordCounts: true
ShowReadingTime: true
cover:
image: "" # 封面圖片路徑
alt: "<alt text>" # alt text
caption: "" # 封面圖片描述
relative: false # when using page bundles set this to true
hidden: false # only hide on current single page
---
|
作者在 config.yml 設置 author: [“Jang”] ,所以網站文章預設作者是 Jang,本篇文章的 Front Matter 設置 author: [“Shakespeare”] ,所以…😊
以 Notepad++ 記下
cd "D:\MyData\blog"
hugo new "posts/Hello World.md"
hugo server -D
localhost:1313
Git Bash 可以使用方向鍵 存取先前輸入的指令
待續…,務必要參閱 PaperMod 選單