以 Hugo 建立部落格

Hugo 是一個用 Go 寫成的靜態網站生成器(Static Site Generator)。其架構允許以 Markdown 格式撰寫內容,再搭配 layout template 渲染出畫面,對於喜歡用 Markdown 簡潔撰寫文章的人來說很合適!

就讓我們來看看如何以 Hugo 建立部落格,並在每次更新後自動化部署到 GitHub Pages。

Hugo 不管是「網站打包」還是「從零建立網站」的速度都很快,號稱

The world’s fastest framework for building websites.

與類似的框架 WordpressGatsby 一樣,Hugo 也有豐富多元且開源的主題 (theme),讓人方便快速地就建立起自己的網站。

此網站就是以 Hugo 建立的,並使用 Compose Theme 讓我們來看看是怎麼做的吧~

Getting Started

Reference: Hugo - Quick Start, Compose - Install Theme

  • Step 1 - Install Hugo (for MacOS)
brew install hugo
  • Step 2 - New a Site
hugo new site my-blog
  • Step 3 - Install a theme
cd my-blog
git init
git submodule add https://github.com/onweru/compose/ themes/compose
cp -a themes/compose/exampleSite/* .
  • Step 4 - Run Hugo Server
hugo server
  • Step 5 - Open http://localhost:1313/ in browser and then you'll see a site with the Compose theme

  • Step 6 - Add your content and customize the styles!

Directory Structure

Hugo 有制式的檔案架構,若依照該架構放置內容,便能享有 Hugo 預設的功能,諸如:列表 (list page) 和單篇 (single page) 結構、多國語言、template 組合等等。以下介紹常見 Hugo 架構中各檔案夾的意義。

my-blog
├── archetypes
├── assets         // scss and js to be processed by Hugo Pipes
├── content        // 網站主要內容都維護在此
├── layouts        // 網站頁面樣式,因為我們有使用主題,如果需要客製化覆蓋主題的樣式,可在此新增檔案
├── static         // 放置網站圖片、CSS、JS 檔案
├── theme          // 主題
└── config.toml    // 設定檔

Layout 覆蓋順序請見 Hugo's Lookup Order

Deploy

請見下篇自動化部署 Hugo 部落格到 GitHub Pages