Hugo 筆記 — Blog 從無到有-Aphasia

有鑑於網路上針對 Github + Hugo 建置 blog 資源雖豐富，對於入門者的 step by step 環境建置和編輯器統整尚不多，這邊將一些重點做成筆記，方便日後繼續編輯回顧。

關於 Github, Hugo, VSCode, Markdown

Github 是一個透過 Git 進行版本控制 (版控)、用於備份且可共享的原始碼代管平台，和其他使用「單一儲存區」的版控工具不同，Git 可將資料「分散式儲存」在不同的本地設備，而 Github 則是基於相同的概念，除了專案作者將資料部屬在 Github 之外，其他在本地端修改的人也可以再重新上傳到 Github，如此一來便形成一個新的備份。

Hugo 是一種用 Go 程式語言撰寫的靜態網頁生成器 (Static Site Generator)，是提供基於 JAMstack 快速建置網站且開放原始碼 (Open-source) 的框架工具 (Framework)。而 JAMstack 的 JAM 分別是 JavaScript、API 和 Markup 的縮寫，網路上都有詳盡的介紹。

Before start

Operate using VSCode and get prepared with VSCode extensions (Markdown, etc…)

github.com

Github Desktop

Visual Studio Code (VSCode)

Markdown All in One

Quick start for Github pages

註冊 Github 並新建一個 Repository，所有的網頁內容新增和更新都會透過 Github Desktop 上傳至這個 Repository，Github 的網站有清楚的圖文教學。 Quickstart for GitHub Pages (Repository 名稱輸入帳號.github.io，執行步驟一到四即可，Theme 現階段不急著決定。)
直接使用 Hugo release 安裝 Hugo 或開啟 VSCode 使用環境系統相對應的 one-liner 安裝。 Install Hugo

在 Hugo 資料夾新建網站

 cd C\Hugo
 hugo new site 自定義名稱

新增主題

在 Hugo Themes 選擇一個主題，依照主題的安裝說明下載到本地資料夾。

 cd C\Hugo\自定義名稱\themes
 git clone https://github.com/依照主題說明

編輯網頁資訊

下載完 Hugo 主題後，本地的網站資料夾會出現一個 config.toml 的檔案，使用 VScode 開啟後依照需求修改內容。

修改部落格 URL: owner.github.io
修改部落格名稱

本地測試

 cd C\Hugo\自定義名稱
 hugo serve

執行完後，在瀏覽器中輸入網址 http://localhost:1313 便可以預覽網站。

建立 public 資料夾

 cd C\Hugo\自定義名稱
 hugo

在 Github 部屬網頁

開起 Github Desktop 登入一開始註冊的帳戶，Desktop 會把帳號.github.io 先 clone 到本地資料夾，之後把 publish 資料夾中的所有內容複製到 clone 出來的帳號.github.io 資料夾，一般預設路徑是 C:\Users\登入帳號\Documents\GitHub\帳號.github.io。

這時 Desktop 會偵測到新增內容，輸入更新備註後即可 Commit to main，最後在上方點選 Push/Fetch origin 完成布署，在瀏覽器中輸入網址 https://帳號.github.io 即可查看部落格。

新增文章

 cd C\Hugo\自定義名稱
 hugo new post/my-post.md

在 \content\post 資料夾建立 my-post.md 文件

程式碼

apiVersion: networking.istio.io/v1alpha3
kind: Gateway
metadata:
  name: bookinfo-gateway
spec:
  servers:
  - port:
      number: 443
      name: https
      protocol: HTTPS
    hosts:
    - bookinfo.com
    tls:
      mode: SIMPLE
      serverCertificate: /tmp/tls.crt
      privateKey: /tmp/tls.key

Hugo 筆記 — Blog 從無到有

Github/ Hugo/ Markdown 使用編輯器統整