用hexo搭建本身的我的博客

這不是一篇Hexo教程，僅是本人博客的搭建記錄。
有興趣的同窗能夠關注：xuebin.me

準備工做

• Hexo：快速、簡潔且高效的博客框架,官網有中文文檔

• NexT：Hexo適用的主題

• LeanCloud：數據庫

• GitHub：博客就發佈在GitPage

安裝&配置 Hexo

安裝 Hexo

全局安裝 Hexo 官方的腳手架

$ npm install -g hexo-cli

而後初始化博客，並安裝依賴包

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

<folder> 就是博客的本地文件夾

配置 Hexo

網站配置： <folder>/_config.yml

參數	描述
title	網站標題
subtitle	網站副標題
description	網站描述
author	您的名字
language	網站使用的語言

參數	描述	默認值
url	網址
root	網站根目錄
permalink	文章的連接格式	:year/:month/:day/:title/

添加站內搜索

添加百度/谷歌/本地 自定義站點內容搜索

安裝 hexo-generator-searchdb

$ npm install hexo-generator-searchdb --save

網站配置： <folder>/_config.yml

新增如下內容到任意位置：

search:
  path: search.xml
  field: post
  format: html
  limit: 10000

更多網站參數參考：https://hexo.io/zh-cn/docs/configuration.html

測試 Hexo

新建文章

$ hexo new [layout] <title>

運行命令新建一篇文章。

啓動服務

$ hexo server
#或
$ hexo s

啓動服務器。默認狀況下，訪問網址爲：http://localhost:4000/。
server後面能夠加些參數達到不一樣效果：

選項	描述
-p ，--port	重設端口
-s ，--static	只使用靜態文件
-l ，--log	啓動日記記錄，使用覆蓋記錄格式
-d ，--debug	開啓調試模式

生成靜態文件

$ hexo generate
#或
$ hexo g

選項	描述
-d ，--deploy	文件生成後當即部署網站
-w ，--watch	監視文件變更

清除緩存

$ hexo clean

更多命令參考：https://hexo.io/zh-cn/docs/commands.html

安裝&配置 NexT 主題

安裝 NexT 主題

使用git克隆最新版本

$ cd <folder>
$ git clone https://github.com/iissnan/hexo-theme-next themes/next

或者直接將 hexo-theme-next 下載下來放到 Hexo 站點目錄下的 themes/next 目錄中

啓用 NexT 主題

網站配置： <folder>/_config.yml
搜索 theme 關鍵字，並將其值更改成 next

theme: next

驗證 NexT 主題

最好先使用 hexo clean 清除 Hexo 的緩存。

運行 hexo s --debug 啓動本地站點，並開啓調試模式。

啓動服務過程當中能夠觀察命令行輸出是否有任何異常信息。當命令行輸出中提示出：

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

此時便可使用瀏覽器訪問 http://localhost:4000 ，檢查站點是否正確運行。

主題設定

主題配置： <folder>/theme/next/_config.yml

搜索 scheme 關鍵字，選擇使用的主題樣式，將你需用啓用的 scheme 前面註釋 # 去掉並將其餘兩個 scheme 加上註釋便可。

• Muse - 默認 Scheme，這是 NexT 最初的版本，黑白主調，大量留白

• Mist - Muse 的緊湊版本，整潔有序的單欄外觀

• Pisces - 雙欄 Scheme，小家碧玉似的清新

#scheme: Muse
#scheme: Mist
scheme: Pisces

設置 菜單

主題配置： <folder>/theme/next/_config.yml

搜索 menu 關鍵字

設置 頭像

主題配置： <folder>/theme/next/_config.yml

新增字段 avatar,值設置成頭像的連接地址

設置 做者暱稱

主題配置： <folder>/theme/next/_config.yml

搜索 author 關鍵字

設置 做者暱稱

主題配置： <folder>/theme/next/_config.yml

搜索 description 關鍵字

設置 首頁列表是否顯示 閱讀更多

主題配置： <folder>/theme/next/_config.yml

搜索 auto_excerpt 關鍵字

將 enable 設置爲 true

length 設置爲指望截取保留的文章長度

集成第三方服務

主題配置： <folder>/theme/next/_config.yml

多說評論

搜索 duoshuo_shortname 關鍵字，值使用 多說域名

搜索 duoshuo_hotartical 關鍵字，將值設置爲 true，並取消註釋

暢言評論

打開評論模板<folder>/themes/next/layout/_partials/comments.swig

在 {% endif %} 前面添加暢言評論

<!--暢言評論-->
  <section id="comments">
    <!--高速版，加載速度快，使用前需測試頁面的兼容性-->
    <div id="SOHUCS" sid="{{ page.title }}"></div>
    <script>
      (function(){
        var appid = 'cysMNUGiM',//cyssdFaue
        conf = '746691ef70d87f9e0b14acf9e9f473df';//18694a97589062f29188dcc5b3c30703
        var doc = document,
        s = doc.createElement('script'),
        h = doc.getElementsByTagName('head')[0] || doc.head || doc.documentElement;
        s.type = 'text/javascript';
        s.charset = 'utf-8';
        s.src =  'http://assets.changyan.sohu.com/upload/changyan.js?conf='+ conf +'&appid=' + appid;
        h.insertBefore(s,h.firstChild);
        window.SCS_NO_IFRAME = true;
      })()
    </script>
  </section>

添加已開啓的暢言插件

<!--暢言插件-->
  <!-- 代碼1：放在頁面須要展現的位置  -->
  <!-- 若是您配置過sourceid，建議在div標籤中配置sourceid、cid(分類id)，沒有請忽略  -->
  <!--打賞-->
  <div id="cyReward" role="cylabs" data-use="reward" style="text-align: center;"></div>
  <!--評論表情-->
  <div id="cyEmoji" role="cylabs" data-use="emoji"></div>
  <!-- 代碼2：用來讀取評論框配置，此代碼需放置在代碼1以後。 -->
  <!-- 若是當前頁面有評論框，代碼2請勿放置在評論框代碼以前。 -->
  <!-- 若是頁面同時使用多個實驗室項目，如下代碼只須要引入一次，只配置上面的div標籤便可 -->
  <script type="text/javascript" charset="utf-8" src="http://changyan.itc.cn/js/lib/jquery.js"></script>
  <script type="text/javascript" charset="utf-8" src="https://changyan.sohu.com/js/changyan.labs.https.js?appid=cyssdFaue"></script>

百度統計

搜索新增 baidu_analytics 關鍵字，值使用 hm.js? 後面那串統計腳本 id

閱讀次數統計（LeanCloud）

參考：配置LeanCloud

更多配置參考：http://theme-next.iissnan.com/getting-started.html

建立GitHub

建立好帳號以後，先建立一個倉庫 New repository

進入 Settings ，找到下方的 GitHub Pages ，點擊Choose a theme選擇主題（這個無所謂，最後都會被替換），Source指向的就是GitPage站點所在的分支。

GitHub會給分配一個二級域名，GitHub暱稱+github.io

部署網站

安裝 hexo-deployer-git

$ npm install hexo-deployer-git --save

配置

網站配置： <folder>/_config.yml

搜索 deploy 關鍵字

• type：git

• repo：github提交地址

• branch：提交分支

部署

$ hexo deploy
#或
$ hexo d

部署網站。
若是想在部署以前預先生成下靜態文件，可使用：

$ hexo deploy -g
#或
$ hexo deploy --generate

$ hexo deploy -g與$ hexo generate -d的效果實際上是相同的

本地站點不要放在Git上，不然執行deploy的時候會把本地站點提交上去

若是想將本地站點放到GitHub實現自動部署能夠配合 DaoCloud 實現。