Back
Hugo

Hugo使用教學(1)

原由

這幾天研究從 Medium 轉成自己架 Blog

為了避免下一個人架設過程中一頭霧水(實質是為了推別人入坑)

故撰寫此筆記

不繼續使用 Medium 的原因

大部分工程師都喜歡喜歡用 Markdown 進行文件撰寫(包含我在內)

但 Medium 是不支援的(有工具可以透過 MarkDown 轉成 Medium 文章)

因此建議如果是想先養成撰寫 Blog 的習慣的話

可以從 Medium 下手 但長期喜歡用 Markdown 撰寫的話

強烈推薦自己架一個 Blog

安裝Hugo

Windows

透過 Chocolatey 安裝

choco install hugo-extended -confirm

Mac

brew install hugo

檢查安裝是否完成

透過查詢 Hugo 版本來進行確認是否安裝完成

hugo version

Version
Version

建立新網頁

hugo new site <'SiteName'>

NewSite
NewSite

hugo 建立新網頁真的快

執行 Hugo Server

hugo server

這時候開起來會是一片空白 這是正常的

是因為現在實際上甚麼都沒有

等套用了 Theme 就會正常了

套用 Theme

這裡我採用了 Stack 來進行

先建立 Git 並初始化

git init
git add .
git commit -m "Init"

透過 Submodule 的方式載入

git submodule add https://github.com/CaiJimmy/hugo-theme-stack/ themes/hugo-theme-stack

偷懶一點直接複製 Theme 裡面的 Config 來做使用

themes\hugo-theme-stack\exampleSite\config.yaml

  1. 複製到我們網站的目錄下

  2. 刪除 config.toml

  3. 並在檔案開頭加上一些屬性

baseURL: 'http://example.org/'
languageCode: 'en-us'
title: 'Demo' # 你的網站名稱
theme: 'hugo-theme-stack'
module:
    hugoVersion:
        extended: true
        min: "0.87.0"
params:
    mainSections:
        - post
    featuredImageField: image
    rssFullContent: true

這樣就套用上主題了

Sample
Sample

建立新頁面

透過 CLI 來建立一個新的文章

hugo new post/<'newPageName'>.md

建立完成後應該還是看不到

因為建立文章預設會將文章設定成草稿

有兩種方式可以呈現

  1. 在啟動 Hugo Server 的時候追加屬性
hugo server -D
  1. 將文章屬性下的 Draft 改為 false
---
title: "Test"
date: 2021-10-29T01:11:07+08:00
draft: false
---

這樣就是建立一個新文章的流程了

這裡留個伏筆

下一篇再來補關於Search、Archives為什麼不見了