使用Hugo搭建GitHub個人博客

主題概況

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程序的路徑即可甘晤,一張圖說明:


設(shè)置Hugo系統(tǒng)環(huán)境變量
設(shè)置Hugo系統(tǒng)環(huán)境變量

運行

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

$ hugo version
hugo version
hugo version

創(chuàng)建本地網(wǎng)站

生成站點

之前創(chuàng)建的Sites就是用來存放創(chuàng)建的網(wǎng)站的,創(chuàng)建文件夾名為blog的網(wǎng)站:

$ hugo new site blog
hugo new site
hugo new site

創(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項目中熙含,并提交版本。

git提交
git提交

OK艇纺!至此你可以打開瀏覽器開始訪問:https://ciey.github.io/ 博客了怎静。

后期將給大家?guī)砣绾涡薷闹黝}邮弹、添加評論等文章,敬請期待蚓聘!如果覺得此篇文章對你有用腌乡,那就盡情mark吧~

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市夜牡,隨后出現(xiàn)的幾起案子与纽,更是在濱河造成了極大的恐慌,老刑警劉巖塘装,帶你破解...
    沈念sama閱讀 222,681評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件急迂,死亡現(xiàn)場離奇詭異,居然都是意外死亡蹦肴,警方通過查閱死者的電腦和手機僚碎,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,205評論 3 399
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來阴幌,“玉大人勺阐,你說我怎么就攤上這事∶” “怎么了渊抽?”我有些...
    開封第一講書人閱讀 169,421評論 0 362
  • 文/不壞的土叔 我叫張陵,是天一觀的道長议忽。 經(jīng)常有香客問我懒闷,道長,這世上最難降的妖魔是什么徙瓶? 我笑而不...
    開封第一講書人閱讀 60,114評論 1 300
  • 正文 為了忘掉前任毛雇,我火速辦了婚禮,結(jié)果婚禮上侦镇,老公的妹妹穿的比我還像新娘。我一直安慰自己织阅,他們只是感情好壳繁,可當(dāng)我...
    茶點故事閱讀 69,116評論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著荔棉,像睡著了一般闹炉。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上润樱,一...
    開封第一講書人閱讀 52,713評論 1 312
  • 那天渣触,我揣著相機與錄音,去河邊找鬼壹若。 笑死嗅钻,一個胖子當(dāng)著我的面吹牛皂冰,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播养篓,決...
    沈念sama閱讀 41,170評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼秃流,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了柳弄?” 一聲冷哼從身側(cè)響起舶胀,我...
    開封第一講書人閱讀 40,116評論 0 277
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎碧注,沒想到半個月后嚣伐,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,651評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡萍丐,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,714評論 3 342
  • 正文 我和宋清朗相戀三年轩端,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片碉纺。...
    茶點故事閱讀 40,865評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡船万,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出骨田,到底是詐尸還是另有隱情耿导,我是刑警寧澤,帶...
    沈念sama閱讀 36,527評論 5 351
  • 正文 年R本政府宣布态贤,位于F島的核電站舱呻,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏悠汽。R本人自食惡果不足惜箱吕,卻給世界環(huán)境...
    茶點故事閱讀 42,211評論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望柿冲。 院中可真熱鬧茬高,春花似錦、人聲如沸假抄。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,699評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽宿饱。三九已至熏瞄,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間谬以,已是汗流浹背强饮。 一陣腳步聲響...
    開封第一講書人閱讀 33,814評論 1 274
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留为黎,地道東北人邮丰。 一個月前我還...
    沈念sama閱讀 49,299評論 3 379
  • 正文 我出身青樓行您,卻偏偏與公主長得像,于是被迫代替她去往敵國和親柠座。 傳聞我的和親對象是個殘疾皇子邑雅,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,870評論 2 361

推薦閱讀更多精彩內(nèi)容