如果時間可以靜止，我希望就停在此刻。
前言
博主之前也有折騰wordpress和jekyll可對於一個前端er來說，wordpress讓人沒法盡興，因為不知道該如何添加自己的代碼。而jekyll就太麻煩了每一次都需要重新提交，而且樣式也不是很豐富，簡直就和雞肋一般。食之無味，棄之可惜。
之前有聽說過Hexo這個博客框架，但一直沒時間給自己搭一個，其實平時也有注意到很多大牛的博客是很絢麗的，卻不知道那就是Hexo。說干就干，歷時一整天，踩坑無數，終於變成了博主想要的樣子。放個鏈接Damonare的個人博客如果你也想要一個和博主一樣的博客，那就繼續看下去吧。
- 博主系統Window7,搭建博客主題Yilia。下面記錄博主搭建的整個過程。
git和github
Hexo
- 好的，現在你有了github和git了，也配置好了，那么就需要在github新建一個倉庫了,
注意：這里的倉庫名稱要和你的username對應
- Node安裝
Node可以去官網下載，或是在國內下載，由於眾所周知的原因，這里放一個nodejs.cn的鏈接
Node內置npm包，我們之后就可以打開node命令行使用npm進行安裝一些依賴，如果覺得太慢，可以使用淘寶鏡像cnpm
- Hexo安裝
好的，現在我們Node,git,github都弄好了，現在可以本地化一個hexo了,新建hexo文件夾，任意盤下都可以，然后命令行執行命令：
npm install hexo -g #-g表示全局安裝, npm默認為當前項目安裝
如果遇到錯誤：
{ [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
好的，現在hexo也就緒了,hexo命令：
cd ~/git
hexo init hexo #執行init命令初始化到你指定的hexo目錄
cd hexo
npm install #install before start blogging
hexo generate #自動根據當前目錄下文件,生成靜態網頁
hexo server #運行本地服務
瀏覽器輸入http://localhost:4000就可以看到效果。
瀏覽目錄
├── .deploy #需要部署的文件
├── node_modules #Hexo插件
├── public #生成的靜態網頁文件
├── scaffolds #模板
├── source #博客正文和其他源文件, 404 favicon CNAME 等都應該放在這里
| ├── _drafts #草稿
| └── _posts #文章
├── themes #主題
├── _config.yml #全局配置文件
└── package.json
添加博文
hexo new "postName" #新建博文,其中postName是博文題目
如果不想博文在首頁全部顯示, 並能出現閱讀全文按鈕效果, 需要在你想在首頁顯示的部分下添加
<!--more-->
這點和wordpress是一樣的
Hexo Yilia主題配置
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 #站點信息
title: blog Name #標題
subtitle: Subtitle #副標題
description: my blog desc #描述
author: me #作者
language: zh-CN #語言
timezone: Asia/Shanghai #時區
# URL
url: http://yoururl.com #用於綁定域名, 其他的不需要配置
root: /
#permalink: :year/:month/:day/:title/
permalink: posts/title.html
permalink_defaults:
# Directory #目錄
source_dir: source #源文件
public_dir: public #生成的網頁文件
tag_dir: tags #標簽
archive_dir: archives #歸檔
category_dir: categories #分類
code_dir: downloads/code
i18n_dir: :lang #國際化
skip_render:
# Writing #寫作
new_post_name: :title.md #新文章標題
default_layout: post #默認模板(post page photo draft)
titlecase: false #標題轉換成大寫
external_link: true #新標簽頁里打開連接
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
highlight: #語法高亮
enable: true
line_number: true #顯示行號
auto_detect: true
tab_replace:
# Category & Tag #分類和標簽
default_category: uncategorized #默認分類
category_map:
tag_map:
# Date / Time format #日期時間格式
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD
time_format: HH:mm:ss
# Pagination #分頁
per_page: 10 #每頁文章數, 設置成 0 禁用分頁
pagination_dir: page
# Extensions #插件和主題
## 插件: http://hexo.io/plugins/
## 主題: http://hexo.io/themes/
theme: next
# Deployment #部署, 同時發布在 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評論系統
disqus_shortname:
plugins: #插件，例如生成 RSS 和站點地圖的
- hexo-generator-feed
- hexo-generator-sitemap
其它設置，可參考：這篇博文
Hexo Yilia Bug修改
修改參考這里基本所有的問題都能在這里解決了,所以啊，一個項目的issue真的很具有參考價值，少走不少彎路，通過這里的代碼博主添加了 Hexo文章統計 功能，沒有動畫，頭像設置有null的問題以及點擊小房子沒反應的bug。
Hexo添加文章目錄
我們首先要編輯文章顯示頁面的模板，也就是
themes/landscape/layout/_partial/article.ejs
文件。為了將目錄生成在正文之前，我們首先在這個文件中找到
<%- post.content %>
並在這一行之前加入如下代碼：
<!-- Table of Contents -->
<% if (!index && post.toc){ %>
<div id="toc" class="toc-article">
<strong class="toc-title">文章目錄</strong>
<%- toc(post.content) %>
</div>
<% } %>
這段代碼的含義清晰明了，if語句中有兩個條件，!index是為了不在首頁的文章摘要中生成目錄，post.toc確保了只在顯式地標記了toc: true的文章中生成目錄。若這兩個條件滿足，則創建一個目錄的div。
修改完這個文件之后，找一篇包含了多個子標題的文章，並在文章開頭的front-matter中添加一句toc: true，在瀏覽器中訪問這篇文章，應該可以看到文章的開頭處已經有了帶鏈接的目錄。但是這樣的目錄實在太難看，我們還需要添加相應的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預處理器，所以CSS代碼要注意縮進，不然就報錯了，這種目錄要是不滿意完全可以按照自己意願寫一個。
Hexo 多說評論框
鏈接：多說社會化評論框核心腳本embed.js本地化方法
鏈接：多說社會化評論框添加 站長回復 標記
鏈接： 多說回復后顯示瀏覽器及操作系統信息（Useragent）
后記
有任何問題請在評論中回復，博主會在評論中解答。