Hugo 是一個快速強大的靜態網頁框架,由 Go 語言所寫成的。
本篇教學參考官方的教學。
雖然我打算以後都用 CoderBridge 來寫部落格,不過為了湊文章數這篇教學還是放過來吧~
-
brew install hugo
快速建立一個新的 Blog,並且初始化 git
hugo new site my-blog cd my-blog git init
為 Blog 加入一個 主題
我自己是使用 Blogpapergit submodule add https://github.com/NormandErwan/Blogpaper themes/Blogpaper echo 'theme = "Blogpaper"' >> config.toml
在 Blog 內新增第一篇
廢文hugo new posts/my-first-post.md
你可以編輯你剛剛建立的新文章
它的位置應該會在content/posts/my-first-post.md
內容會類似下面這樣:
--- title: "My First Post" date: 2019-03-26T08:47:11+01:00 draft: true --- ## Title Brabrabra... ---
太好了,你現在有了自己的 Blog,可以開始盡情地發廢文了!
不過目前為止的樣子應該還是很混亂,沒關係,我們可以做一些設定。
Config
此節可參考官方說明
Hugo 官方預設使用 config.toml
作為設定檔,設定檔可支援 TOML, YAML, JSON 三種格式。以下範例使用 TOML。
基本設定如下:
baseURL = "https://blog.saltchang.com" # 你的網址
languageCode = "zh-TW" # 語言,預設應該會是 en
title = "Salt's Blog" # Blog 的名稱
theme = "Blogpaper" # Blog 的主題
[author]
name = "Salt"
copyright = "2020 Salt Chang."
[menu] # 這是右上角的選單列內容
main = [
{ name = "Home", url = "/" },
{ name = "About", url = "/about" }
]
[params] # 一些參數
description = "Salt's Blog"
subtitleLength = 25 # 文章副標題的長度
Structure
Hugo 的文章內容都存在 content/posts/
路徑底下,可以建立子資料夾來管理文章,也可以直接以單一檔案來儲存。
資料夾
以建立一篇文章標題為 new-post
為例,
可在 content/post
下建立 new-post/
路徑,加入 index.md
及 banner.jpg
,banner 將會自動套入。
也可以在文章當中另外加入其他圖片資源:
content/
posts/
new-post/
index.md
banner.jpg
image1.png
image2.png
圖片引入方式,在一開始生成的範例文章 Style Guide
中都有說明。
單一檔案
如果沒有其他的圖片等等資源需要放的話,可以直接建立單個檔案作為文章,banner 圖片則需與文章檔案名稱相同:
content/
posts/
new-post.md
new-post.jpg
文章設定
在文章內容的頂端可以設定文章的設定值,範例採用的格式一樣為 TOML。
內容如下說明:
---
author: Salt Chang
title: 使用 Hugo 建立一個 Blog # 文章標題
subtitle: # 副標題,會在文章頁面顯示
date: 2020-05-28 # 日期
description: # 文章描述,不會顯示
tags: # 標籤,可以分類文章
banner: # banner 資訊
caption:
href:
---
說了好久的部落格,我終於把它建起來了...(淚
網域都買了幾個月了,現在才用真的慚愧。
就以建這個 Blog 的筆記作為第一篇文吧~
<!--more-->
---
## 使用 Hugo 建立一個 Blog
<內容...>
這邊注意到有一個 <!--more-->
的標籤,它的用途是規範文章預覽的文字顯示到哪裡。
以上述範例來看,「作為第一篇文吧~」之後所有的內容都不會再文章列表中被預覽。
Favicon
Hugo 設定 Favicon 的方法非常簡單,建立一個 static/
路徑並將 favicon.ico
放到裡面就可以了!
cd my-blog
mkdir static/
mv favicon.ico static/
以上就是最基本的 Hugo 使用,更多詳細的功能可以參考他們的 官方文件。
之後再將發佈部落格到線上的教學整理一下吧,這篇就先這樣了。(睡)