HUGO 建立屬於自己的部落格
Hugo 擁有超快的速度，強大的內容管理和強大的模板語言，使其非常適合各種靜態網站。可以輕鬆安裝在macOS，Linux，Windows等平臺上，在開發過程中使用LiveReload可即時渲染更改
一、安裝 Hugo
Mac 上安裝 HUGO，很簡單，通過 brew 可以快速安裝
brew install hugo
檢查安裝版本資訊
hugo version
二、使用 Hugo
1、建立網站
hugo new site iChochy 建立
其中
iChochy為你的部落格目錄
目錄結構
iChochy ├── archetypes │ └── default.md ├── config.toml ├── content ├── data ├── layouts ├── static └── themes
2、新增主題
a、下載主題
以 hyde主題為例 https://github.com/spf13/hyde
直接下載主題，放到themes目錄中，或通過 git 方式新增主題
git submodule add https://github.com/spf13/hyde.git themes/hyde
b、修改配置
echo 'theme = "hyde"' >> config.toml
config.toml 檔案內容
baseURL = "https://ichochy.com/" languageCode = "en-us" title = "My New Hugo Site" theme = "hyde"
目錄結構
iChochy ├── archetypes │ └── default.md ├── config.toml ├── content ├── data ├── layouts ├── static └── themes └── hyde ├── CHANGELOG.md ├── LICENSE.md ├── README.md ├── archetypes │ └── default.md ├── go.mod ├── images │ ├── screenshot.png │ └── tn.png ├── layouts │ ├── 404.html │ ├── _default │ │ ├── baseof.html │ │ ├── list.html │ │ └── single.html │ ├── index.html │ └── partials │ ├── head.html │ ├── head_fonts.html │ ├── hook_head_end.html │ └── sidebar.html ├── static │ ├── apple-touch-icon-144-precomposed.png │ ├── css │ │ ├── hyde.css │ │ ├── poole.css │ │ ├── print.css │ │ └── syntax.css │ └── favicon.png └── theme.toml
3、編寫內容
新建文章
hugo new posts/HelloWorld.md 新建
注：以 archetypes/default.md為模版建立
編寫文章
vim content/posts/HelloWorld.md
HelloWorld.md 檔案內容
---
title: "HelloWorld"
date: 2020-08-02T21:47:48+08:00
draft: true
---
### HelloWorld
https://ichochy.com
預覽文章
hugo server -D 啟動服務，訪問 http://localhost:1313
目錄結構
iChochy
├── archetypes
│ └── default.md
├── config.toml
├── content
│ └── posts
│ └── HelloWorld.md
├── data
├── layouts
├── resources
│ └── _gen
│ ├── assets
│ └── images
├── static
└── themes
└── hyde
├── CHANGELOG.md
├── LICENSE.md
├── README.md
├── archetypes
│ └── default.md
├── go.mod
├── images
│ ├── screenshot.png
│ └── tn.png
├── layouts
│ ├── 404.html
│ ├── _default
│ │ ├── baseof.html
│ │ ├── list.html
│ │ └── single.html
│ ├── index.html
│ └── partials
│ ├── head.html
│ ├── head_fonts.html
│ ├── hook_head_end.html
│ └── sidebar.html
├── static
│ ├── apple-touch-icon-144-precomposed.png
│ ├── css
│ │ ├── hyde.css
│ │ ├── poole.css
│ │ ├── print.css
│ │ └── syntax.css
│ └── favicon.png
└── theme.toml
部署
修改部署目錄
修改 config.toml 檔案
1、修改 bashURL 的部署域名
2、新增 publishDir = "docs"，指定部署目錄為 docs
config.toml 檔案內容
baseURL = "https://ichochy.com/"
languageCode = "en-us"
title = "My New Hugo Site"
theme = "hyde"
publishDir = "docs"
生成靜態檔案
hugo -D 生成靜態檔案
目錄結構
iChochy
├── archetypes
│ └── default.md
├── config.toml
├── content
│ └── posts
│ └── HelloWorld.md
├── data
├── docs
│ ├── 404.html
│ ├── apple-touch-icon-144-precomposed.png
│ ├── categories
│ │ ├── index.html
│ │ └── index.xml
│ ├── css
│ │ ├── hyde.css
│ │ ├── poole.css
│ │ ├── print.css
│ │ └── syntax.css
│ ├── favicon.png
│ ├── index.html
│ ├── index.xml
│ ├── posts
│ │ ├── helloworld
│ │ │ └── index.html
│ │ ├── index.html
│ │ └── index.xml
│ ├── sitemap.xml
│ └── tags
│ ├── index.html
│ └── index.xml
├── layouts
├── resources
│ └── _gen
│ ├── assets
│ └── images
├── static
└── themes
└── hyde
├── CHANGELOG.md
├── LICENSE.md
├── README.md
├── archetypes
│ └── default.md
├── go.mod
├── images
│ ├── screenshot.png
│ └── tn.png
├── layouts
│ ├── 404.html
│ ├── _default
│ │ ├── baseof.html
│ │ ├── list.html
│ │ └── single.html
│ ├── index.html
│ └── partials
│ ├── head.html
│ ├── head_fonts.html
│ ├── hook_head_end.html
│ └── sidebar.html
├── static
│ ├── apple-touch-icon-144-precomposed.png
│ ├── css
│ │ ├── hyde.css
│ │ ├── poole.css
│ │ ├── print.css
│ │ └── syntax.css
│ └── favicon.png
└── theme.toml
部署 GitHub Pages
將整個專案推送到 GitHub，然後在專案的 Settings 中開啟的 GitHub Pages，並指定分支和目錄 docs
就是可以直接線上訪問了，如：https://ichochy.github.io
總結
Hugo 簡單、易用、快速
模版化強大，只需要關心文章的編寫
預設開啟 LiveReload，修改後可以實時預覽，免去手去重新整理操作
還有很多強大的功能，如：摘要(Summary)、文章目錄(TableOfContents)、相關推薦(Related)、多語言支援(i18n)、列表分頁(Pagination)、簡碼(Shortcodes)等。
聯絡方式
網站：https://ichochy.com/
源文：https://ichochy.com/posts/20200802/