這篇文章最初發表在我的個人博客上:dukecui技術博客,歡迎大家訪問!
作為一個程序猿,或者立志希望在程序猿的道路上有所發展的騷年們,相信都應該有一個屬于自己的技術博客。至于為什么需要有自己的技術博客,Android大神stormzhang的這篇文章,已經講的很清楚了,大家可以去學習下,相信你讀完肯定會有感悟,而我自己也深受其影響和鼓舞。于是花了兩三天的時間,折騰了一個自己的博客出來,同時寫下這篇文章記錄和總結自己搭建博客的過程,并希望能為后來者提供一個較為完善可用的參考。
說起博客的搭建,從萌生這個想法開始到現在基本的搭建完成也有將近快一個月的時間。這期間,不得不再次感嘆下自己的執行力。首先從3月份自己做的兩個小的demo說起,這個過程學習到了很多Android開發APP的知識,自己在開發的過程中遇到不少的問題,也花了很多時間去解決。期間曾想記錄下學到的一些關鍵知識點和收獲,并希望通過晚上的時間搭建好自己的博客,但在項目做到關鍵的時候,總是會晚上加班到比較晚,還有一種今天不解決這個問題就不結束的糾結。這就導致搭建博客的事情一拖再拖,直到兩個demo做到自己基本滿意之后,開始休假,終于到清明假期回來才算真正開始完成這件事情。
搭建博客,我首先想到的是Strikingly,一個自動建站的工具,雖說該公司原來的主要業務和服務器均在國外,但他們團隊目前在發展國內的業務,在國內的產品“上線啦”仍在測試階段。有興趣可以了解下這個公司,履歷還是非常牛逼的,第一個獲得YC孵化的中國團隊。但是在使用的過程中我發現,博客編輯系統似乎有些薄弱,無法插入代碼文本,也不支持MarkDown編輯,這使得我最終放棄了這個方案。于是開始嘗試在簡書上撰寫自己的第一篇博文,不得不說簡書滿足了我的對博客的大部分需求,MarkDown編輯,簡單易用,干凈清爽,還有豐富的社交系統等等,因此也為很多技術達人所喜愛。但建成之后總感覺缺了點什么,怪怪的,對,我怎么向別人推薦我的主頁呢?域名的參數居然是一個字符串,連我的id都沒有啊,這也太low了吧,萬一我以后出名了可怎么辦?夢想還是要有的對吧。。。于是索性下決心搭一個自己的博客,也算是一個嘗試的過程,而且還能接觸到前端的一些知識,做互聯網做技術的就是要多嘗試多接觸多折騰,多學習最前沿的知識。。。
好吧,廢話終于說完了,下面是正題,如何通過Hexo+GitHub搭建個人博客。
首先,這里有Hexo的官方網站,上面有非常詳細的內容,大家可以直接參考:Hexo
一、環境的配置
- Node.js
因為Hexo是一個基于Node.js的靜態博客框架,因此需要先安裝Node.js環境,下載地址:Node.js - 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
- 首先在你的GitHub上新建一個Repository,倉庫名的固定寫法為 your_user_name.github.io
- 配置SSH-Key,網上有很多方法可供大家參考
- 修改根目錄的網站配置文件_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。值得注意的是,每一個: 后面都必須有一個空格,否則會引起錯誤。
- 安裝Git包,執行以下命令
npm install hexo-deployer-git --save
- 部署到GitHub上,執行以下的命令
hexo deploy
現在我們可以通過訪問 http://dukecuichen.github.io/ 來訪問我們自己的博客啦!到此,我們的博客已經基本建立完成,當然,下面要講怎么使用嘍~
六、使用
- 新建一篇博文可通過以下的命令
hexo new "name"
其中name為博文的名字,建立完成之后,可以在./source/_posts文件夾下發現我們剛剛建立的 name.md文件。使用你熟悉的編輯器打開,便可以進行博文的撰寫。博文支持MarkDown語法的編寫,下面是一個示例文件的內容
---
title: name
date: 2016-04-06 10:34:21
tags:
- 開始
- 日志
categories:
- 日志
---
我的第一篇博文。。。。。。
- 博文寫好之后,在每次發布之前,我們要先將寫好的博客生成靜態文件,執行以下命令
hexo generate
之后生成的文件會放在./public目錄下,這便是我們將要部署到GitHub上的全部內容。
- 靜態文件生成之后,便可以部署到GitHub上
hexo deploy
再重新打開我們的博客 http://dukecuichen.github.io/ 已經可以看到剛剛新加入的博文
七、主題
Hexo提供了豐富的主題可供我們選擇和使用,在./themes目錄下存放主題。剛才默認生成的博客用的就是默認的主題landscape。這里有在GitHub上Hexo所有的主題,可以訪問https://github.com/hexojs/hexo/wiki/Themes 另外我們總是站在巨人的肩膀之上,感謝前人的歸納總結,推薦兩篇Hexo主題推薦的文章:
- 一篇是知乎上的:有哪些好看的 Hexo 主題?
- 一篇是簡書上的:Hexo博客主題推薦
我自己的博客采用了知名度最高的Next主題,其他主題沒有過多的嘗試,也不敢評論。Next主題集成了非常多的第三方服務可供選擇,例如評論系統,統計系統,分享服務,搜索服務等。這些第三方的服務可以極大的提高博客的體驗。
八、設置域名
博客搭建好之后,我們可以通過http://dukecuichen.github.io/ 類似的域名進行訪問,而且GitHub提供這樣的服務是完全免費的。當然我們也可以通過我們自己的域名來進行訪問,這就需要首先購買我們想要的域名。我是在DNSPod上購買的域名并進行管理操作的,具體的購買方式可以去DNSPod的主頁查看。購買成功后,下面來看如何綁定我們的域名。在DNSPod的控制臺,我們點擊添加記錄,設置主機記錄為@,類型為A,到IP 192.30.252.153(固定值)。
九、一些建議
Hexo同樣具有良好的擴展性,你可以安裝很多第三方的插件,例如sitemap,安裝sitemap插件之后,你可以生成自己的站點地圖,然后將你的sitemap提交給谷歌或者百度,讓這些搜索引擎可以抓取到你的博客的內容,提高訪問量。
- 安裝sitemap插件
npm install hexo-generator-sitemap --save
- 設置啟用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/