• 2015-4-30 第一次编写

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

此处输入图片的描述

0x01准备：

1. tommy351编写的静态博客框架Hexo（目前版本是3.0.x）
2. Wixo的主题
3. GitHub的repos的gh-pages 分支放置wiki，托管于GitHub的Pages服务上
4. 源码放置在Github同一个repos下的source分支下进行版本管理
5. Travis CI自动化测试框架自动编译网站

0x02过程：

安装NodeJs

此处输入图片的描述

因为Hexo是使用Nodejs编写的，所以需要部署NodeJs的环境

• 下载nodejs

Windows 可以直接下载到安装包安装即可，其它系统稍后补充

安装Hexo(3.x以上)

安装hexo-cli

$ npm install hexo-cli -g

3.x以上版本相比2.x以下版本使用上有差别，3.x版本模块化程度较高，你可以不用经常更新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的文件夹，在文件夹里已经做了一些初始化的工作:

• 目录结构：

-- wiki
    |-- scaffolds           #工具模板
    |       |-- draft.md
    |       |-- page.md
    |       |-- post.md
    |-- source
    |   |-- _posts          #文章文件夹
    |         |-- hello-world.md
    |-- themes              #主题文件夹
    |     |-- landscape     # 默认主题文件夹
    |-- .gitignore
    |-- _config.yml         #全局配置文件
    |-- package.json        #插件的配置，使用npm install --save 会写入这里

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

安装 Hexo

切到Wiki目录下，然后安装指定版本的Hexo > 3.0

$ npm install hexo --save

此处输入图片的描述

然后，安装相关默认的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)

默认安装了：

• hexo-renderer-ejs EJS渲染器
• hexo-generator-index 用来配置每页展示文章的数目
• hexo-generator-tag 标签生成
• 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.

更多的插件参见官网插件列表 或者 Github上的列表

配置 Hexo

初始化目录

$ git init

创建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 修改参数

# 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的标记

全局配置

修改_config.yml 文件只需修改几个，通常需要修改的地方:

• 站点名称
• URL格式
• 归档设置
• disqus评论用户名
• 部署配置

注意冒号后面添加一个半角空格 再设置参数

下面是我的_config.yml的配置

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

# Site
title: zhiyue   ## 网站标题
subtitle:       ## 网站副标题
description:    ## 网站描述
author: zhiyue  ## 您的名字
language: zh_CN ## 网站使用的语言
timezone:       ## 网站时区。Hexo 预设使用您电脑的时区

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
##如果您的网站存放在子目录中，例如 http://yoursite.com/blog，则请将您的 url 设为 http://yoursite.com/blog 并把 ##root 设为 /blog/。
url: http://blog.printf.me              ## 网址
root: /                                 ## 网站根目录
permalink: :year/:month/:day/:title/    ## 文章的 永久链接 格式
permalink_defaults:                     ## 永久链接中各部分的默认值 



# Directory
source_dir: source          ## 资源文件夹，这个文件夹用来存放内容。
public_dir: public          ## 公共文件夹，这个文件夹用于存放生成的站点文件。
tag_dir: tags               ## 标签文件夹
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                    ## 预设布局
titlecase: false                        ## Transform title into titlecase
external_link: true                     ## Open external links in new tab
filename_case: 0                        ## 把文件名称转换为 (1) 小写或 (2) 大写
render_drafts: false                    ## 显示草稿
post_asset_folder: false                ## 启动 Asset 文件夹
relative_link: false                    ## 把链接改为与根目录的相对位址
future: true                            ## 显示未来的文章
highlight:                              ## 代码块的设置
  enable: true                          ## 启用
  line_number: true                     ## 行号
  tab_replace: true                     ## tab 替换

# Category & Tag
default_category: uncategorized         ## 默认分类
category_map:                           ## 分类别名
tag_map:                                ## 标签别名

# 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 = 关闭分页功能)
pagination_dir: page                    ## 分页目录

# Extensions
## Plugins: http://hexo.io/plugins/
## Themes: http://hexo.io/themes/
theme: modernist                        ## 当前主题名称

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

写文章

$ hexo new post "tiltle"

这样就会在source/_post/下创建一个tiltle.md
Hexo使用markdown语法的纯文本存放文章 后缀为.md 你可以在_post文件夹里面新建这个后缀的.md文件使用的全是UTF-8编码

格式如下：

title: title #文章标题
date: 2015-02-05 12:47:44 #文章生成时间
categories: #文章分类目录 可以省略
tags: #文章标签 可以省略
description: #你对本页的描述 可以省略

多标签注意语法格式 如下:

      tags:
        - 标签1
        - 标签2
        - 标签3
        - etc...

正文中可以使用设置文章摘要 如下:

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

生成与部署

• 生成blog静态文件：

    $ hexo g

此处输入图片的描述

• 在本地环境测试：

    $ hexo s

此处输入图片的描述

GitHub 配置

• 创建gh-pages分支
  如果要部署在github上，必须名称叫gh-pages。所以先创建一个叫gh-pages的分支

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

• 提交到GitHub
  在GitHub创建一个新的repos，然后再本地使用以下命令：

    $ git remote add origin https://github.com/(github用户名)/(项目名称).git  ##添加远程仓库
    $ git push --all origin                           ##push

• 自定义域名设置
  在source文件夹下创建CNAME文件 写入你的自定义域名

    blog.printf.me

• 设置dnspod
  添加CNAME记录 记录值zhiyue.github.io.
  

  

  此处输入图片的描述

• 404 页面 和 favicon.ico
  在source文件夹下 创建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的权限。这样就可以在生成网站的时候通过这个token提交到repos上了。
  

  

  generate token

• 启用travis ci
  登陆travis ci绑定GitHub的账户，travis ci会同步repos的列表，选择你想启用自动化测试的repos
  

  

  travis ci

• 编写.travis.yml
travis ci会依据.travis.yml进行一些环境的设置安装以及后续的测试。下面的.travis.yml是参考网上的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"  #设置node_js的版本

branches:
  only:
    - source    #检测的分支，一旦分支有新的提交就会触发脚本

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"

• 设置环境变量DEPLOY_REPO
.travis.yml中用到的DEPLOY_REPO可以按照图片的步骤设置

genertare var

• travis ci 自动化生成与部署

此处输入图片的描述

• 网站截图：

此处输入图片的描述

0x03 参考：

• Hexo 3.0 靜態博客使用指南
• 使用Jekyll在Github上搭建个人博客（将本地博客上传至github）
• 如何建立一個沒有 Parent 的獨立 Git branch
• 使用Git将本地代码上传到GitHub

todo:

• 补充其他系统的详细情况
• 补充多说插件和谷歌analyse
• 详细补充配置文件
• 加配图