手把手教你用Hexo在GitHub上搭建個人博客

轉(zhuǎn)載請注明原作者,如果覺得有用筛婉,不用請我喝咖啡:D

這篇文章,寫給希望使用Hexo在Github上搭建起個人博客的你癞松,同樣適合像 Lucien 一樣不是程序猿的同學(xué):D

1.前置準(zhǔn)備

  • Node.js環(huán)境和npm
  • git環(huán)境
  • 一點點Markdown基礎(chǔ)
  • 一點點git基礎(chǔ)
  • 命令行工具爽撒,如Terminal、GitBash
  • github帳號响蓉,如果要將你的hexo博客免費部署到github上硕勿,類似我的博客 - 德魯熊的博客的話。

Node.js和npm的安裝枫甲,Mac下的配置可以從我博客中的這篇文章找到源武。

git環(huán)境是必須的,Mac下安裝過Xcode默認(rèn)配置有g(shù)it想幻。沒有安裝過粱栖,現(xiàn)裝一個也非常簡單,參考cocoachina上的這篇文章脏毯,沒有親測過查排。

Markdown,如果是純文字記錄抄沮,不會也沒有關(guān)系跋核,但是會的話可以讓你寫出格式更漂亮的日志和文檔

至于git叛买,同樣也是不會也沒有關(guān)系砂代,因為在用hexo搭建博客的過程中,使用到的命令來回就那幾行率挣。我會把命令都提供出來刻伊,如果有需要修改的地方會特別標(biāo)注,但是如果會的話,理解起來更容易捶箱。

2.使用Hexo

我們先來說說基本的配置和本機部署智什,這章節(jié)的操作做完后,你可以通過一個本機能訪問的地址 http://0.0.0.0:4000/丁屎,看到自己的博客是什么模樣荠锭。

2.1 npm安裝Hexo

打開命令行工具,執(zhí)行如下命令:

$ npm install -g hexo

如果這一步出錯晨川,請參考這篇文章看看能不能解決你的問題证九。

2.2 創(chuàng)建hexo文件夾

在你打算管理博客內(nèi)容的地方,創(chuàng)建一個名為hexo的文件夾共虑。例如我的在:

/Users/drubear/Development/hexo

你也可以直接使用命令行創(chuàng)建目錄愧怜。

3.2 初始化

hexo目錄下 打開命令行工具(或者cd到該目錄下),執(zhí)行:

hexo init

命令行會反饋給你:

You're almost done!Don't forget to run 'npm install' before you start blogging with Hexo!

那么接下來我們就在命令行中執(zhí)行:

npm install

執(zhí)行結(jié)束后妈拌,你只需要執(zhí)行一個簡單的命令拥坛,就可以在瀏覽器中看到博客啦。
hexo已經(jīng)為你準(zhǔn)備了模板尘分,現(xiàn)在打開看看吧猜惋!
先執(zhí)行:

hexo server

會看到

INFO  Hexo is running at http://0.0.0.0:4000/. Press Ctrl+C to stop.

訪問http://0.0.0.0:4000/,看見了嗎音诫?里面的這篇文章是Hexo為你準(zhǔn)備的樣例惨奕。

3.發(fā)布新文章

現(xiàn)在你已經(jīng)有了一個可以在本機訪問的博客雪位,接下來試著發(fā)布一篇自己的文章竭钝。

如果剛才已經(jīng)執(zhí)行過hexo server,先用Ctrl+C 暫停Hexo server雹洗。

還是 在你的Hexo目錄下 香罐,使用命令行執(zhí)行:

hexo new "我的第一篇文章"

雙引號內(nèi)名字就是你文章的標(biāo)題。
這行命令執(zhí)行完后时肿,Hexo會告訴你庇茫,

INFO  Created: ~/Development/hexo/source/_posts/我的第一篇文章.md

Hexo已經(jīng)在你的hexo目錄中的source/_posts/目錄下為你創(chuàng)建了名為"我的第一篇文章"的.md文件。

.md是markdown的縮寫螃成。你可以使用文本編輯工具旦签,如系統(tǒng)自帶的TextEdit,或者Sublime來編輯寸宏。也可以使用專門編輯Markdown格式文本的Markdown編輯器宁炫。在Mac下推薦免費的MacDown,官方網(wǎng)站的下載在這里氮凝。

找到『我的第一篇文章.md』羔巢,使用編輯器對它進(jìn)行編輯,然后保存。

生成的.md文章頭部有一些諸如title,date,tags之類的字段竿秆,是用來配置這篇文章的標(biāo)題启摄、日期和tag的。

然后執(zhí)行:

hexo generate

或者

hexo g

如果出現(xiàn)錯誤幽钢,嘗試先hexo clean歉备,再hexo generate。
如果沒有出現(xiàn)錯誤搅吁,那么執(zhí)行hexo server威创,看看你的文章是不是已經(jīng)出現(xiàn)在博客當(dāng)中了?

Tips:

  • 關(guān)于more 在文章中加入一行
<!-- more -->

可以將文章折疊谎懦,點擊more按鈕才展示全文肚豺。這樣比較方便瀏覽,不至于在文章篇幅很長時要滾動很長的距離才能看到下一篇文章界拦。

  • 關(guān)于tags 如果想為文章配置tags吸申,修改.md文件頭部的tags字段。需要注意的是享甸,筆者直接寫tags: android,mac沒有起作用截碴。查閱資料后,正確的寫法應(yīng)該是:
tags:  
 - Android
 - Mac 

4.個性化配置

對自己的hexo博客進(jìn)行個性化配置蛉威,主要從_config.yml入手日丹。建議先備份該文件,再進(jìn)行修改的嘗試蚯嫌。

在hexo目錄下找到_config.yml文件哲虾。使用文本編輯器打開,所有的配置選項都在這里择示,可以查閱文檔了解每個配置項的意思束凑,如title代表你博客的名稱,author是你的名字栅盲,subtitle是副標(biāo)題等汪诉,這些配置項會反應(yīng)在博客的界面上,不同的主題(Theme谈秫,后文會提到)中扒寄,這些字段的表現(xiàn)形式是不一樣的。
我們主要關(guān)心三個部分:

  • 基本信息拟烫,如 title该编、subtitle、description构灸、author等上渴“独妫基本信息的修改依照主題的不同會有不同的表現(xiàn)方式,按照自己選擇的主題來嘗試并觀察變化即可稠氮。
  • 主題 theme曹阔。theme的修改見4.2章節(jié)。
  • 部署 deploy 隔披,后文會已發(fā)布到Github為例說明赃份。deploy章節(jié)的修改見4.3章節(jié)。

4.1 基本信息

筆者修改了title奢米、subtitle抓韩、author為下面的內(nèi)容,你可以在這個頁面上看到每一個值都顯示在了哪里鬓长。

# Site
title: Drubear的博客
subtitle: 不寫代碼的音樂家不是一個好科學(xué)家
description: 
author: Drubear 
language:
timezone:

注意:每一個值的冒號后面都有一個半角空格谒拴!

  • 未生效的寫法:title:Drubear的博客
  • 能生效的寫法:title:[空格]Drubear的博客

改好基本信息,我們再來看看主題該如何改動涉波。

4.2 主題

在選擇主題之前英上,可以參考知乎的一個文章,這里匯總了一些hexo的主題鏈接啤覆。

知乎 - 有哪些好看的Hexo主題苍日?

4.2.1 下載主題

選好主題之后,以我使用的litten的yilia為例:
在hexo目錄下窗声,使用命令行工具相恃,輸入

git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia

clone后面跟著的是主題的git repo地址,而themes/yilia則表示要將該主題克隆到hexo/themes/yilia目錄中笨觅。
地址根據(jù)主題頁面公布的git repo地址變化拦耐,而themes/[主題名稱] 也有主題名字決定。
通常主題的首頁會告訴你如何使用屋摇,找到長得相似的那一行命令操作即可揩魂。

PS 1:地址可能有兩種形式幽邓,一種是https打頭炮温,git結(jié)尾,如

https://github.com/litten/hexo-theme-yilia.git

還有一種是git@github.com打頭牵舵,git結(jié)尾柒啤,如

git@github.com:litten/hexo-theme-yilia.git

具體看主題頁面上的地址,通常在download ZIP的左邊

PS 2:進(jìn)入themes目錄 直接輸入

git clone https://github.com/litten/hexo-theme-yilia.git

也可以畸颅,區(qū)別是不用在地址后面指定目錄担巩。

如果你使用的不是yillia,將clone后面的地址没炒,替換為你想要使用的那個地址即可涛癌。例如,如果你想使用modernist,那么就輸入:

git clone https://github.com/heroicyang/hexo-theme-modernist.git themes/modernist

4.2.2 配置主題(非必須)

以筆者配置的yilia主題為例拳话,當(dāng)我們需要對主題中的友情鏈接先匪、個人主頁地址做一些配置時,進(jìn)入tnemes/yilia弃衍,找到主題目錄下的_config.yml文件呀非。
每個主題的配置文件有所不同,具體可參閱主題的主頁上的信息镜盯。

4.2.3 使用主題

回到上一章節(jié)中的_config.yml文件岸裙,修改其theme字段為

## Themes: http://hexo.io/themes/
theme: yilia

同樣的,別忘了冒號后面需要多一個半角空格速缆。

OK降允,主題配置完畢。依次執(zhí)行如下命令:

hexo clean
hexo generate
hexo server

如果沒有報錯的話艺糜,訪問http://0.0.0.0:4000/拟糕,你配置的主題已經(jīng)生效啦!
如果有出現(xiàn)報錯倦踢,通常是因為你的_config.yml改動時出現(xiàn)了問題送滞,除了檢查冒號后面是否已經(jīng)跟上一個半角空格,還可以將備份替換回來排查一下辱挥。

到此為止犁嗅,你已經(jīng)成功的在你自己的電腦上部署了擁有主題和內(nèi)容的個人博客,遺憾的是這個作品只能被你個人訪問到晤碘。如果能把它部署在GitHub上使這個博客可以被公開訪問呢褂微?接下來我們就講講如果將Hexo部署到GitHub Pages。

4.3 部署配置

我們已經(jīng)完成了Hexo個性化配置中的基本信息和主題配置园爷,還剩一項部署 - deploy宠蚂。筆者理解為,當(dāng)對 _config.yml 文件中的 deploy 進(jìn)行了配置童社,那么通過

hexo deploy

命令求厕,就可以將你的Hexo提交到GitHub Pages上,從而刷新你的GitHub Pages頁面扰楼。

換句話說呀癣,如果執(zhí)行了new、clean弦赖、generate,只是在你的電腦上生成了最新的博客项栏,如果不執(zhí)行deploy,新添加的內(nèi)容是不會被推送到GitHub Pages上的蹬竖。

既然我們已經(jīng)決定將Hexo部署到GitHub沼沈,那么我們還是先看看需要在GitHub上做哪些前置準(zhǔn)備流酬。

如果你已經(jīng)準(zhǔn)備好,可以直接跳到5.2章節(jié)列另。

5.連接到GitHub

5.1 前置準(zhǔn)備

如果你還沒有GitHub賬號康吵,在這里或者這里申請一個。

如果你擁有了賬號访递,還沒有GitHub Pages地址晦嵌,在頁面右上角你的頭像旁邊點擊 + 號按鈕,選擇repository拷姿〔言兀或者直接點擊這里(https://github.com/new)。

Repository name 欄中响巢,輸入

[你的用戶名].github.io

注意描滔,你的用戶名必須與你實際的用戶名一字不差!

這個用戶名可以在 Repository name 欄左邊那個 Owner 中找到踪古,保持一致 即可含长。

比如我的GitHub用戶名是drubear,那么我的Owner中會顯示drubear伏穆,而我應(yīng)該在 Repository name 中填寫:

drubear.github.io

Description可填簡要介紹拘泞,也可以不填。

然后選Public枕扫。

去掉 Initialize this repository with a README 前的鉤陪腌。

然后點擊 Create repository

成功后烟瞧,就可以通過 http://[你的用戶名].github.io 訪問你的頁面了诗鸭。

也許它現(xiàn)在還空無一物,接下來我們就把Hexo的內(nèi)容放進(jìn)去参滴。

5.2 配置Deploy

當(dāng)你擁有了個人的GitHub Pages后强岸,再回到Hexo的_config.yml文件,找到Deployment章節(jié)砾赔。
將type改為git蝌箍,repository改為你的GitHub Pages地址。這個地址應(yīng)該長這樣:

git@github.com:[你的GitHub用戶名]/[你的GitHub用戶名].github.io.git

branch用來指向分支过蹂,如果沒有特定的分支配置十绑,可以使用默認(rèn)的master聚至。

最終Deployment部分看起來應(yīng)該是下面這個樣子:

# Deployment
## Docs: http://hexo.io/docs/deployment.html
deploy:
  type: git
  repository: git@github.com:drubear/drubear.github.io.git
  branch: master

通過前面1酷勺、2、3扳躬、4章節(jié)的步驟脆诉,我們已經(jīng)準(zhǔn)備好了要發(fā)布的博客甚亭。執(zhí)行命令:

hexo deploy

如果沒有報錯,你可以訪問自己的GitHub Pages頁面查看你所建立的博客了击胜。

比如我的博客亏狰,地址應(yīng)該為:

http://drubear.github.io/

將[drubear]替換為你的用戶名即可。

恭喜偶摔!你已經(jīng)使用Hexo完成了個人博客的搭建并將它發(fā)布在GitHub Pages可供公開訪問啦暇唾!

6.日常維護(hù)

當(dāng)部署成功后,我們?nèi)粘V恍枰?/p>

  1. 新建文章(new)
  2. 找到生成的.md然后編輯并保存
  3. 生成博客(generate)
  4. 部署(deploy)

就可以完成新文章的發(fā)布辰斋。

日常使用命令整理如下:

hexo new "文章標(biāo)題名稱" //新建文章

hexo clean //清理(非必須)策州,在遇到問題時可嘗試先clean再generate

hexo generate //將文章生成為博客的一部分
hexo g //同上,generate的簡寫

hexo server //本地預(yù)覽(非必須)

hexo deploy //推送到GitHub
hexo d //同上最仑,deploy的簡寫

7.筆者遇到的問題

1.Deployer not found: git

出現(xiàn)這個錯誤帆锋,先確認(rèn)deploy的type已經(jīng)改成了git荐虐。
然后在hexo目錄下運行:

npm install hexo-deployer-git --save

之后再執(zhí)行

hexo generate
hexo deploy

即可。

2.genrnate 報錯

檢查_config.yml配置中孽糖,鍵值對冒號后面是否已經(jīng)預(yù)留了一個半角空格。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末毅贮,一起剝皮案震驚了整個濱河市办悟,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌滩褥,老刑警劉巖誉尖,帶你破解...
    沈念sama閱讀 216,402評論 6 499
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異铸题,居然都是意外死亡铡恕,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,377評論 3 392
  • 文/潘曉璐 我一進(jìn)店門丢间,熙熙樓的掌柜王于貴愁眉苦臉地迎上來探熔,“玉大人,你說我怎么就攤上這事烘挫【骷瑁” “怎么了?”我有些...
    開封第一講書人閱讀 162,483評論 0 353
  • 文/不壞的土叔 我叫張陵饮六,是天一觀的道長其垄。 經(jīng)常有香客問我,道長卤橄,這世上最難降的妖魔是什么绿满? 我笑而不...
    開封第一講書人閱讀 58,165評論 1 292
  • 正文 為了忘掉前任,我火速辦了婚禮窟扑,結(jié)果婚禮上喇颁,老公的妹妹穿的比我還像新娘漏健。我一直安慰自己,他們只是感情好橘霎,可當(dāng)我...
    茶點故事閱讀 67,176評論 6 388
  • 文/花漫 我一把揭開白布蔫浆。 她就那樣靜靜地躺著,像睡著了一般姐叁。 火紅的嫁衣襯著肌膚如雪瓦盛。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,146評論 1 297
  • 那天外潜,我揣著相機與錄音谭溉,去河邊找鬼。 笑死橡卤,一個胖子當(dāng)著我的面吹牛扮念,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播碧库,決...
    沈念sama閱讀 40,032評論 3 417
  • 文/蒼蘭香墨 我猛地睜開眼柜与,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了嵌灰?” 一聲冷哼從身側(cè)響起弄匕,我...
    開封第一講書人閱讀 38,896評論 0 274
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎沽瞭,沒想到半個月后迁匠,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,311評論 1 310
  • 正文 獨居荒郊野嶺守林人離奇死亡驹溃,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,536評論 2 332
  • 正文 我和宋清朗相戀三年城丧,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片豌鹤。...
    茶點故事閱讀 39,696評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡亡哄,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出布疙,到底是詐尸還是另有隱情蚊惯,我是刑警寧澤,帶...
    沈念sama閱讀 35,413評論 5 343
  • 正文 年R本政府宣布灵临,位于F島的核電站截型,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏儒溉。R本人自食惡果不足惜宦焦,卻給世界環(huán)境...
    茶點故事閱讀 41,008評論 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧赶诊,春花似錦笼平、人聲如沸园骆。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,659評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽锌唾。三九已至锄码,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間晌涕,已是汗流浹背滋捶。 一陣腳步聲響...
    開封第一講書人閱讀 32,815評論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留余黎,地道東北人重窟。 一個月前我還...
    沈念sama閱讀 47,698評論 2 368
  • 正文 我出身青樓,卻偏偏與公主長得像惧财,于是被迫代替她去往敵國和親巡扇。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,592評論 2 353

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