摘要：前言博主之前也有折騰和可對于一個(gè)前端來說，讓人沒法盡興，因?yàn)椴恢涝撊绾翁砑幼约旱拇a。下面記錄博主搭建的整個(gè)過程。若這兩個(gè)條件滿足，則創(chuàng)建一個(gè)目錄的。

如果時(shí)間可以靜止，我希望就停在此刻。

博主之前也有折騰wordpress和jekyll可對于一個(gè)前端er來說，wordpress讓人沒法盡興，因?yàn)椴恢涝撊绾翁砑幼约旱拇a。而jekyll就太麻煩了每一次都需要重新提交，而且樣式也不是很豐富，簡直就和雞肋一般。食之無味，棄之可惜。

之前有聽說過Hexo這個(gè)博客框架，但一直沒時(shí)間給自己搭一個(gè)，其實(shí)平時(shí)也有注意到很多大牛的博客是很絢麗的，卻不知道那就是Hexo。說干就干，歷時(shí)一整天，踩坑無數(shù)，終于變成了博主想要的樣子。放個(gè)鏈接Damonare的個(gè)人博客如果你也想要一個(gè)和博主一樣的博客，那就繼續(xù)看下去吧。

博主系統(tǒng)Window7,搭建博客主題Yilia。下面記錄博主搭建的整個(gè)過程。

想搭建一個(gè)博客的應(yīng)該大多數(shù)都是程序員吧，那么github賬號(hào)應(yīng)該是一定有的了。你要是實(shí)在清新脫俗到連個(gè)github賬號(hào)也沒有，不用擔(dān)心，給你個(gè)外鏈Github,賬號(hào)設(shè)置然后添加SSH,這樣你之后輸入hexo命令的時(shí)候就不用一次次輸入密碼了，關(guān)于如何注冊github和添加SSH，這里需要提醒一點(diǎn)，github賬號(hào)最好都是小寫字母，不然容易解析錯(cuò)誤，還有郵箱，盡量別用國內(nèi)的郵箱，很容易出問題了，比如你git提交的貢獻(xiàn)不被記錄。

Git身為程序員給他應(yīng)該是會(huì)用的吧。好吧假設(shè)你不會(huì)使用git和github給你個(gè)外鏈看這里

好的，現(xiàn)在你有了github和git了，也配置好了，那么就需要在github新建一個(gè)倉庫了,

注意：這里的倉庫名稱要和你的username對應(yīng)

Node安裝

Node可以去官網(wǎng)下載，或是在國內(nèi)下載，由于眾所周知的原因，這里放一個(gè)nodejs.cn的鏈接
Node內(nèi)置npm包，我們之后就可以打開node命令行使用npm進(jìn)行安裝一些依賴，如果覺得太慢，可以使用淘寶鏡像cnpm

Hexo安裝

好的，現(xiàn)在我們Node,git,github都弄好了，現(xiàn)在可以本地化一個(gè)hexo了,新建hexo文件夾，任意盤下都可以，然后命令行執(zhí)行命令：

npm install hexo -g  #-g表示全局安裝, npm默認(rèn)為當(dāng)前項(xiàng)目安裝

如果遇到錯(cuò)誤：

{ [Error: Cannot find module "./build/Release/DTraceProviderBindings"] code: "MODULE_NOT_FOUND" }
{ [Error: Cannot find module "./build/default/DTraceProviderBindings"] code: "MODULE_NOT_FOUND" }
{ [Error: Cannot find module "./build/Debug/DTraceProviderBindings"] code: "MODULE_NOT_FOUND" }

改用下面的命令安裝：

npm install hexo --no-optional

好的，現(xiàn)在hexo也就緒了,hexo命令：

cd ~/git
hexo init hexo  #執(zhí)行init命令初始化到你指定的hexo目錄
cd hexo
npm install    #install before start blogging
hexo generate       #自動(dòng)根據(jù)當(dāng)前目錄下文件,生成靜態(tài)網(wǎng)頁
hexo server         #運(yùn)行本地服務(wù)

瀏覽器輸入http://localhost:4000就可以看到效果。
瀏覽目錄

├── .deploy       #需要部署的文件
├── node_modules  #Hexo插件
├── public        #生成的靜態(tài)網(wǎng)頁文件
├── scaffolds     #模板
├── source        #博客正文和其他源文件, 404 favicon CNAME 等都應(yīng)該放在這里
|   ├── _drafts   #草稿
|   └── _posts    #文章
├── themes        #主題
├── _config.yml   #全局配置文件
└── package.json

添加博文

hexo new "postName"  #新建博文,其中postName是博文題目

如果不想博文在首頁全部顯示, 并能出現(xiàn)閱讀全文按鈕效果, 需要在你想在首頁顯示的部分下添加

這點(diǎn)和wordpress是一樣的

cd ~/git/hexo
git clone git@github.com:litten/hexo-theme-yilia.git themes/yilia

在./_config.yml，修改主題為yilia

theme: yilia

Hexo 主題

查看本地效果

hexo g
hexo s

# Site #站點(diǎn)信息
title: blog Name #標(biāo)題
subtitle: Subtitle #副標(biāo)題
description: my blog desc #描述
author: me #作者
language: zh-CN #語言
timezone: Asia/Shanghai #時(shí)區(qū)

# URL
url: http://yoururl.com   #用于綁定域名, 其他的不需要配置
root: /
#permalink: :year/:month/:day/:title/
permalink: posts/title.html
permalink_defaults:

# Directory #目錄
source_dir: source #源文件
public_dir: public #生成的網(wǎng)頁文件
tag_dir: tags #標(biāo)簽
archive_dir: archives #歸檔
category_dir: categories #分類
code_dir: downloads/code
i18n_dir: :lang #國際化
skip_render:

# Writing #寫作
new_post_name: :title.md #新文章標(biāo)題
default_layout: post #默認(rèn)模板(post page photo draft)
titlecase: false #標(biāo)題轉(zhuǎn)換成大寫
external_link: true #新標(biāo)簽頁里打開連接
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
highlight: #語法高亮
  enable: true
  line_number: true #顯示行號(hào)
  auto_detect: true
  tab_replace:

# Category & Tag #分類和標(biāo)簽
default_category: uncategorized #默認(rèn)分類
category_map:
tag_map:

# Date / Time format #日期時(shí)間格式
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD
time_format: HH:mm:ss

# Pagination #分頁
per_page: 10 #每頁文章數(shù), 設(shè)置成 0 禁用分頁
pagination_dir: page

# Extensions #插件和主題
## 插件: http://hexo.io/plugins/
## 主題: http://hexo.io/themes/
theme: next

# Deployment #部署, 同時(shí)發(fā)布在 GitHub 和 GitCafe 上面
deploy:
- type: git
  repo: git@gitcafe.com:username/username.git,gitcafe-pages
- type: git
  repo: git@github.com:username/username.github.io.git,master

# Disqus #Disqus評論系統(tǒng)
disqus_shortname: 

plugins: #插件，例如生成 RSS 和站點(diǎn)地圖的
- hexo-generator-feed
- hexo-generator-sitemap

其它設(shè)置，可參考：這篇博文

修改參考這里基本所有的問題都能在這里解決了,所以啊，一個(gè)項(xiàng)目的issue真的很具有參考價(jià)值，少走不少彎路，通過這里的代碼博主添加了 Hexo文章統(tǒng)計(jì) 功能，沒有動(dòng)畫，頭像設(shè)置有null的問題以及點(diǎn)擊小房子沒反應(yīng)的bug。

我們首先要編輯文章顯示頁面的模板，也就是

themes/landscape/layout/_partial/article.ejs

文件。為了將目錄生成在正文之前，我們首先在這個(gè)文件中找到

<%- post.content %>

并在這一行之前加入如下代碼：

<% if (!index && post.toc){ %>

文章目錄
<%- toc(post.content) %>

<% } %>

這段代碼的含義清晰明了，if語句中有兩個(gè)條件，!index是為了不在首頁的文章摘要中生成目錄，post.toc確保了只在顯式地標(biāo)記了toc: true的文章中生成目錄。若這兩個(gè)條件滿足，則創(chuàng)建一個(gè)目錄的div。
修改完這個(gè)文件之后，找一篇包含了多個(gè)子標(biāo)題的文章，并在文章開頭的front-matter中添加一句toc: true，在瀏覽器中訪問這篇文章，應(yīng)該可以看到文章的開頭處已經(jīng)有了帶鏈接的目錄。但是這樣的目錄實(shí)在太難看，我們還需要添加相應(yīng)的CSS來將其指定為我們想要的樣式。
要指定目錄的樣式，我們要修改的文件是

themes/landscape/source/css/_partial/article.styl

在文件的最后，添加如下代碼：

/*toc*/
.toc-article
    background #eee
    border 1px solid #bbb
    border-radius 10px
    margin 1.5em 0 0.3em 1.5em
    padding 1.2em 1em 0 1em
    max-width 28%

.toc-title
    font-size 120%

#toc
    line-height 1em
    font-size 0.9em
    float right
.toc
    padding 0
    margin 1em
    line-height 1.8em
    li
    list-style-type none

.toc-child 
    margin-left 1em

由于Hexo使用的是stylus預(yù)處理器，所以CSS代碼要注意縮進(jìn)，不然就報(bào)錯(cuò)了，這種目錄要是不滿意完全可以按照自己意愿寫一個(gè)。

鏈接：多說社會(huì)化評論框核心腳本embed.js本地化方法
鏈接：多說社會(huì)化評論框添加 站長回復(fù) 標(biāo)記
鏈接： 多說回復(fù)后顯示瀏覽器及操作系統(tǒng)信息（Useragent）

有任何問題請?jiān)谠u論中回復(fù)，博主會(huì)在評論中解答。