曾幾何時, 寫過前端又懂後端的我們, 都有種架設自己網站的美夢, 雖說這東西是不是會有人關心並不是重點, 但有自己純手工打造的東西就是"爽". 只是要全部自幹起來, 難免花些時間, 好在有類似 Hugo 這種 SSG, 讓廣大的 IT 宅們得以實現這可悲的美夢!!… 本文使用 BeautifulHugo Theme 來作基底
Prerequests
- 安裝 hugo
- 安裝 git
Scripts
### 建立 hugo 專案
hugo new site blog
### 建立 theme
cd blog
git init
git submodule add https://github.com/halogenica/beautifulhugo.git themes/beautifulhugo
### 製作組態 (詳 config.toml 段落)
cp themes/beautifulhugo/exampleSite/config.toml .
### 產生靜態檔案
hugo
### 本地開發測試
hugo server -D # -D 可以把 草稿文章也列出來 (draft: true)
Structure
/archetypes/ #
/content/ # 文章放裡面
/post/ # 文章們放裡面
/*.md # 文章們
_index.md # 首頁置頂的公告
/data/ #
/layouts/ #
/resources/ #
/static/ # 靜態文件放置區
/img # 放自己要 po 文連結的圖片
/favicon.ico # favicon
/themes/ # hugo theme 放裏頭
/beautifulhugo/ # 此文選擇的風格
/archetypes/ #
/data/ #
/exampleSite/ #
/post/ #
_index.md #
/layouts/ #
/static/ #
config.toml # 把這個設定主檔範本複製出去改
/i18n/ # 多語系翻譯檔
/en.yaml # i18n-英文
/zh-TW.yaml # i18n-繁體中文, 要使用的話「DefaultContentLanguage = "zh-tw"」
/images/ #
/layouts/ #
/static/ #
.gitattributes #
.gitignore #
LICENSE #
README.md #
theme.toml #
.gitignore #
.gitmodules #
config.toml # 從 themes 複製出來要修改的主要設定檔
config.toml
### Navigator
[[menu.main]]
name = "Archives"
weight = 1
url = "/"
[[menu.main]]
name = "Tags"
weight = 2
url = "/tags"
### 最底下的連結
[Author]
name = "Tony Chou"
email = "mailto:cool21540125@gmail.com"
facebook = "profile.php?id=100000009066426&ref=bookmarks"
stackoverflow = "users/7751061/tony-chou"
github = "cool21540125"
gitlab = "cool21540125"
[Params]
useHLJS = false # Highlight.js 程式碼區塊高量
Additional
花時間聊解一番之後, 才發現世界上有種叫做 WordPress 的東西, 比 Hugo 還要接近一般人…
原來, Hugo 也是邊緣人的玩具罷了