TOC
資料目錄結構
.
├── content # 存放編譯後的可執行檔案
│ └── post # 文章位置
├── public # 編譯後的資料
├── static # 放置 images css 等靜態檔
└── themes # 版型存放位置
│ └── theme-name
│ ├── exampleSite # 初始化用，可複製此資料夾至專案根目錄
│ └── layouts # theme 模板檔 👈 可客製化的地方
├── static
└── config.toml # 主要的 config 檔
環境建置
以下列資訊為例 專案名稱: my-blog
- 安装 hugo
brew install hugo
- 新建 blog 專案
hugo new site my-blog && cd my-blog
初始化樣板
以下列資訊為例 專案名稱: blog 版型作者: author 版型名稱: theme-name
建立
themes資料夾並下載版型mkdir -p themes && cd themes && git clone https://github.com/author/theme-name.git
建立 git 子模組
git submodule add https://github.com/author/theme-name.git themes/hugo-creative-portfolio-theme
直接套用
樣板範例cp themes/theme-name/archetypes/* archetypes cp -r themes/theme-name/exampleSite/* ./指定 theme 名稱
常用指令
本地端建置
hugo
啟動本地端 dev 模式 (Live Reload)
hugo server
使用 theme
hugo -t <theme-name>
周邊套件
- highlight.js
- 客製化
<pre>樣式 - 引入
JS和CSS各一支 css後面變換樣板名稱即可https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/<樣板名稱>.min.css
- 客製化
小技巧
應該要將
theme複製一個成客製化的名稱- 曾發生
rm -rf的慘案
- 曾發生
客製化樣板
- 可在
themes/<theme-name>/static/css底下 - 新增
custom.css藉以執行客製化
- 可在
書寫範例
- 文章開頭
json layout: post title: "<標題>" subtitle: "<副標題>" excerpt: "<不會出現但看似是增加 seo>" date: <年-月-日> author: "<作者>" image: "<URL>/<pathto>/<圖檔>.jpg" tags: - <標籤> URL: "/2017/01/01/<這篇的英文標題>/" categories: [ <目錄> ]## 未來目標 * cloud function * Authentication * SEO ## 遇到問題 * CSS 爆掉？ - 要改config.toml裡的baseurl成正式站點 url *hugo server一片白？ - 檢查themes底下的對應模板資料夾是不是空的 *Page Not Found- 應該是CI/CD沒設定好蓋掉public資料夾 ## 競品分析 * Hexo 網誌框架 ## 同場加映 * Firebase: 部落格部署教學 ## 參考連結 * hexo 到 hugo * 中文 doc * 架設教學 * Highlight.js
- 請 Toby 喝珍奶，你請我就喝 -
Lil Toby Blog
YA~大杯還小杯～看你誠意 ❤ ️
使用手機掃描 QRCODE 完成 pay 下去就對
