目錄：

• 1.安裝Hexo
• 2.部署Hexo
• 3.Hexo命令
• 4.一些報(bào)錯(cuò)處理
• 5.博客管理
• 6.插件（RSS,、Sitemap）
• 7.評(píng)論設(shè)置
• 8.404頁(yè)面
• 9.統(tǒng)計(jì)
• 10.更新
• 11.總結(jié)
• 12.參考引用
• 13.搭建博客相關(guān)網(wǎng)站

簡(jiǎn)述

本文主要講解Hexo安裝時(shí)遇到的坑,，Hexo安裝之后的使用教程，Hexo安裝需要的環(huán)境和教程,，請(qǐng)自行百度,、谷歌。

1.安裝Hexo

 $ npm install -g hexo

坑1

這里可能安裝失敗,，可能權(quán)限不夠,，在命令前加sudo

 $ sudo npm install -g hexo

2.部署Hexo

 $ hexo init

注：這個(gè)命令會(huì)初始化博客的目錄，所以,，執(zhí)行這個(gè)命令時(shí),，在你想創(chuàng)建的目錄下執(zhí)行，就自動(dòng)生成到對(duì)應(yīng)目錄下,。

執(zhí)行命令生,，會(huì)在當(dāng)前命令的路徑下，生成以下文件：

    .
    ├── .deploy
    ├── public
    ├── scaffolds
    ├── scripts
    ├── source
    |   ├── _drafts
    |   └── _posts
    ├── themes
    ├── _config.yml
    └── package.json

• .deploy：執(zhí)行hexo deploy命令部署到GitHub上的內(nèi)容目錄
• public：執(zhí)行hexo generate命令,，輸出的靜態(tài)網(wǎng)頁(yè)內(nèi)容目錄
• scaffolds：layout模板文件目錄,，其中的md文件可以添加編輯
• scripts：擴(kuò)展腳本目錄，這里可以自定義一些javascript腳本
• source：文章源碼目錄,，該目錄下的markdown和html文件均會(huì)被hexo處理,。該頁(yè)面對(duì)應(yīng)repo的根目錄，404文件,、favicon.ico文件,，CNAME文件等都應(yīng)該放這里，該目錄下可新建頁(yè)面目錄,。
• _drafts：草稿文章
• _posts：發(fā)布文章
• themes：主題文件目錄
• _config.yml：全局配置文件,，大多數(shù)的設(shè)置都在這里
• package.json：應(yīng)用程序數(shù)據(jù)，指明hexo的版本等信息,，類似于一般軟件中的關(guān)于按鈕

3.Hexo命令

Hexo下,，通過(guò) _config.yml 設(shè)置博客，可以想象成我們用的軟件里的設(shè)置一樣,，只是它通過(guò)一個(gè)文件列出這些參數(shù),，然后讓我們填寫(xiě)和修改。

• 全局設(shè)置

在你博客目錄下有一個(gè)文件名_config.yml,，打開(kāi)可以配置信息,。

• 局部頁(yè)面

在你博客目錄下 \themes\你使用的主題\_config.yml

• 寫(xiě)博客相關(guān)命令

    Hexo常用命令：

    hexo new "postName"       #新建文章
    hexo new page "pageName"  #新建頁(yè)面
    hexo generate             #生成靜態(tài)頁(yè)面至public目錄
    hexo server               #開(kāi)啟預(yù)覽訪問(wèn)端口（默認(rèn)端口4000，'ctrl + c'關(guān)閉server）
    hexo deploy               #將.deploy目錄部署到GitHub

當(dāng)然,，如果每次輸入那么長(zhǎng)命令,，那么一定想到用簡(jiǎn)寫(xiě)：

    hexo n == hexo new
    hexo g == hexo generate
    hexo s == hexo server
    hexo d == hexo deploy

其它的，還可以復(fù)合命令：

    hexo deploy -g
    hexo server -g

有時(shí)候生成的網(wǎng)頁(yè)出錯(cuò)了，而生成的rss其實(shí)沒(méi)有清除,，那么用下面的命令,，在重新生成吧

    $ hexo clean

當(dāng)本地調(diào)試出現(xiàn)詭異現(xiàn)象時(shí)候，請(qǐng)先使用 hexo clean 清理已經(jīng)生成的靜態(tài)文件后重試,。

注：Hexo原理就是hexo在執(zhí)行hexo generate時(shí)會(huì)在本地先把博客生成的一套靜態(tài)站點(diǎn)放到public文件夾中,，在執(zhí)行hexo deploy時(shí)將其復(fù)制到.deploy文件夾中。Github的版本庫(kù)通常建議同時(shí)附上README.md說(shuō)明文件,，但是hexo默認(rèn)情況下會(huì)把所有md文件解析成html文件,，所以即使你在線生成了README.md，它也會(huì)在你下一次部署時(shí)被刪去,。怎么解決呢,？
在執(zhí)行hexo deploy前把在本地寫(xiě)好的README.md文件復(fù)制到.deploy文件夾中，再去執(zhí)行hexo deploy,。

4.一些報(bào)錯(cuò)處理

坑2

• 一

  ERROR Plugin load failed: hexo-server
  原因：
  Besides, utilities are separated into a standalone module. hexo.util is not reachable anymore.
  解決方法,，執(zhí)行命令：
  sudo npm install hexo-server

• 二

  執(zhí)行命令hexo server，有如下提示：
  Usage: hexo
  ….
  原因：
  我認(rèn)為是沒(méi)有生成本地服務(wù)
  解決方法,，執(zhí)行命令：
  npm install hexo-server --save
  提示：[email protected] node_modules/hexo-server

• 三

  白板和Cannot GET / 幾個(gè)字
  原因:
  由于2.6以后就更新了,，我們需要手動(dòng)配置些東西，我們需要輸入下面三行命令：

    npm install hexo-renderer-ejs --save
    npm install hexo-renderer-stylus --save
    npm install hexo-renderer-marked --save
    這個(gè)時(shí)候再重新生成靜態(tài)文件,，命令：
    hexo generate （或hexo g）
    啟動(dòng)本地服務(wù)器：
    hexo server （或hexo s）

5.博客管理

上面命令中,，其實(shí)生成文章，可以直接把寫(xiě)好的文章插入到目錄/_posts 下面,，后綴為.MD就行,，在文章頭部固定格式：

    title: Mac提高使用效率的一些方法   #文章的標(biāo)題，這個(gè)才是顯示的文章標(biāo)題,，其實(shí)文件名不影響
    date: 2015-09-01 20:33:26      #用命令會(huì)自動(dòng)生成,，也可以自己寫(xiě)，所以文章時(shí)間可以改
    categories: technology         #文章的分類,，這個(gè)可以自己定義
    tags: [Mac,效率,快捷方式]        #tag,，為文章添加標(biāo)簽，方便搜索
    ---

當(dāng)然,，里面有很多東西的，如果你專注于寫(xiě)作,，那么可以不用太關(guān)心了,，比如tags標(biāo)簽可以寫(xiě)成下面那樣，因?yàn)閔exo文章的頭部文件是用AML來(lái)寫(xiě)的,。

    tags:
    - tag1
    - tag2

如果在博客文章列表中,，不想全文顯示，可以增加 <!--more-->, 后面的內(nèi)容就不會(huì)顯示在列表。

     <!--more-->

6.插件

• 安裝插件

    $ npm install <plugin-name> --save

• 添加RSS

    npm install hexo-generator-feed

  然后,，到博客目錄 /public 下,，如果沒(méi)有發(fā)現(xiàn)atom.xml，說(shuō)明命令沒(méi)有生效?。,。?樓主就是在這里被坑了次)
  解決方法：

    $ npm install hexo-generator-feed --save

  這個(gè)命令來(lái)自hexo-generator-feed

    Install
       $ npm install hexo-generator-feed --save
     Hexo 3: 1.x
     Hexo 2: 0.x
    Options
       You can configure this plugin in _config.yml.
  
      feed:
         type: atom
         path: atom.xml
         limit: 20
  
        type - Feed type. (atom/rss2)
        path - Feed path. (Default: atom.xml/rss2.xml)
        limit - Maximum number of posts in the feed (Use 0 or false to show all posts)

其中可以選擇：
然后在 Hexo 根目錄下的 _config.yml 里配置一下

    feed:
        type: atom
        path: atom.xml
        limit: 20
    #type 表示類型, 是 atom 還是 rss2.
    #path 表示 Feed 路徑
    #limit 最多多少篇最近文章

最后,，在 hexo generate之后,，會(huì)發(fā)現(xiàn)public文件夾下多了atom.xml！

例如要訂閱我的blog只要輸入/atom就可以搜尋到啦,！

• 添加Sitemap

  Sitemap 的提交主要的目的,，是要避免搜索引擎的爬蟲(chóng)沒(méi)有完整的收錄整個(gè)網(wǎng)頁(yè)的內(nèi)容，所以提交 Sitemap 是能夠補(bǔ)足搜索引擎的不足,，進(jìn)而加速網(wǎng)頁(yè)的收錄速度,，達(dá)到搜尋引擎友好的目的。

    $ npm install hexo-generator-sitemap --save

這個(gè)命令來(lái)自hexo-generator-sitemap

    Install
        $ npm install hexo-generator-sitemap --save

        Hexo 3: 1.x
        Hexo 2: 0.x
    Options
        You can configure this plugin in _config.yml.

        sitemap:
            path: sitemap.xml
        path - Sitemap path. (Default: sitemap.xml)

同樣可以選擇：
在 Hexo 根目錄下的 _config.yml 里配置一下

        sitemap:
           path: sitemap.xml
           #path 表示 Sitemap 的路徑. 默認(rèn)為 sitemap.xml.

對(duì)于國(guó)內(nèi)用戶還需要安裝插件 hexo-generator-baidu-sitemap, 顧名思義是為百度量身打造的. 安裝

        $ npm install hexo-generator-baidu-sitemap --save

然后在 Hexo 根目錄下的 _config.yml 里配置一下

       baidusitemap:
            path: baidusitemap.xml

為了博客有更好的展示率, 最好的方式是通過(guò)搜索引擎, 提交 Sitemap文件是一個(gè)方式,，具體可參考：

• Hexo 優(yōu)化與定制(二) | Kang Lu's Blog

• ｜Hexo優(yōu)化｜如何向google提交sitemap（詳細(xì)） | Fiona's Blog

• 其它插件
  Plugins · hexojs/hexo

7.評(píng)論設(shè)置

在Hexo中,，默認(rèn)使用的評(píng)論是國(guó)外的Disqus,不過(guò)因?yàn)閲?guó)內(nèi)的”網(wǎng)絡(luò)環(huán)境”問(wèn)題，我們改為國(guó)內(nèi)的多說(shuō)評(píng)論系統(tǒng),。

需要說(shuō)明的是 short_name:字段,，這個(gè)字段為你多說(shuō)填寫(xiě)的站點(diǎn)名字，比如我的域名：ihtcboy.,，那么我的short_name:"ihtcboy"

8.404頁(yè)面

GitHub Pages 自定義404頁(yè)面非常容易,，直接在根目錄下創(chuàng)建自己的404.html就可以。但是自定義404頁(yè)面僅對(duì)綁定頂級(jí)域名的項(xiàng)目才起作用,，GitHub默認(rèn)分配的二級(jí)域名是不起作用的,，使用hexo server在本機(jī)調(diào)試也是不起作用的。
其實(shí),，404頁(yè)面可以做更多有意義的事,，來(lái)做個(gè)404公益項(xiàng)目吧。

騰訊公益 404.html :

    <html>
    <head>   
        <meta charset="UTF-8">
        <title>404</title>
    </head>
    <body>
    <br><!--
    <!DOCTYPE HTML>
    <html>
    <head>
        <meta charset="UTF-8" />
        <title>公益404 | 不如</title>
    </head>
    <body>
    #404 Not found By Bruce
    <h1>404 Page Not Found</h1>
    --><br><script type="text/javascript" src="http://www.qq.com/404/search_children.js" charset="utf-8"></script><br><!--
    公益404介接入地址
    益云公益404 http://yibo./Index/web404
    騰訊公益404 http://www.qq.com/404
    失蹤兒童少年資料管理中心404 http://404page.
    -->
    <br>
    </body>
    </html>

復(fù)制上面代碼,，貼粘到目錄下新建的404.html即可,！

9.統(tǒng)計(jì)

因Google Analytics偶爾被墻，故國(guó)內(nèi)用百度統(tǒng)計(jì)

最新的統(tǒng)計(jì)服務(wù)已經(jīng)開(kāi)放,，兩行代碼輕松搞定,，你可以直接使用：不蒜子
本人墻裂推薦，只需要兩行代碼哦,。各種用法實(shí)例和顯示效果參考不蒜子文檔中的實(shí)例鏈接,。不蒜子,，極客的算子，極簡(jiǎn)的算子,，任你發(fā)揮的算子,。

• 為hexo博客添加訪問(wèn)次數(shù)統(tǒng)計(jì)功能 | 不如

10.更新

• 更新hexo：

    npm update -g hexo

• 更新主題：

    cd themes/你的主題
    git pull

• 更新插件：

    npm update

11.總結(jié)

本文主要是解釋了自己搭建過(guò)程中遇到的問(wèn)題，還有綜合了其它Hexo教程的總結(jié),，還有圖床,、搜索、CDN加速等內(nèi)容沒(méi)有說(shuō)到,，大家用到可以自行百度谷歌,！

12.參考引用

如何搭建一個(gè)獨(dú)立博客——簡(jiǎn)明Github Pages與Hexo教程
hexo系列教程：（一）hexo介紹 | Zippera's blog
hexo系列教程：（二）搭建hexo博客 | Zippera's blog
hexo你的博客 | 不如
使用hexo搭建博客 | Alimon's Blog
hexo邊搭邊記 | sunnyxx的技術(shù)博客
hexo搭建靜態(tài)博客以及優(yōu)化 | Joanna's coding blog
HEXO+Github,搭建屬于自己的博客 - 簡(jiǎn)書(shū)
在hexo自訂rss | kpman | code
RSS/Atom、Sitemap for SEO | Michael Hsu.tw
Hexo 優(yōu)化與定制(二) | Kang Lu's Blog
Hexo | { GoonX }
不蒜子 | 不如

13.搭建博客相關(guān)網(wǎng)站

Hexo官網(wǎng)
hexojs/hexo
GitHub Pages

注：本文首發(fā)于 iHTC' Blog,，如若轉(zhuǎn)載,，請(qǐng)注來(lái)源