準備工作
- 安裝homebrew(可參考mac常用配置文章)
安裝go環(huán)境(可通過homebrew安裝)
Github賬號(用來托管靜態(tài)頁面)
環(huán)境的安裝
安裝Hugo
安裝hugo有兩種方式,二進制安裝和源代碼模式,這里推薦使用二進制模式,直接通過homebrew即可安裝
brew install hugo
安裝完成后通過以下命令查看
brew list
如果有Hugo,即代表安裝成功
生成一個站點
cd ~/ # 進入到個人目錄下
hugo new site test-blog # 生成一個名為test-blog的站點
1.png
如圖進入test-blog目錄,我們看到站點目錄結構如下,我們只關注有注釋的目錄即可
>archetypes
>content #靜態(tài)頁面目錄
>data
>layouts
>static #靜態(tài)文件目錄
>thems #主題目錄
-config.toml#配置文件
創(chuàng)建頁面
頁面都必須生成在content目錄下,如果有多個模塊,可創(chuàng)建多個文件夾
這里舉例生成兩個模塊
hugo new a/a.md
hugo new b/b.md
如下:
我設置a/a.md title為test-A,內容隨便寫
---
title: "test-A"
date: 2019-11-26T17:48:47+08:00
draft: true
---
* a
* b
* c
................................................................
我設置b/b.md title為test-B,內容隨便寫
---
title: "test-B"
date: 2019-11-26T17:48:47+08:00
draft: true
---
1. a
2. b
3. c
安裝主題
https://themes.gohugo.io/ 選擇一款自己喜歡的主題
$ cd themes
$ git clone https://github.com/spf13/hyde.git
修改配置文件config.toml
baseURL = "http://example.org/"
languageCode = "zh-cn"
title = "My New Hugo Site"
theme = "hyde" #theme即為剛下載的主題名稱
測試運行
hugo server -D
# 啟動本地測試,
如圖所示,即代表成功
2.png
我們可通過標示地址: localhost:1313進行本地預覽
如下圖即為運行結果
3.png
編譯
hugo的編譯相當快
hugo
#執(zhí)行hugo命令,會看到目錄下多了 public 目錄,此即為生成的靜態(tài)頁面
發(fā)布
我們用Github Pages 來托管我們的靜態(tài)頁面,在github賬號創(chuàng)建一個{username}.github.io,括號內為你的github用戶名稱,修改配置文件config.toml的baseURL為如下:
baseURL = "http://{username}.github.io"
將public內容推送到該目錄即可
git init
git remote add origin https://github.com/{username}/{username}.github.io.git
git add -A
git commit -m "my blog"
git push -u origin master
接下來,即可使用 http://{username}.github.io 地址來訪問你的個人博客了~
強制使用https
在github工程 Settings/GitHub Pages,勾選Enforce HTTPS 選項,即可啟用https訪問
ps:github的訪問速度有些慢,國內的gitee pages也支持Hugo的托管,感興趣的可以查看文檔配置即可
