• 2015-4-30 第一次編寫

• 2015-05-01 更新增加了 Travis CI 的部分

此處輸入圖片的描述

0x01準(zhǔn)備：

1. tommy351編寫的靜態(tài)博客框架Hexo（目前版本是3.0.x）
2. Wixo的主題
3. GitHub的repos的gh-pages 分支放置wiki荠雕，托管于GitHub的Pages服務(wù)上
4. 源碼放置在Github同一個repos下的source分支下進(jìn)行版本管理
5. Travis CI自動化測試框架自動編譯網(wǎng)站

0x02過程：

安裝NodeJs

此處輸入圖片的描述

因為Hexo是使用Nodejs編寫的，所以需要部署NodeJs的環(huán)境

• 下載nodejs

Windows 可以直接下載到安裝包安裝即可授药，其它系統(tǒng)稍后補(bǔ)充

安裝Hexo(3.x以上)

安裝hexo-cli

$ npm install hexo-cli -g

3.x以上版本相比2.x以下版本使用上有差別，3.x版本模塊化程度較高，你可以不用經(jīng)常更新hexo-cli，但是多個hexo版本可以共存

初始化目錄

$ hexo init Wiki

PS I:> hexo init Wiki
INFO Copying data to I:\Wiki
INFO You are almost done! Don't forget to run 'npm install' before you start blogging with Hexo!

這樣就會建立一個Wiki的文件夾典阵，在文件夾里已經(jīng)做了一些初始化的工作:

• 目錄結(jié)構(gòu)：

-- wiki
    |-- scaffolds           #工具模板
    |       |-- draft.md
    |       |-- page.md
    |       |-- post.md
    |-- source
    |   |-- _posts          #文章文件夾
    |         |-- hello-world.md
    |-- themes              #主題文件夾
    |     |-- landscape     # 默認(rèn)主題文件夾
    |-- .gitignore
    |-- _config.yml         #全局配置文件
    |-- package.json        #插件的配置，使用npm install --save 會寫入這里

另外還有source/_drafts存放的是草稿

安裝 Hexo

切到Wiki目錄下镊逝，然后安裝指定版本的Hexo > 3.0

$ npm install hexo --save

此處輸入圖片的描述

然后壮啊，安裝相關(guān)默認(rèn)的npm插件

$ npm install 

此處輸入圖片的描述

hexo-renderer-ejs@0.1.0 node_modules\hexo-renderer-ejs
├── ejs@1.0.0
└── lodash@2.4.2

hexo-generator-index@0.1.1 node_modules\hexo-generator-index
├── object-assign@2.0.0
└── hexo-pagination@0.0.2 (utils-merge@1.0.0)

hexo-generator-tag@0.1.1 node_modules\hexo-generator-tag
├── object-assign@2.0.0
└── hexo-pagination@0.0.2 (utils-merge@1.0.0)

hexo-generator-category@0.1.2 node_modules\hexo-generator-category
├── object-assign@2.0.0
└── hexo-pagination@0.0.2 (utils-merge@1.0.0)

hexo-generator-archive@0.1.2 node_modules\hexo-generator-archive
├── object-assign@2.0.0
└── hexo-pagination@0.0.2 (utils-merge@1.0.0)

hexo-renderer-marked@0.2.5 node_modules\hexo-renderer-marked
├── object-assign@2.0.0
├── marked@0.3.3
├── strip-indent@1.0.1 (get-stdin@4.0.1)
└── hexo-util@0.1.6 (ent@2.2.0, bluebird@2.9.25, highlight.js@8.5.0)

hexo-renderer-stylus@0.2.3 node_modules\hexo-renderer-stylus
├── stylus@0.50.0 (css-parse@1.7.0, mkdirp@0.3.5, sax@0.5.8, source-map@0.1.43, debug@2.1.3, glob@3.2.11)
└── nib@1.1.0 (stylus@0.49.3)

hexo-server@0.1.2 node_modules\hexo-server
├── object-assign@2.0.0
├── open@0.0.5
├── mime@1.3.4
├── bluebird@2.9.25
├── chalk@0.5.1 (ansi-styles@1.1.0, escape-string-regexp@1.0.3, supports-color@0.2.0, strip-ansi@0.3.0, has-ansi@0.1.0)
├── compression@1.4.3 (vary@1.0.0, on-headers@1.0.0, bytes@1.0.0, debug@2.1.3, compressible@2.0.2, accepts@1.2.5)
├── morgan@1.5.2 (basic-auth@1.0.0, depd@1.0.1, debug@2.1.3, on-finished@2.2.1)
├── connect@3.3.5 (utils-merge@1.0.0, parseurl@1.3.0, debug@2.1.3, finalhandler@0.3.4)
└── serve-static@1.9.2 (utils-merge@1.0.0, escape-html@1.0.1, parseurl@1.3.0, send@0.12.2)

默認(rèn)安裝了：

• hexo-renderer-ejs EJS渲染器
• hexo-generator-index 用來配置每頁展示文章的數(shù)目
• hexo-generator-tag 標(biāo)簽生成
• hexo-generator-category 目錄生成
• hexo-generator-archive 文章生成
• hexo-renderer-marked markdown 渲染器
• hexo-renderer-stylus CSS渲染器
• hexo-server Server module for Hexo

安裝其他常用的插件：

$ npm install hexo-deployer-git --save
$ npm install hexo-generator-feed@1 --save
$ npm install hexo-generator-sitemap@1 --save
$ npm install hexo-fs --save
$ npm install hexo-renderer-mathjax --save

• hexo-deployer-git

Git deployer plugin for Hexo.

• hexo-generator-feed

Feed generator for Hexo.

• hexo-generator-sitemap

Sitemap generator for Hexo

• hexo-fs

文件 IO 為了要使用mathjax模塊

• hexo-renderer-mathjax

Add support of MathJax for Hexo.

更多的插件參見官網(wǎng)插件列表 或者 Github上的列表

配置 Hexo

初始化目錄

$ git init

創(chuàng)建source分支

$ git checkout -b source

安裝與配置主題

• fork 主題

從主題列表 挑選自己喜歡的主題,然后fork到自己的repos，這里使用的是Wiki主題Wixo

wiki for hexo

選取 w i x o

• 修改主題配置文件

    $ cd .. #切換到上級目錄
    $ git clone https://github.com/zhiyue/hexo-theme-wixo themes/wixo

修改完成后再push上GitHub上

• 下載主題

$ cd Wiki     #切換到Wiki目錄
$ git clone https://github.com/zhiyue/hexo-theme-wixo themes/wixo

• 使用主題
  去全局配置文件 _config.yml 修改參數(shù)

# Extensions
## Plugins: http://hexo.io/plugins/
## Themes: http://hexo.io/themes/
theme: wixo #這里修改為主題的名字

• 配置主題
  wixo主題配置：

rss: atom.xml
fancybox: true
favicon: favicon.ico
fold: true
google_analytics: 

這個不同的主題配置會很不一樣撑蒜，下面這個是modernist主題的配置

menu:
  Home: /
  Archives: /archives
rss: /atom.xml

archive_date_format: MMM DD
fancybox: true

duoshuo_shortname: zhiyue

google_analytics:
favicon: /favicon.ico

• 使用子模塊管理主題

$ git submodule add https://github.com/zhiyue/hexo-theme-wixo.git themes/wixo

此處輸入圖片的描述

• 主題的更新
  如果fork的主題作者有更新歹啼，可以在GitHub上pull過來然后再合并，然后在自己的blog的目錄下要注意一下子模塊的更新模式

$ git submodule init 
$ git submodule update
$ cd themes/wixo
$ git checkout HEAD  #切換到最新的head
$ cd -
$ git add.
$ git commit -m "update submodule " #更新submodule的標(biāo)記

全局配置

修改_config.yml 文件只需修改幾個座菠，通常需要修改的地方:

• 站點名稱
• URL格式
• 歸檔設(shè)置
• disqus評論用戶名
• 部署配置

注意冒號后面添加一個半角空格 再設(shè)置參數(shù)

下面是我的_config.yml的配置

# Hexo Configuration
## Docs: http://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site
title: zhiyue   ## 網(wǎng)站標(biāo)題
subtitle:       ## 網(wǎng)站副標(biāo)題
description:    ## 網(wǎng)站描述
author: zhiyue  ## 您的名字
language: zh_CN ## 網(wǎng)站使用的語言
timezone:       ## 網(wǎng)站時區(qū)狸眼。Hexo 預(yù)設(shè)使用您電腦的時區(qū)

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
##如果您的網(wǎng)站存放在子目錄中，例如 http://yoursite.com/blog浴滴，則請將您的 url 設(shè)為 http://yoursite.com/blog 并把 ##root 設(shè)為 /blog/拓萌。
url: http://blog.printf.me              ## 網(wǎng)址
root: /                                 ## 網(wǎng)站根目錄
permalink: :year/:month/:day/:title/    ## 文章的 永久鏈接 格式
permalink_defaults:                     ## 永久鏈接中各部分的默認(rèn)值 



# Directory
source_dir: source          ## 資源文件夾，這個文件夾用來存放內(nèi)容升略。
public_dir: public          ## 公共文件夾微王，這個文件夾用于存放生成的站點文件。
tag_dir: tags               ## 標(biāo)簽文件夾
archive_dir: archives       ## 歸檔文件夾
category_dir: categories    ## 分類文件夾
code_dir: downloads/code    ## Include code 文件夾
i18n_dir: :lang             ## 國際化（i18n）文件夾
skip_render:                ## 跳過指定文件的渲染品嚣，您可使用 glob 來配置路徑炕倘。

# Writing
new_post_name: :title.md                ## File name of new posts
default_layout: post                    ## 預(yù)設(shè)布局
titlecase: false                        ## Transform title into titlecase
external_link: true                     ## Open external links in new tab
filename_case: 0                        ## 把文件名稱轉(zhuǎn)換為 (1) 小寫或 (2) 大寫
render_drafts: false                    ## 顯示草稿
post_asset_folder: false                ## 啟動 Asset 文件夾
relative_link: false                    ## 把鏈接改為與根目錄的相對位址
future: true                            ## 顯示未來的文章
highlight:                              ## 代碼塊的設(shè)置
  enable: true                          ## 啟用
  line_number: true                     ## 行號
  tab_replace: true                     ## tab 替換

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

# Date / Time format
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD                 ## 日期格式
time_format: HH:mm:ss                   ## 時間格式

# Pagination
## Set per_page to 0 to disable pagination
per_page: 10                            ## 每頁顯示的文章量 (0 = 關(guān)閉分頁功能)
pagination_dir: page                    ## 分頁目錄

# Extensions
## Plugins: http://hexo.io/plugins/
## Themes: http://hexo.io/themes/
theme: modernist                        ## 當(dāng)前主題名稱

# Deployment
## Docs: http://hexo.io/docs/deployment.html
deploy:                                 ##部署
  type:

寫文章

$ hexo new post "tiltle"

這樣就會在source/_post/下創(chuàng)建一個tiltle.md
Hexo使用markdown語法的純文本存放文章 后綴為.md 你可以在_post文件夾里面新建這個后綴的.md文件使用的全是UTF-8編碼

格式如下：

title: title #文章標(biāo)題
date: 2015-02-05 12:47:44 #文章生成時間
categories: #文章分類目錄 可以省略
tags: #文章標(biāo)簽 可以省略
description: #你對本頁的描述 可以省略

多標(biāo)簽注意語法格式 如下:

      tags:
        - 標(biāo)簽1
        - 標(biāo)簽2
        - 標(biāo)簽3
        - etc...

正文中可以使用設(shè)置文章摘要 如下:

  以上是文章摘要
    <!--more-->
    以下是余下全文

生成與部署

• 生成blog靜態(tài)文件：

    $ hexo g

此處輸入圖片的描述

• 在本地環(huán)境測試：

    $ hexo s

此處輸入圖片的描述

GitHub 配置

• 創(chuàng)建gh-pages分支
  如果要部署在github上，必須名稱叫g(shù)h-pages翰撑。所以先創(chuàng)建一個叫g(shù)h-pages的分支

$ git checkout --orphan gh-pages
$ git rm -rf .    # 砍掉所有檔案重來
# 加新檔案
## git add .
$ git commit -m 'create new branch'

• 提交到GitHub
  在GitHub創(chuàng)建一個新的repos罩旋，然后再本地使用以下命令：

    $ git remote add origin https://github.com/(github用戶名)/(項目名稱).git  ##添加遠(yuǎn)程倉庫
    $ git push --all origin                           ##push

• 自定義域名設(shè)置
  在source文件夾下創(chuàng)建CNAME文件 寫入你的自定義域名

    blog.printf.me

• 設(shè)置dnspod
  添加CNAME記錄 記錄值zhiyue.github.io.
  

  

  此處輸入圖片的描述

• 404 頁面 和 favicon.ico
  在source文件夾下 創(chuàng)建404.html 和 把favicon.ico 放置至此

• deploy 配置
  修改_config.yml文件

# Deployment
## Docs: http://hexo.io/docs/deployment.html
deploy:
  type: git
  message: update
  repo: https://github.com/zhiyue/blog.git
  branch: gh-pages

配置travis ci

• 生成Personal access tokens
  在GitHub token 生成頁面按照以下步驟生成一個可以讓第三方訪問的token，它具有可以寫repos的權(quán)限眶诈。這樣就可以在生成網(wǎng)站的時候通過這個token提交到repos上了涨醋。
  

  

  generate token

• 啟用travis ci
  登陸travis ci綁定GitHub的賬戶，travis ci會同步repos的列表逝撬，選擇你想啟用自動化測試的repos
  

  

  travis ci

• 編寫.travis.yml
travis ci會依據(jù).travis.yml進(jìn)行一些環(huán)境的設(shè)置安裝以及后續(xù)的測試东帅。下面的.travis.yml是參考網(wǎng)上的yml編寫的

# Deploy hexo site by travis-ci
# https://github.com/jkeylu/deploy-hexo-site-by-travis-ci
# LICENSE: MIT
#
# 1. Copy this file to the root of your repository, then rename it to '.travis.yml'
# 2. Replace 'YOUR NAME' and 'YOUR EMAIL' at line 29
# 3. Add an Environment Variable 'DEPLOY_REPO'
#     1. Generate github access token on https://github.com/settings/applications#personal-access-tokens
#     2. Add an Environment Variable on https://travis-ci.org/{github username}/{repository name}/settings/env_vars
#         Variable Name: DEPLOY_REPO
#         Variable Value: https://{githb access token}@github.com/{github username}/{repository name}.git 
#         Example: DEPLOY_REPO=https://6b75cfe9836f56e6d21187622730889874476c23@github.com/jkeylu/test-hexo-on-travis-ci.git

language: node_js

node_js:
  - "0.12"  #設(shè)置node_js的版本

branches:
  only:
    - source    #檢測的分支，一旦分支有新的提交就會觸發(fā)腳本

before_install: #安裝前的工作
- npm install -g hexo-cli   

install:
#- npm install hexo-renderer-ejs@0.1.0 --save
#- npm install hexo-renderer-marked@0.1.0 --save
#- npm install hexo-renderer-stylus@0.1.0 --save
#- npm install hexo-generator-feed@0.2.1 --save
#- npm install hexo-generator-sitemap@0.2.0 --save
#- npm install hexo-tag-bootstrap@0.0.6 --save
- npm install   


script:                         #運行的測試腳本
  - "git submodule init"
  - "git submodule update"
  - "hexo generate "
  
after_success:                      #push到github上
  - "git clone $DEPLOY_REPO git_deploy"
  - "cd git_deploy"
  - "git checkout gh-pages"
  - "cd .."
  - "rm -r git_deploy/*"
  - "cp -r public/* git_deploy"
  - "cd git_deploy"
  - "git config --global push.default simple"
  - "git config --global user.name 'zhiyue'"
  - "git config --global user.email cszhiyue@gmail.com"
  - "git add -A"
  - "git commit -m 'Site updated'"
  - "git push -q"

• 設(shè)置環(huán)境變量DEPLOY_REPO
.travis.yml中用到的DEPLOY_REPO可以按照圖片的步驟設(shè)置

genertare var

• travis ci 自動化生成與部署

此處輸入圖片的描述

• 網(wǎng)站截圖：

此處輸入圖片的描述

0x03 參考：

• Hexo 3.0 靜態(tài)博客使用指南
• 使用Jekyll在Github上搭建個人博客（將本地博客上傳至github）
• 如何建立一個沒有 Parent 的獨立 Git branch
• 使用Git將本地代碼上傳到GitHub

todo:

• 補(bǔ)充其他系統(tǒng)的詳細(xì)情況
• 補(bǔ)充多說插件和谷歌analyse
• 詳細(xì)補(bǔ)充配置文件
• 加配圖