主要有三個步驟

  1. Setup Hugo blog
  2. Customize blog theme
  3. Host on github page

已經架設過 Hugo 可以跳到 更新部落格的流程

Setup Hugo blog

  1. Install Hugo.
  2. Create Github repo for Hugo blog.(管理 source code 用)
  3. Clone Repo to local.
  4. New a Hugo quickstart site.
  5. Commit and push to Remote repo.

記得在 .gitignore 裡面加入 public/

這時候網站還沒有辦法顯示，因為缺少 Theme

Customize blog theme

1.下載主題

最單純的方式就是在 Hugo官網主題頁 找到想要的主題，連結到 Github 直接下載 ZIP，放到 /themes 目錄下解壓縮

Example: > /themes/hugo-paper

2.修改 Config

唯一要注意的是 config.toml or config.yaml 因主題而異，大概都要讀一下主題的說明文件，我也花了滿多時間在找自己想要的配置

最基本的幾個要修改項目

// config.yaml
title: "部落格標題"
theme: "hugo-paper" (主題名稱)
baseURL: https://*username*.github.io/

3.新增一篇 Post

hugo new posts/my-first-post.md

4.Serve 網站

hugo serve -D

5.Build 網站

hugo

Host on github page

  1. Create Github repo with name “username.github.io”
  2. Go to /public folder

  3. Push to remote Repo

    git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin git@github.com:username/username.github.io.git
git push -u origin main

就可以到 https://username.github.io/ 看到自己用 Hugo 建立的部落格了

更新部落格的流程

一般的教學通常只到架好網站，但我花最多時間的是

摸索整個寫文章到更新部落格的流程

1. 客製化 post.md

通常會有自己客製化的 archetypes/post.md 作為新文章的預設值，新增文章的指令

hugo -k post /posts/new-post.md

2. 標籤分類

在每篇文章內可以用

// new-post.md
tags: ["tag1","tag2"]

來將文章做分類

3. 新增 Menu

通常會想有自訂的 Menu，像是 About, Tags，新增這些頁面的方式是

// config.yaml
menu:
  main:
    - identifier: about
      name: About
      url: /about
      weight: 10
    - identifier: tags
      name: Tags
      url: /tags/
      weight: 20

這時候要新增一個 About 的頁面，其他以此類推 hugo new about.md

4. 更新 Github Page

這裡就是單純的先 build 網站

hugo

然後到 /public 的資料夾底下，把所有變動 commit 後，push 到 main branch 就完成一次更新了

5. 還沒研究的部分

  • SEO
  • RSS 訂閱
  • Custom domain
  • Google Analytic

Reference