上次我介紹了Hexo的基本搭建方法 近期 tommy351大神 又更新了版本
和之前的2.x使用步驟略有不同 目前剛剛更新 可能有許多主題和插件不兼容3.x 請等待後續更新

本文介紹從零開始搭建的方法 如需從2.x升級到3.x 遷移方法請移至本文最後

I.Hexo簡介

Hexo 是一個輕量的靜態博客框架。通過Hexo可以快速生成一個靜態博客框架,僅需要幾條命令就可以完成,相當方便。

而架設Hexo的環境更簡單了 不需要 lnmp/lamp 這些繁瑣複雜的環境 僅僅需要一個簡單的http服務器即可使用 或者使用互聯網上免費的頁面託管服務
比如本人的這個博客 就是託管於 GitCafe 和 GitHub 的Pages服務上

• 本文會更隨 Hexo 的發展同步更新 如需請收藏本文 非常感謝您的閱讀! 如有錯誤,歡迎指出。

II.Hexo安裝方法

（近期nodejs更新4.0版本 注意此版本暫不兼容hexo編譯 請安裝版本號爲0.12.7的nodejs）

• Mac OS X/Linux或其他UNIX/類UNIX系統 配置 nodejs 環境

  • 請去官方網站下載 .pkg 文件 或者下載已編譯完成的二進制文件

  • 也可以下載源代碼編譯安裝

$ wget http://nodejs.org/dist/v0.12.4/node-v0.12.7.tar.gz
$ tar zxvf node-v0.12.7.tar.gz
$ cd node-v0.12.7
# ./configure --prefix=/usr
# make && make install

• npm(node包管理器)

  • redhat系

    # yum install npm -y

  • debian系

    # apt-get install npm -y

其他發行版請自行尋找wiki獲得幫助

通過npm安裝Hexo-Cli 和 hexo

$ npm install hexo-cli -g

如果以上命令不能安裝 可以嘗試把官方源替換爲淘寶npm源 再執行安裝Hexo

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

或者你直接通過添加 npm 參數 alias 一個新命令:

$ alias cnpm="npm --registry=https://registry.npm.taobao.org \
--cache=$HOME/.npm/.cache/cnpm \
--disturl=https://npm.taobao.org/dist \
--userconfig=$HOME/.cnpmrc"

如果以上的 cnpm 無法安裝 可以試試看下方的 alias 方法

$ echo '\n#alias for cnpm\nalias cnpm="npm --registry=https://registry.npm.taobao.org \
--cache=$HOME/.npm/.cache/cnpm \
--disturl=https://npm.taobao.org/dist \
--userconfig=$HOME/.cnpmrc"' >> ~/.zshrc && source ~/.zshrc

• Windows系統（具體環境配置請參考這個）

  • git

  • node環境

  • npm(node包管理器)

III.Hexo配置方法

新建一個需要當做博客目錄的文件夾

$ mkdir blog

進去之後加入hexo主程序和安裝npm

$ hexo init && npm install

文件夾大致結構如下

• scaffolds 工具模板

• scripts hexo的功能js

• source 博客資源文件夾

• source/_drafts 草稿文件夾

• source/_posts 文章文件夾

• themes 存放皮膚的文件夾

• themes/landscape 默認皮膚文件夾

• _config.yml 全局配置文件

• db.json json格式的靜態常量數據庫

_posts目錄：Hexo存放博客文章的文件夾

themes目錄：存放皮膚的文件夾，默認使用官方的主題 你也可以從hexo主題頁面下載你喜歡的主題

---

配置Hexo

Hexo全局配置

用文本編輯器修改_config.yml這個文件 大致如下 只需要自行修改幾個 其他保持默認即可

通常需要修改站點名稱 /URL格式 /歸檔設置 /disqus評論用戶名 /部署配置 這幾項就可以了 注意冒號後面都要添加一個半角空格 之後纔是設置參數

自定義域名設置 在source我文件夾下面新建CNAME文件 裏面寫入你的自定義域名 並設置您的dns配置cname方式到服務提供商的給的地址即可

# 網站
參數    描述
title    網站標題
subtitle    網站副標題
description    網站描述
author    您的名字
language    網站使用的語言
timezone    網站時區。Hexo 預設使用您電腦的時區。時區列表# 網址
參數    描述    默認值
url    網址
root    網站根目錄
permalink    文章的 永久鏈接 格式    :year/:month/:day/:title/
permalink_default    永久鏈接中各部分的默認值
網站存放在子目錄
如果您的網站存放在子目錄中，例如 http://yoursite.com/blog，則請將您的 url 設爲 http://yoursite.com/blog 並把 root 設爲 /blog/。# 目錄
參數    描述    默認值
source_dir    資源文件夾，這個文件夾用來存放內容。    source
public_dir    公共文件夾，這個文件夾用於存放生成的站點文件。    public
tag_dir    標籤文件夾    tags
archive_dir    歸檔文件夾    archives
category_dir    分類文件夾    categories
code_dir    Include code 文件夾    downloads/code
i18n_dir    國際化（i18n）文件夾    :lang
skip_render    跳過指定文件的渲染，您可使用 glob 來配置路徑。# 文章
參數    描述    默認值
new_post_name    新文章的文件名稱    :title.md
default_layout    預設佈局    post
auto_spacing    在中文和英文之間加入空格    false
titlecase    把標題轉換爲 title case    false
external_link    在新標籤中打開鏈接    true
filename_case    把文件名稱轉換爲 (1) 小寫或 (2) 大寫    0
render_drafts    顯示草稿    false
post_asset_folder    啓動 Asset 文件夾    false
relative_link    把鏈接改爲與根目錄的相對位址    false
future    顯示未來的文章    true
highlight    代碼塊的設置# 分類 & 標籤
參數    描述    默認值
default_category    默認分類    uncategorized
category_map    分類別名
tag_map    標籤別名
日期 / 時間格式
Hexo 使用 Moment.js 來解析和顯示時間。參數    描述    默認值
date_format    日期格式    MMM D YYYY
time_format    時間格式    H:mm:ss
分頁
參數    描述    默認值
per_page    每頁顯示的文章量 (0 = 關閉分頁功能)    10
pagination_dir    分頁目錄    page# 擴展
參數    描述
theme    當前主題名稱
deploy    部署

Hexo常用插件安裝與配置

安裝首頁文章數量 存檔 分類 的插件
安裝本地服務器代理插件
安裝發佈器插件
安裝更新插件 rss site-map之類的

$ npm install hexo-generator-index --save
$ npm install hexo-generator-archive --save
$ npm install hexo-generator-category --save
$ npm install hexo-generator-tag --save
$ npm install hexo-server --save
$ npm install hexo-deployer-git --save
$ npm install hexo-deployer-heroku --save
$ npm install hexo-deployer-rsync --save
$ npm install hexo-deployer-openshift --save
$ npm install hexo-renderer-marked@0.2.10 --save
$ npm install hexo-renderer-stylus@0.3.1 --save
$ npm install hexo-generator-feed@1.1.0 --save
$ npm install hexo-generator-sitemap@1.1.2 --save

裝完之後去全局配置文件 _config.yml 修改參數

index_generator:per_page: 10 ##首頁默認10篇文章標題 如果值爲0不分頁archive_generator:per_page: 10 ##歸檔頁面默認10篇文章標題yearly: true  ##生成年視圖monthly: true ##生成月視圖tag_generator:per_page: 10 ##標籤分類頁面默認10篇文章category_generator:per_page: 10 ###分類頁面默認10篇文章feed:type: atom ##feed類型 atom或者rss2path: atom.xml ##feed路徑limit: 20  ##feed文章最小數量deploy:type: git ##部署類型 其他類型自行google之repo: <repository url> ##git倉庫地址branch: [branch] ##git 頁面分支message: [message] ##git message建議默認字段update 可以自定義-多部署deploy:type: gitmessage: update  ##git message建議默認字段update 可以自定義repo:gitcafe: <repository url>,[branch] ##gitcafe 倉庫地址和分支github: <repository url>,[branch] ##github 倉庫地址和分支

例如

deploy:type: gitmessage: "update"repo:gitcafe: https://gitcafe.com/ky0ncheng/ky0ncheng.git,gitcafe-pagesgithub: https://github.com/ky0ncheng/ky0ncheng.github.io.git,master

注意:

• GitCafe Pages 服務 分支在 gitcafe-pages

• GitHub Pages 服務 分支在 master

更多插件可以去Hexo插件wiki找到 https://github.com/hexojs/hexo/wiki/Plugins

Hexo主題設置

同樣編輯主題文件夾的 _config.yml

# Header
menu:#導航欄連接
Home: /
Archives: /archives #歸檔頁面URL
自定義頁面標題: /自定義頁面URL
rss: /atom.xml  #rss地址  默認即可# Content
excerpt_link: Read More #閱讀更多的文字顯示
fancybox: true #開啓fancybox效果# Sidebar  #側邊欄設置
sidebar: right
widgets:
- category
- tag
- tagcloud
- archive
- recent_posts# Miscellaneous #社交網絡和統計連接地址
google_analytics: #google analytics ID
favicon: /favicon.png #網站的favicon
twitter:
google_plus:
fb_admins:
fb_app_id:網站Favicon設置favicon.ico可以去[bitbug](http://www.bitbug.net/)製作 建議大小32x32請把您的favicon.ico放到themes/您的主題名稱/source文件夾下然後去themes/您的主題名稱/layout下 修改header的meta標籤<link href="../favicon.ico" rel="shortcut icon" type="image/x-icon" />

---

寫文章

Hexo使用markdown語法的純文本存放文章 後綴爲.md 你可以在_post文件夾裏面新建這個後綴的.md文件 使用的全是UTF-8編碼

也可以輸入命令以生成

$ hexo new <title>

如果是新建一個頁面

$ hexo new page <title>

看一下剛纔生成的<title>.md，內容如下：

 title: title #文章標題date: 2015-02-05 12:47:44 #文章生成時間#文章分類目錄 可以省略tags: #文章標籤 可以省略description: #你對本頁的描述 可以省略---這裏開始使用markdown格式輸入你的正文。多標籤注意語法格式 如下:tags:
- 標籤1
- 標籤2
- 標籤3
- etc...想在首頁文章預覽添加圖片可以添加photo參數 這個fancybox可以省略 如下:photos:- http://xxx.com/photo.jpg

正文中可以使用<!--more-->設置文章摘要 如下:

以上是文章摘要

<!--more-->

以下是餘下全文

more以上內容即是文章摘要，在主頁顯示，more以下內容點擊『> Read More』鏈接打開全文才顯示。

如果您曾經是 Wordpress 的用戶可以使用 hexo 的插件把之前的文章進行轉換成 md 的無格式文件

1. 先從 Wordpress 後臺導出所有的文章為 XML 格式.

2. 安裝 hexo 的插件 hexo-migrator-wordpress

$ npm install hexo-migrator-wordpress --save

1. 使用 hexo-migrator-wordpress 轉換 xml 為 md 文件 (export.xml 請換成您的具體文件名)

$ hexo migrate wordpress export.xml

命令執行後 您會在 source/_post 目錄內就可以看到剛剛轉換完成的博客文章 md 文件

---

IV.Hexo部署方法

寫完文章之後 就可以啓動本地服務器測試了

$ hexo s

這個時候hexo啓動localhost的4000端口 靜態的網站架設完成

推薦部署在 GitCafe 或者 Github 的pages服務上

修改後就可以部署上去了

$ hexo clean #清除緩存
$ hexo g #生成靜態網頁
$ hexo d #開始部署

---

V.Hexo更新方法

$ npm update -g

• cnpm 源也許會同步官方源失敗 造成 hexo 無法更新到最新版本

• hexo 同時也需要最新的 nodejs

$ npm install n -g
# n stable

以上就是Hexo的基本使用方法 進階的可以在Hexo的官方文檔裡找到 感謝閱讀!

Enjoy~

---

hexo3.x帶來了更好的性能，更新了API，模塊化了大部分組件。更多變化看這裏： https://github.com/hexojs/hexo/wiki/Breaking-Changes-in-Hexo-3.0

hexo2.x到3.x遷移指南：
https://github.com/hexojs/hexo/wiki/Migrating-from-2.x-to-3.08

原文鏈接 https://ky0n.xyz/build-your-hexo-blog/