new blog with hugo
放棄之前寫的專案改用 Hugo 來產生跟維護自己的部落格。 使用 Hugo 的原因他是 open source 、用 Go 寫 (跟我當初的專案一樣)、有更好的社群支援。 也順便把過往的文章重新整理並搬來這裡。
Setup
完整的教學可以參考官方的 Quick Start ,步驟可以分成簡單的四個步驟:
- 安裝跟建立專案
- 增加內容
- 設定與選擇主題
- 部署
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
來瀏覽。