最近這一陣子把博客托管到 coding net 上去了，并使用Hexo框架和NextT主題來搭建博客，正如部分網(wǎng)友所說的那樣，真是踩坑無數(shù)。為此記錄下我的搭建過程，有需要的網(wǎng)友也可參考一下，點(diǎn)擊查看本人博客網(wǎng)站 。(以下內(nèi)容針對Windows平臺，并且筆者假設(shè)讀者對 git 有基本的了解，可以參考我另一篇博文關(guān)于git的基本使用)
使用Hexo框架
安裝Hexo
注意，使用 Hexo 框架前確保已經(jīng)安裝了 node.js 運(yùn)行環(huán)境(可查看菜鳥教程下載安裝) 和 git for windows，需要使用 git bash 命令窗口，雖然使用 cmd 控制臺也可以，但是不建議使用 cmd ，具體原因你懂得。
安裝好 node.js 的同時(shí)也會安裝 npm 這個(gè)模塊管理工具了。
用 npm install hexo-cli -g 命令下載安裝 hexo-cli 時(shí)速度極其之慢。因此可以先下載安裝淘寶的和npm功能一樣的 cnpm。
npm install -g cnpm --registy=https://registry.npm.taobao.org
安裝 cnpm 以后使用 cnpm 安裝 hexo-cli
cnpm install hexo-cli -g
//參數(shù)-g是全局安裝的意思
其實(shí) cnpm 在使用上與 npm 沒什么區(qū)別，就多了個(gè) c 字母，當(dāng)然，理論上它的下載安裝速度會比 npm 快很多，當(dāng)你覺得 用 npm 很龜速時(shí)，嘗試下 cnpm 吧！( 以下還是會以 npm 進(jìn)行說明)
安裝完 hexo 后，可用 hexo -v 查看版本，是否安裝成功。
初始化Hexo目錄結(jié)構(gòu)
新建一個(gè)目錄，cd 進(jìn)入
使用命令:
hexo init
將會在該目錄下初始化Hexo的目錄結(jié)構(gòu)，如下圖所示：
同時(shí)建議也安裝好 hexo-deployer-git 插件,在到時(shí)部署到遠(yuǎn)程倉庫要用到，命令:
npm install hexo-deployer-git --save
| Name | Description |
|---|---|
| node_modules | 插件模塊，包括Hexo相關(guān)的插件 |
| public | 公共資源目錄，存放生成的站點(diǎn)文件 |
| scaffolds | 模板目錄，可根據(jù)里面的文件生成文章 |
| source | 資源文件夾，存放發(fā)布文章或草稿 |
| themes | 主題文件夾 |
| .gitignore | 忽略部署的文件或目錄 |
| _config.yml | 站點(diǎn)配置文件，可在里面設(shè)置站點(diǎn)的各種參數(shù) |
| db.json | 數(shù)據(jù)依賴 |
| packgae.json | 版本依賴 |
圖中各目錄或文件大致介紹：
| Name | Description |
|---|---|
| node_modules | 插件模塊，包括Hexo相關(guān)的插件 |
| public | 公共資源目錄，存放生成的站點(diǎn)文件 |
| scaffolds | 模板目錄，可根據(jù)里面的文件生成文章 |
| source | 資源文件夾，存放發(fā)布文章或草稿 |
| themes | 主題文件夾 |
| .gitignore | 忽略部署的文件或目錄 |
| _config.yml | 站點(diǎn)配置文件，可在里面設(shè)置站點(diǎn)的各種參數(shù) |
| db.json | 數(shù)據(jù)依賴 |
| packgae.json | 版本依賴 |
生成頁面類別
hexo new page "category_name"
生成一個(gè)頁面目錄在 source目錄下，通常指的是分類頁面
編寫文章
生成文章命令:
hexo new [layout] "article_name"
//這個(gè)layout 是可選的，它就是指 scaffold 模板目錄下的模板文件名，如果指定layout名，hexo 將會根據(jù) layout 給文章生成 front-matter，格式頭，指定文章的標(biāo)簽，類別，名字等。
執(zhí)行這個(gè)命令將會默認(rèn)在source目錄中的 _posts 中生成一個(gè)名為 article_name.md 的文章，注意_posts中的文章就是要發(fā)表的文章，如果你只是想作為草稿文章，可以在 source 目錄新建一個(gè)_drafts 目錄，并在 config.yml 站點(diǎn)配置文件中修改 default_layout 參數(shù)值為: draft，這樣在執(zhí)行上面的命令時(shí)候就會默認(rèn)在 _drafts 目錄下生成文章
發(fā)表文章
hexo publish [layout] <article_name>
//如果有 _drafts 目錄，就會自動將文章發(fā)表到 _posts 目錄下
生成站點(diǎn)文件
hexo generate
//可簡寫為 hexo g
會將 source 目錄中除了 _ 開頭的目錄或文件生成到 public 文件夾下。
部署站點(diǎn)
hexo deploy
//可簡寫為 hexo d
注意，我這里給出的是正常流程的命令。關(guān)于站點(diǎn)的配置，如站點(diǎn)名字，url，遠(yuǎn)程倉庫名等還需要自己配置好。
更多詳細(xì)介紹，可以參考 <a target="_blank">Hexo 文檔</a>,在這里我就不過多敘述了。
NexT 主題使用
安裝NextT
cd hexo_home
git clone https://github.com/iissan/hexo-theme-next themes-next
//執(zhí)行該命令將會將 next 主題克隆到 themes 目錄下，原本該目錄已經(jīng)有了一個(gè)名為 landscape 的主題.
克隆完了后修改_config.yml 將主題修改為 next.
驗(yàn)證主題能否成功應(yīng)用:
hexo g
hexo s -debug
//執(zhí)行完畢訪問 localhost:4000 看是否正常, 否則根據(jù) debug 信息看下哪里出錯了。
主題設(shè)定
該主題有三種外觀，分別是：
- Muse - 默認(rèn)scheme,黑白主調(diào)，大量留白
- Mist – Muse的緊湊版本，整潔有序的單欄外觀
- Pisces – 雙欄 scheme ,小清新
搜索scheme關(guān)鍵字，切換scheme通過更改主題配置文件，就是 next 目錄下的 _config.yml 文件。
語言設(shè)定
設(shè)置側(cè)欄
設(shè)置側(cè)欄位置
sidebar:
position: left
設(shè)置側(cè)欄顯示的時(shí)機(jī)
修改 sidebar.display 的值，支持的選項(xiàng)有:
- post -默認(rèn)行為，在文章頁面(擁有目錄列表)時(shí)顯示
- always -在所有頁面中顯示
- hide -在所有頁面中都隱藏(可以手動展開)
- remove -完全移除
更多詳細(xì)介紹請參考<a target="_blank">NexT主題文檔.</a>
部署到coding net
首先在coding net 上創(chuàng)建一個(gè)倉庫，倉庫名為: <你的用戶名>.coding.me
開啟 coding pages 服務(wù)請參考<a >coding pages幫助文檔</a>
本人是把博客部署到站點(diǎn)的字目錄下的，如: https://yekongle.coding.me/blog , 就是我的博客站點(diǎn)。
如果你也想部署到子目錄下 (假設(shè)該子目錄是 blog) , 需要注意一下:
所謂的子目錄不是指在 your_username.coding.me 倉庫下有個(gè)名為 blog
的目錄，而是另一個(gè)倉庫。你需要新建一個(gè)名為 blog 的倉庫，并開啟 coding pages 分支服務(wù)，如果是 github 就開啟 gh-pages 分支服務(wù) 。將hexo站點(diǎn)配置文件的 url 設(shè)為: https://your_username.coding.me/blog , 并把 root 設(shè)為 /blog/
修改站點(diǎn)配置文件 deploy 參數(shù)內(nèi)容
至此，就完成了基本的搭建，先用命令在本地服務(wù)器查看內(nèi)容是否正確。
hexo g
hexo s
確定無誤后再部署到遠(yuǎn)程倉庫
hexo d
這時(shí)訪問 https://your_username.coding.me/blog 就可以看到你的博客了。
