基于Hexo框架+GitHub Pages搭建個人博客


這篇文章最初發表在我的個人博客上:dukecui技術博客,歡迎大家訪問!

作為一個程序猿,或者立志希望在程序猿的道路上有所發展的騷年們,相信都應該有一個屬于自己的技術博客。至于為什么需要有自己的技術博客,Android大神stormzhang的這篇文章,已經講的很清楚了,大家可以去學習下,相信你讀完肯定會有感悟,而我自己也深受其影響和鼓舞。于是花了兩三天的時間,折騰了一個自己的博客出來,同時寫下這篇文章記錄和總結自己搭建博客的過程,并希望能為后來者提供一個較為完善可用的參考。

說起博客的搭建,從萌生這個想法開始到現在基本的搭建完成也有將近快一個月的時間。這期間,不得不再次感嘆下自己的執行力。首先從3月份自己做的兩個小的demo說起,這個過程學習到了很多Android開發APP的知識,自己在開發的過程中遇到不少的問題,也花了很多時間去解決。期間曾想記錄下學到的一些關鍵知識點和收獲,并希望通過晚上的時間搭建好自己的博客,但在項目做到關鍵的時候,總是會晚上加班到比較晚,還有一種今天不解決這個問題就不結束的糾結。這就導致搭建博客的事情一拖再拖,直到兩個demo做到自己基本滿意之后,開始休假,終于到清明假期回來才算真正開始完成這件事情。

搭建博客,我首先想到的是Strikingly,一個自動建站的工具,雖說該公司原來的主要業務和服務器均在國外,但他們團隊目前在發展國內的業務,在國內的產品“上線啦”仍在測試階段。有興趣可以了解下這個公司,履歷還是非常牛逼的,第一個獲得YC孵化的中國團隊。但是在使用的過程中我發現,博客編輯系統似乎有些薄弱,無法插入代碼文本,也不支持MarkDown編輯,這使得我最終放棄了這個方案。于是開始嘗試在簡書上撰寫自己的第一篇博文,不得不說簡書滿足了我的對博客的大部分需求,MarkDown編輯,簡單易用,干凈清爽,還有豐富的社交系統等等,因此也為很多技術達人所喜愛。但建成之后總感覺缺了點什么,怪怪的,對,我怎么向別人推薦我的主頁呢?域名的參數居然是一個字符串,連我的id都沒有啊,這也太low了吧,萬一我以后出名了可怎么辦?夢想還是要有的對吧。。。于是索性下決心搭一個自己的博客,也算是一個嘗試的過程,而且還能接觸到前端的一些知識,做互聯網做技術的就是要多嘗試多接觸多折騰,多學習最前沿的知識。。。

好吧,廢話終于說完了,下面是正題,如何通過Hexo+GitHub搭建個人博客。

首先,這里有Hexo的官方網站,上面有非常詳細的內容,大家可以直接參考:Hexo

一、環境的配置

  1. Node.js
    因為Hexo是一個基于Node.js的靜態博客框架,因此需要先安裝Node.js環境,下載地址:Node.js
  2. Git
    此處為Windows平臺下的下載地址:Git
    或者可以選擇直接下載:GitHub Desktop。 (冒著有可能會被嘲笑的風險。。。)
    Mac及其他操作系統請參考Hexo官方提供的下載鏈接。

二、安裝Hexo

完成以上環境配置之后,通過下面的命令安裝Hexo

npm install -g hexo-cli

出現下圖所示信息表示Hexo安裝成功。


三、建站

安裝完成之后,選擇一個目錄作為建站所需文件的存放路徑,如我選擇d:\work\blog,執行以下命令完成hexo的初始化:

hexo init d:\work\blog

然后命令行進入該目錄下

cd d:\work\blog

執行下面的命令,系統會可以根據package.json文件中dependencies的配置安裝所有依賴包

npm install

新建完成之后,根目錄文件夾下各個目錄的含義,可以參考Hexo官網的解釋:目錄信息

四、啟動

在建站工具的根目錄(如上d:\work\blog)下通過以下命令啟動服務器,之后訪問網址 http://localhost:4000/ 即可看到我們剛剛建立的博客,Hexo會默認生成一個Hello World的博文。

hexo server

這樣我們就已經可以在本地瀏覽我們自己的博客了。以后每次對博客進行修改,都可以先通過這種方式進行本地的預覽,滿意之后再部署到GitHub Pages上。

五、部署到GitHub

  1. 首先在你的GitHub上新建一個Repository,倉庫名的固定寫法為 your_user_name.github.io
  2. 配置SSH-Key,網上有很多方法可供大家參考
  3. 修改根目錄的網站配置文件_config.yml,搜索deploy字段,修改成如下所示的格式。
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
    type: git
    repo: git@github.com:DukeCuiChen/DukeCuiChen.github.io.git 
    branch: master
其中,repo是我們剛剛建立的遠程倉庫,換成你自己的id,同時因為剛才配置了SSH-Key,所以必須是SSH形式的URL。值得注意的是,每一個: 后面都必須有一個空格,否則會引起錯誤。
  1. 安裝Git包,執行以下命令
npm install hexo-deployer-git --save
  1. 部署到GitHub上,執行以下的命令
hexo deploy

現在我們可以通過訪問 http://dukecuichen.github.io/ 來訪問我們自己的博客啦!到此,我們的博客已經基本建立完成,當然,下面要講怎么使用嘍~

六、使用

  1. 新建一篇博文可通過以下的命令
hexo new "name"

其中name為博文的名字,建立完成之后,可以在./source/_posts文件夾下發現我們剛剛建立的 name.md文件。使用你熟悉的編輯器打開,便可以進行博文的撰寫。博文支持MarkDown語法的編寫,下面是一個示例文件的內容

---
title: name
date: 2016-04-06 10:34:21
tags: 
- 開始
- 日志
categories: 
- 日志
---
我的第一篇博文。。。。。。
  1. 博文寫好之后,在每次發布之前,我們要先將寫好的博客生成靜態文件,執行以下命令
hexo generate
之后生成的文件會放在./public目錄下,這便是我們將要部署到GitHub上的全部內容。
  1. 靜態文件生成之后,便可以部署到GitHub上
hexo deploy

再重新打開我們的博客 http://dukecuichen.github.io/ 已經可以看到剛剛新加入的博文

七、主題

Hexo提供了豐富的主題可供我們選擇和使用,在./themes目錄下存放主題。剛才默認生成的博客用的就是默認的主題landscape。這里有在GitHub上Hexo所有的主題,可以訪問https://github.com/hexojs/hexo/wiki/Themes 另外我們總是站在巨人的肩膀之上,感謝前人的歸納總結,推薦兩篇Hexo主題推薦的文章:

  1. 一篇是知乎上的:有哪些好看的 Hexo 主題?
  2. 一篇是簡書上的:Hexo博客主題推薦

我自己的博客采用了知名度最高的Next主題,其他主題沒有過多的嘗試,也不敢評論。Next主題集成了非常多的第三方服務可供選擇,例如評論系統,統計系統,分享服務,搜索服務等。這些第三方的服務可以極大的提高博客的體驗。

八、設置域名

博客搭建好之后,我們可以通過http://dukecuichen.github.io/ 類似的域名進行訪問,而且GitHub提供這樣的服務是完全免費的。當然我們也可以通過我們自己的域名來進行訪問,這就需要首先購買我們想要的域名。我是在DNSPod上購買的域名并進行管理操作的,具體的購買方式可以去DNSPod的主頁查看。購買成功后,下面來看如何綁定我們的域名。在DNSPod的控制臺,我們點擊添加記錄,設置主機記錄為@,類型為A,到IP 192.30.252.153(固定值)。

設置完成保存后,可能等幾分鐘生效。可以通過ping我們的域名來檢驗設置是否生效。而后,在./source目錄下新建文件CNAME(無后綴名),文件中寫上我們要綁定的域名,例如dukecuichen.com,再hexo generate生成靜態文件,并hexo deploy部署到GitHub上。這時就可以通過http://dukecuichen.com/ 訪問我們的博客啦

九、一些建議

Hexo同樣具有良好的擴展性,你可以安裝很多第三方的插件,例如sitemap,安裝sitemap插件之后,你可以生成自己的站點地圖,然后將你的sitemap提交給谷歌或者百度,讓這些搜索引擎可以抓取到你的博客的內容,提高訪問量。

  1. 安裝sitemap插件
npm install hexo-generator-sitemap --save
  1. 設置啟用sitemap插件,在根目錄打開配置文件_config.yml,增加以下內容
#sitemap
sitemap:
  path: sitemap.xml

之后再執行hexo server,訪問 http://localhost:4000/sitemap.xml ,即可看到站點地圖,說明我們的設置生效。

總結

以上就是通過Hexo搭建個人博客的全部流程,但是對一些具體的細節文章可能并沒有闡述,同時在實際的操作中可能會遇到各種各樣的問題,大家可以自行參考網上大量的解決方案。因為我自己并不是做前端,對前端的知識也知之甚少,通過搭建博客的過程也多少了解了一些,因此可能存在理解或操作上的錯誤,歡迎大家批評指正。最后,在搭建整個博客的過程中,大量參考了以下三篇文章,在此對原文的作者表達感謝!
HEXO+Github,搭建屬于自己的博客:
http://www.lxweimin.com/p/465830080ea9
Hexo搭建Github靜態博客:http://www.cnblogs.com/zhcncn/p/4097881.html
Hexo在github上構建免費的Web應用:http://blog.fens.me/hexo-blog-github/

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 229,885評論 6 541
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 99,312評論 3 429
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 177,993評論 0 383
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,667評論 1 317
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,410評論 6 411
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,778評論 1 328
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,775評論 3 446
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,955評論 0 289
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,521評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,266評論 3 358
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,468評論 1 374
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,998評論 5 363
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,696評論 3 348
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,095評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,385評論 1 294
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,193評論 3 398
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,431評論 2 378

推薦閱讀更多精彩內容