本文更新日期: 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 作業系統

sudo pacman -S git hugo

 其它作業系統,可參閱 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 選單