使用Hexo+GitHub搭建及配置個人博客

02-12

前言

現在用GitHub+各種靜態博客框架來搭建博客系統已經非常常見了，如：Hexo、Jekyll、Octopress、WordPress...等。由於其博客系統維護方便、配置簡單、原生支持MD語法等優點等一直深受碼農們的喜愛。經過一番查找與對比，博主最終還是選擇了Hexo，理由有以下：主題選擇多且美、配置異常簡單、編譯文章速度極快等優點...好了，話不多說，咱們一探究竟。

搭建前的步驟

1. 在GitHub上創建好Repository，name必須以http://username.github.io的形式來命名，否則不能成功部署

2. 提前安裝好Git和Node.js（已安裝的略過）

3. 安裝Hexo：安裝Node.js後即可通過npm來安裝Hexo：

$ npm install hexo-cli -g

初始化項目

執行以下命名創建並初始化項目，會自動幫我們下載/生成好相關模板文件，關於各文件及文件夾的意義，可參考官方文檔：

$ hexo init <folder>$ cd <folder>$ npm install

初始化完後，先安裝hexo-deployer-git插件，因為後續我們將把代碼上傳至GitHub：

$ npm install hexo-deployer-git --save

站點基本配置

在主目錄下的_config.yml中，配置以下基礎信息，其中language修改為zh-Hans即可改成簡體中文，對應主題文件夾中的languages文件夾下的zh-Hans.yml，自己看著來改就好了，有些主題是zh-CN.yml

# Sitetitle: codezjxs Homesubtitle: description: author: codezjxlanguage: zh-Hanstimezone:

接下來配置GitHub設置，類型設置為git，指定好repo地址，branch必須設置為master，因為GitHub Page只會從mater分支生成。（**注意有坑**：這裡我們需要單獨設置好在GitHub上使用name和email，否則將會使用global的user.name和user.email，囧~~）：

deploy: type: git repo: codezjx/codezjx.github.io name: codezjx email: code.zjx@gmail.com branch: master

題外話，這裡簡單說一下hexo-deployer-git插件的工作流程：當執行部署操作的時候，首先會自動初始化git倉庫（位置在.deploy_git中），並關聯到指定repo與branch，後續public文件夾中自動生成的頁面代碼將會拷貝至此目錄中進行代碼管理。若修改了name和email，需要刪掉整個.deploy_git再重新部署才會生效。有興趣的可以看下hexo-deployer-git的源碼。

主題配置

首先當然是下載主題了，博主用得是Hexo上比較熱門的iissnan/hexo-theme-next主題，簡潔大方好看嘿嘿，clone到themes目錄中即可：

$ cd your-hexo-site$ git clone iissnan/hexo-theme-next themes/next

修改主目錄下的_config.yml，指向我們剛剛clone的主題：

theme: next

在對應主題目錄下，同樣有個_config.yml文件，可以對主題進行一些個性化的定製。例如在Next主題中，我們可以設置社交賬號及其對應的icons。若對Next主題有興趣的，可以參考官方的配置文檔：

social: GitHub: codezjx (codezjx) Twitter: https://twitter.com/codezjx StackOverflow: User codezjx Weibo: Sina Visitor Systemsocial_icons: enable: true GitHub: github Twitter: twitter StackOverflow: stack-overflow Weibo: weibo

部署到GitHub上

主要用的是三部曲：

- hexo g: 生成靜態文件，在public文件夾中（hexo generate的縮寫）
- hexo s: 生成本地預覽，默認情況下，訪問網址為： http://localhost:4000/
- hexo d: 部署並提交代碼至GitHub中（hexo deploy縮寫）

還有一個比較重要的命令：

- hexo clean: 清除緩存文件 (db.json) 和已生成的靜態文件 (public)。在某些情況（尤其是更換主題後），如果發現您對站點的更改無論如何也不生效，您可能需要運行該命令。

最後，打開我們創建好的GitHub Page頁面：http://username.github.io，這個時候應該能看到Next主題默認的樣式了。

關於分支

前面已經提到了，GitHub Page會根據master分支的內容來生成頁面，並且master分支的內容也只包含public文件夾里自動生成的文件。那麼我們hexo的配置、主題、Markdown源文件該存儲到哪呢？這樣以後重裝了系統，或者切換了電腦，我們也可以愉快的寫博客了。

有兩種方式，可以新建一個獨立的Repo來管理（感覺有點多餘），或者直接新建一條分支。博主採用是新建分支的方式，直接`$ git branch hexo`來新建一條hexo分支，並把相關文件提交上去即可。

那麼該提交什麼文件呢？其實在最初執行`$ hexo init <folder>`的時候，hexo會自動生成一個`.gitignore`文件（按照hexo的本意，主目錄裡面的各種源文件也是得託管的），按照裡面的指示排除掉相關文件即可。最終提交的應該有以下文件夾：

├── _config.yml├── package.json├── .gitignore├── scaffolds│ ├──draft.md│ ├──page.md│ └──post.md├── source│ └── _posts└── themes

至此，博客系統已經基本搭好了，跟著hexo官網的writing章節開始愉快的寫博客吧。當然，想更加個性化一點的話，可以上萬網去買個域名，好吧先寫到這，Have fun~

點擊此處閱讀原文：使用Hexo+GitHub搭建及配置個人博客