使用 Hugo 建立一個 Blog

Hugo 是一個快速強大的靜態網頁框架，由 Go 語言所寫成的。
本篇教學參考官方的教學。

雖然我打算以後都用 CoderBridge 來寫部落格，不過為了湊文章數這篇教學還是放過來吧～

1. 首先，使用 Homebrew 安裝 Hugo

    brew install hugo
   

2. 快速建立一個新的 Blog，並且初始化 git

    hugo new site my-blog
    cd my-blog
    git init
   

3. 為 Blog 加入一個 主題
   我自己是使用 Blogpaper

    git submodule add https://github.com/NormandErwan/Blogpaper themes/Blogpaper
    echo 'theme = "Blogpaper"' >> config.toml
   

4. 在 Blog 內新增第一篇廢文

    hugo new posts/my-first-post.md
   

5. 你可以編輯你剛剛建立的新文章
   它的位置應該會在 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 使用，更多詳細的功能可以參考他們的 官方文件。

之後再將發佈部落格到線上的教學整理一下吧，這篇就先這樣了。(睡)