手把手打造你的專屬部落格之一 — Hugo 建立本地網站

前言

在《為什麼要有自己的部落格？》中交代了建部落格的原因，想必你各位點進來就是做好建立部落格的覺悟了！

那就讓我們開始吧～

為什麼選 Hugo

既然官網都說他是全世界最快的框架，捨他其誰？

The world’s fastest framework for building websites

完全免費的 open-source Go 專案。

身為一個 Gopher 當然就要支持一下呀，說不定之後用一用覺得哪裡可以優化，還有機會可以貢獻一下。

用 Hugo 在本地建立網站

1. 安裝 Hugo

身為 macOS 使用者，這邊就用 homebrew 安裝

打開終端機 Terminal command + space
終端機輸入（以下皆為終端機輸入）
```
brew install hugo
```
其他安裝方式可以參考這裡

2. 安裝 Git

一樣打開終端機用 homebrew 安裝
```
brew install git
```
其他安裝方式可以參考這裡

3. 建立網頁

建立網頁
```
hugo new site <你的網站名稱>
```

這邊以 cyanSky 為例，你會看到 cyanSky 資料夾，架構如下

cyanSky
├── archetypes
│   └── default.md
├── assets
├── content
├── data
├── hugo.toml
├── i18n
├── layouts
├── static
└── themes

8 directories, 2 files

進入資料夾啟動 git

cd cyanSky # 把 cyanSky 改成 <你的網站名稱>
git init

套上 PaperMod 的 Hugo Theme （網頁主題）

git submodule add --depth=1 https://github.com/adityatelange/hugo-PaperMod.git themes/PaperMod

把 PaperMod 主題加入 hugo.toml 檔案
```
echo "theme = 'PaperMod'" >> hugo.toml
```
啟動網頁
```
hugo server
```
打開網址 http://localhost:1313/
登愣！恭喜你的本地網頁跑起來拉～
如果要關掉，就回到執行 hugo server 的地方按下 Ctrl+C 即可

4. 建立內容

建立內容

hugo new content content/posts/my-first-post.md

會看到在 contents 底下多了一個 posts 資料夾，資料夾內有 my-first-post.md 檔案

.
├── archetypes
│   └── default.md
├── assets
├── content
│   └── posts
│       └── my-first-post.md --> 剛創建的檔案
├── data
├── hugo.toml

用你的編輯器(VSCode)打開 my-first-post.md 會看到以下內容

+++
title = 'My First Post'
date = 2024-01-14T07:07:07+01:00
draft = true
+++

接著可以在 +++ 底下開始用 markdown 語法輸入內容

+++
date = '2024-12-29T14:02:12+08:00'
draft = true
title = 'My First Post'
+++

This is **bold** text, and this is _emphasized_ text.

Visit the [Hugo](https://gohugo.io) website!

再 run 一次你的網站
這次要加上 -D 參數，這樣才會把 front matter 設定 draft=true 的文章也一併顯示出來，有興趣可以參考官網文件 command line flags
```
hugo server -D
```
登愣～恭喜你的第一篇文章就出來拉 🎉

5. 客製化你的網頁成自己喜歡的樣子 ⭐

這超重要拉～東西很多很雜，慢慢調整成你們自己喜歡的樣子吧！

刪掉 hugo.toml 這能調整的東西太少惹

新增 config.yaml 這份文件是從 PaperMod 的範例來的

config.yaml

baseURL: "https://examplesite.com/"
title: ExampleSite
paginate: 5
theme: PaperMod

enableRobotsTXT: true
buildDrafts: false
buildFuture: false
buildExpired: false

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: "January 2, 2006"
  defaultTheme: auto # dark, light
  disableThemeToggle: false

  ShowReadingTime: true
  ShowShareButtons: true
  ShowPostNavLinks: true
  ShowBreadCrumbs: true
  ShowCodeCopyButtons: false
  ShowWordCount: true
  ShowRssButtonInSectionTermList: true
  UseHugoToc: true
  disableSpecial1stPost: false
  disableScrollToTop: false
  comments: false
  hidemeta: false
  hideSummary: false
  showtoc: false
  tocopen: false

  assets:
    # 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: x
      url: "https://x.com/"
    - name: stackoverflow
      url: "https://stackoverflow.com"
    - name: github
      url: "https://github.com/"

  analytics:
    google:
      SiteVerificationTag: "XYZabc"
    bing:
      SiteVerificationTag: "XYZabc"
    yandex:
      SiteVerificationTag: "XYZabc"

  cover:
    hidden: true # hide everywhere but not in structured data
    hiddenInList: true # hide on list pages and home
    hiddenInSingle: true # hide on single page

  editPost:
    URL: "https://github.com/<path_to_repo>/content"
    Text: "Suggest Changes" # edit text
    appendFilePath: true # to append file path to Edit link

  # for search
  # https://fusejs.io/api/options.html
  fuseOpts:
    isCaseSensitive: false
    shouldSort: true
    location: 0
    distance: 1000
    threshold: 0.4
    minMatchCharLength: 0
    limit: 10 # refer: https://www.fusejs.io/api/methods.html#search
    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
pygmentsUseClasses: true
markup:
  highlight:
    noClasses: false
    # anchorLineNos: true
    # codeFences: true
    # guessSyntax: true
    # lineNos: true
    # style: monokai

換完後網頁瞬間變了一個樣

PaperMod 有三種模式：
我們就還換看看 Profile Mode
打開 config.yaml，找到
```
profileMode:
  enabled: false
```
把 false 改成 true
然後你又會再次驚艷

後面還有很多可以調整，這邊就不贅述，留給你們慢慢玩

接著來看看，怎麼把網頁伺服器，從地端送上雲端《手把手打造你的專屬部落格之二 — Hugo 網站上雲伺服器 CloudFlare Pages》或《手把手打造你的專屬部落格番外篇 — Hugo 網站上雲伺服器 Netlify vs CloudFlare》

前言#

為什麼選 Hugo#

用 Hugo 在本地建立網站#

1. 安裝 Hugo#

2. 安裝 Git#

3. 建立網頁#

4. 建立內容#

5. 客製化你的網頁成自己喜歡的樣子 ⭐#

Reference#

前言