注意: 這篇快速入門介紹了 Hugo v0.11 的特性. 如果你使用早期版本的 Hugo, 你需要現(xiàn)進(jìn)行 升級(jí)
VIDEO https://youtu.be/w7Ft2ymGmfc
第一步 安裝 Hugo
前往 Hugo Releases 根據(jù)你的操作系統(tǒng)下載合適的版本
先把可執(zhí)行文件 hugo (windows 下為 hugo.exe) 加入環(huán)境變量, 再進(jìn)行后面的操作.
更多關(guān)于 Hugo 的安裝請(qǐng)查看 Installing Hugo.
第二步 讓 Hugo 為你創(chuàng)建一個(gè)網(wǎng)站
Hugo 可以創(chuàng)建一個(gè)網(wǎng)站框架:
$ hugo new site path/to/site
剩下的命令我們將在項(xiàng)目目錄中進(jìn)行操作
$ cd path/to/site
新的項(xiàng)目將有如下結(jié)構(gòu):
archetypes/
content/
data/
layouts/
static/
config.toml
現(xiàn)在網(wǎng)站沒有任何內(nèi)容
第三步 創(chuàng)建內(nèi)容
如果你使用過(guò)其他寫博客的平臺(tái), 例如 Jekyll Ghost 或者 Wordpress 并且你想遷移到 Hugo, 請(qǐng)查看 migration tools 列表.
Hugo 同樣有可以創(chuàng)建一個(gè)頁(yè)面框架:
$ hugo new about.md
content/目錄下生成了一個(gè)新文件, 文件內(nèi)容為:
+++
data = "2015-01-08T08:36:54-07:00"
draft = true
title = "about"
+++
注意時(shí)間 date 是自動(dòng)生成當(dāng)前時(shí)間
在 +++ 后面輸入 Markdown 格式的內(nèi)容,如
## A headline
Some Content
為了好玩, 我們來(lái)創(chuàng)建另一個(gè)內(nèi)容
$ hugo new post/first.md
新文件將被創(chuàng)建在 contnet/post/first.md.
我們?nèi)稳粵]有任何模板來(lái)告訴我們?nèi)绾握宫F(xiàn)這些內(nèi)容.
第四步 安裝主題
Hugo 擁有大量主題支持. 安裝所有最新的 Hugo 主題只需從 GitHub 倉(cāng)庫(kù)拉取所有 Hugo 主題 到你的項(xiàng)目目錄
$ git clone --depth 1 --recursive https://github.com/spf13/hugoThemes.git themes
第五步 運(yùn)行Hugo
Hugo 自己擁有高性能的 web 服務(wù). 只需的運(yùn)行 hugo server Hugo將自動(dòng)找到一個(gè)可用的端口為你的內(nèi)容建立服務(wù):
$ hugo server --theme=hyde --buildDrafts
2 of 2 drafts rendered
0 future content
2 pages created
0 paginator pages created
0 tags created
0 categories created
in 15 ms
Watching for changes in /home/user/exampleHugoSite/{data,content,layouts,static,themes}
Serving pages from memory
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop
我們?cè)谶@里指定了 2 個(gè)選項(xiàng):
-
--theme選擇一個(gè)主題 -
--buildDrafts因?yàn)槲覀兿胍@示我們的內(nèi)容, 所以都設(shè)置了草紙狀態(tài)
查看 Hugo 選項(xiàng)幫助:
$ hugo help
查看 Hugo 服務(wù)幫助:
$ hugo help server
第六步 編輯內(nèi)容
Hugo 不僅僅只是運(yùn)行一個(gè)服務(wù), 同時(shí)監(jiān)聽你的文件變化并自動(dòng)的重建你的網(wǎng)站, Hugo 還將通知你的瀏覽器自動(dòng)刷新打開了的頁(yè)面. 這對(duì)手機(jī)瀏覽器同樣有效.
通過(guò) ctrl + c 停止 Hugo 進(jìn)程, 然后輸入:
$ hugo server --theme=hyde --buildDrafts
2 pages created
0 tags created
0 categories created
in 5 ms
Watching for changes in exampleHugoSite/content
Serving pages from exampleHugoSite/public
Web Server is available at http://localhost:1313
Press Ctrl+C to stop
打開 你最喜歡的編輯器, 編輯并且保存, Hugo 將自動(dòng)重現(xiàn)網(wǎng)站并自動(dòng)率先你瀏覽器.
將瀏覽器放到第二個(gè)顯示器窗口里, 在你保存修改后只需瞥一眼瀏覽器查看效果, 你不需要切換到瀏覽器去刷新. Hugo 是非常快的, 通常在你查看瀏覽器之前新的頁(yè)面已經(jīng)顯示在瀏覽起上了.
修改并保存文件. 注意終端的顯示:
Change detected, rebuilding site
2015-11-27 15:13 +0100
2 of 2 drafts rendered
0 future content
2 pages created
0 paginator pages created
0 tags created
0 categories created
in 11 ms
第七步 玩一玩
玩是最好的老師.
試著做一做:
- 添加一個(gè)新的內(nèi)容文件
- 常見一個(gè)章節(jié)
- 修改一個(gè)模板
- 使用 TOML front matter 創(chuàng)建一個(gè)內(nèi)容
- 定義自己的 front matter
- 顯示 field in the template
- 創(chuàng)建一個(gè)新的 new content type
