Hexo折騰記

若是時間能夠靜止，我但願就停在此刻。 博客地址:Damonare的我的博客

前言

博主以前也有折騰wordpress和jekyll可對於一個前端er來講，wordpress讓人無法盡興，由於不知道該如何添加本身的代碼。而jekyll就太麻煩了每一次都須要從新提交，並且樣式也不是很豐富，簡直就和雞肋通常。食之無味，棄之惋惜。

以前有據說過Hexo這個博客框架，但一直沒時間給本身搭一個，其實平時也有注意到不少大牛的博客是很絢麗的，殊不知道那就是Hexo。說幹就幹，歷時一成天，踩坑無數，終於變成了博主想要的樣子。放個連接Damonare的我的博客若是你也想要一個和博主同樣的博客，那就繼續看下去吧。

• 博主系統Window7,搭建博客主題Yilia。下面記錄博主搭建的整個過程。

git和github

• 想搭建一個博客的應該大多數都是程序員吧，那麼github帳號應該是必定有的了。你要是實在清新脫俗到連個github帳號也沒有，不用擔憂，給你個外鏈Github,帳號設置而後添加SSH,這樣你以後輸入hexo命令的時候就不用一次次輸入密碼了，關於如何註冊github和添加SSH，這裏須要提醒一點，github帳號最好都是小寫字母，否則容易解析錯誤，還有郵箱，儘可能別用國內的郵箱，很容易出問題了，好比你git提交的貢獻不被記錄。
• Git身爲程序員給他應該是會用的吧。好吧假設你不會使用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是博文題目複製代碼

若是不想博文在首頁所有顯示, 並能出現閱讀全文按鈕效果, 須要在你想在首頁顯示的部分下添加

 複製代碼

這點和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="" %="">
  
  
  

 複製代碼

並在這一行以前加入以下代碼：

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

  
  
  

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

 
<% }="" %="">
  
  
  

 
  
  
  

 複製代碼

這段代碼的含義清晰明瞭，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）

後記

有任何問題請在評論中回覆，博主會在評論中解答。