guest@blog.cmj.tw: ~/posts $

Hugo


new blog with hugo

放棄之前寫的專案改用 Hugo 來產生跟維護自己的部落格。 使用 Hugo 的原因他是 open source 、用 Go 寫 (跟我當初的專案一樣)、有更好的社群支援。 也順便把過往的文章重新整理並搬來這裡。

Setup

完整的教學可以參考官方的 Quick Start ,步驟可以分成簡單的四個步驟:

  1. 安裝跟建立專案
  2. 增加內容
  3. 設定與選擇主題
  4. 部署

Install and Setup Project

最簡單的方式、可以透過 homebrew 來安裝 Hugo:brew install hugo。 在環境中就有 hugo 與其他需要的相關工具。之後透過指令 hugo new site <project-name> 來建立專案。

在官方文件中 Hugo 將專案透過資料夾的方式來管理,並且有一些預設的資料夾結構:

my-site/
├── archetypes/         <-- archetypes directory contains templates for content types
│   └── default.md
├── assets/             <-- global resources typically passed through an asset pipeline
├── config/             <-- configuration directory contains configuration files
│   └── _default/
│       └── hugo.toml   <-- default site configuration
├── content/            <-- the markup files (typically markdown) and page resources
├── data/               <-- data files that augment content, configuration, localization, and navigation
├── i18n/               <-- translation tables for multilingual sites
├── layouts/            <-- templates to transform content, data, and resources into a complete website
├── public/             <-- created when you build your site
├── resources/          <-- created when you build your site
├── static/             <-- contains files that will be copied to the public directory when you build your site
├── themes/             <-- themes directory contains one or more themes
└── hugo.toml           <-- site configuration

Create Content

在 Hugo 中,內容是透過 Markdown 來撰寫,並且放在 content 資料夾中。 透過指令 hugo new <path>/<file-name>.md 來建立新的內容,並且會自動產生一個範本。 範本的內容包含了文章的基本內容:

---
title: "Hello World"
date: 2020-11-14T07:42:58+08:00
---

Setup Config and Theme

在 Hugo 中,設定檔是透過 hugo.toml (或者其他格式) 來設定整個環境。在早期使用 config.toml 但在 新版 的 Hugo 中會優先使用 hugo.toml。在多環境部署下、可以將設定檔放在 config/ 資料夾中, 並且分別命名為 prod、stage、dev 等等。之後透過指令 hugo --environment <env> 來指定環境。 最後可以透過 hugo config 來檢查目前的設定。

Hugo 有很多的主題可以選擇,可以透過 hugo new theme <theme-name> 來建立新的主題。 或者在 官方列表 中找到自己喜歡的主題。

Deployment

在 Hugo 中,部署是透過指令 hugo 來產生靜態網站,並且會產生在 public/ 資料夾中。 之後可以透過 hugo server 來啟動本地端的伺服器,並且可以透過 http://localhost:1313 來瀏覽。