使用 Hugo 建立一個 Blog


Posted by saltchang on 2020-07-14

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.mdbanner.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 使用,更多詳細的功能可以參考他們的 官方文件

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


#Hugo #Blog #教學







Related Posts

day_02: 我不會寫函式

day_02: 我不會寫函式

學 JavaScript 的那些筆記 3 -- ES6

學 JavaScript 的那些筆記 3 -- ES6

交作業流程 Week1-hw1

交作業流程 Week1-hw1


Comments