主題概況
Hugo 是一個用 Go 語言編寫的靜態(tài)網(wǎng)站生成器瓤球。類似的靜態(tài)網(wǎng)站生成器還有Jekyll带射、hexo等等。以上生成器都使用過霎苗,但感覺要么環(huán)境麻煩,要么生成靜態(tài)頁面步驟繁瑣以及生成緩慢榛做。如果你正想在GitHub上搭建個靜態(tài)的博客唁盏,搜索一大堆都是關(guān)于Jekyll和hexo的相關(guān)文章,使用Hugo的相關(guān)文章卻很少检眯,但是我認(rèn)為使用Hugo方便一點厘擂。本著學(xué)習(xí)分享的原則,下面整理下如何使用Hugo锰瘸。
Hugo官方主頁:https://gohugo.io/
安裝指南
安裝Hugo
在 Hugo Releases上下載最新版的Release程序刽严。沒錯,下下來就是一個二進(jìn)制的程序避凝。
配置環(huán)境
本例以Widows為例設(shè)置Hugo運行環(huán)境變量舞萄,如需更詳細(xì)的Windows/macOSX的步驟說明,請移步至官網(wǎng):
Installation on OS X /
Installation on Windows
在本地電腦上建立以下文件目錄:(文件路徑隨意)
D:\GitHub\Hugo\bin\hugo.exe
D:\GitHub\Hugo\Sites
我已將下載下來的Hugo二進(jìn)制程序重命名為hugo.exe
并放進(jìn)bin
文件夾內(nèi)了管削。
設(shè)置Windows系統(tǒng)環(huán)境變量倒脓,我的電腦右鍵-->屬性-->高級系統(tǒng)設(shè)置-->在"高級"標(biāo)簽頁中-->環(huán)境變量...,選中PATH變量含思,并編輯...崎弃,在編輯值中新添加hugo程序的路徑即可甘晤,一張圖說明:

運行
安裝并配置Hugo環(huán)境后,打開cmd命令行饲做,可以直接使用hugo命令了线婚。
$ hugo version

創(chuàng)建本地網(wǎng)站
生成站點
之前創(chuàng)建的Sites
就是用來存放創(chuàng)建的網(wǎng)站的,創(chuàng)建文件夾名為blog的網(wǎng)站:
$ hugo new site blog

創(chuàng)建的站點文件目錄說明:
|- archetypes :存放default.md盆均,頭文件格式
|- content :content目錄存放博客文章(.markdown/.md文件)
|- data :存放自定義模版酌伊,導(dǎo)入的toml文件(或json,yaml)
|- layouts :layouts目錄存放的是網(wǎng)站的模板文件
|- static :static目錄存放js/css/img等靜態(tài)資源
|- config.toml :config.toml是網(wǎng)站的配置文件
當(dāng)前網(wǎng)站是沒有任何內(nèi)容的缀踪,需要下載個主題跑起來才有內(nèi)容居砖。
安裝主題
這里暫時不使用git命令clone下載主題,我們通過手動下載方式進(jìn)行下載驴娃。
Hugo官方主題:https://themes.gohugo.io/
Hugo官方主題GitHub:https://github.com/spf13/hugoThemes/
這里選取Hyde主題為例奏候,從gitHub下載下來,將解壓出的文件放到themes
文件夾下唇敞。主題存放的路徑為:Sites\blog\themes\hyde
蔗草,包含以下文件:
|- archetypes :存放default.md,頭文件格式
|- layouts :主題模板文件
|- static :靜態(tài)資源
|- theme.toml :主題配置文件
運行Hugo Server
Hugo內(nèi)置http server疆柔,在你的站點根目錄執(zhí)行hugo server
命令咒精,即可在瀏覽器里輸入: http://localhost:1313
訪問網(wǎng)站。
$ hugo server --theme=hyde
(注明:需要指定主題旷档,如果在config.toml
中配置指定主題可以省略--theme
參數(shù))

發(fā)表文章
可以看到現(xiàn)在博客里沒有文章模叙,使用hugo new
命令創(chuàng)建文章。
$ hugo new post/test.md
可以用文本文件或markdown編輯器打開文件 post/test.md 鞋屈,并增加點內(nèi)容范咨。
+++
date = "2017-02-10T15:01:33+08:00"
title = "test"
draft = false
+++
Hello Hugo!測試內(nèi)容
注意:默認(rèn)創(chuàng)建的是草稿類型厂庇,需要將draft
值改為false才能看到頁面渠啊。

生成靜態(tài)網(wǎng)站
$ hugo --theme=hyde --baseUrl="https://YOURNAME.github.io/"
所有靜態(tài)頁面都會生成到 public
目錄下,生成靜態(tài)網(wǎng)站后并push到你的GitHub Pages
上权旷,就能得到一個在線的個人博客了替蛉。
本文對GitHub如何使用不做詳細(xì)介紹。請參考GitHub Pages在線幫助文檔拄氯。
首先在GitHub上創(chuàng)建個Repository躲查,命名為:YOURNAME.github.io(YOURNAME替換為自己的用戶名),然后用git
將剛才創(chuàng)建的YOURNAME.github.io
項目clone下來坤邪。
將生成的 public
目錄下所有文件拷貝到YOURNAME.github.io
項目中熙含,并提交版本。

OK艇纺!至此你可以打開瀏覽器開始訪問:https://ciey.github.io/ 博客了怎静。
后期將給大家?guī)砣绾涡薷闹黝}邮弹、添加評論等文章,敬請期待蚓聘!如果覺得此篇文章對你有用腌乡,那就盡情mark吧~