2015-4-30 第一次编写
2015-05-01 更新增加了 Travis CI 的部分
此处输入图片的描述
0x01准备：
- tommy351编写的静态博客框架Hexo（目前版本是3.0.x）
- Wixo的主题
- GitHub的repos的gh-pages 分支放置wiki，托管于GitHub的Pages服务上
- 源码放置在Github同一个repos下的source分支下进行版本管理
- 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
此处输入图片的描述
[email protected] node_modules\hexo-renderer-ejs
├── [email protected]
└── [email protected]
[email protected] node_modules\hexo-generator-index
├── [email protected]
└── [email protected] ([email protected])
[email protected] node_modules\hexo-generator-tag
├── [email protected]
└── [email protected] ([email protected])
[email protected] node_modules\hexo-generator-category
├── [email protected]
└── [email protected] ([email protected])
[email protected] node_modules\hexo-generator-archive
├── [email protected]
└── [email protected] ([email protected])
[email protected] node_modules\hexo-renderer-marked
├── [email protected]
├── [email protected]
├── [email protected] ([email protected])
└── [email protected] ([email protected], [email protected], [email protected])
[email protected] node_modules\hexo-renderer-stylus
├── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected], [email protected])
└── [email protected] ([email protected])
[email protected] node_modules\hexo-server
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected])
├── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected], [email protected])
├── [email protected] ([email protected], [email protected], [email protected], [email protected])
├── [email protected] ([email protected], [email protected], [email protected], [email protected])
└── [email protected] ([email protected], [email protected], [email protected], [email protected])
默认安装了：
- 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...
正文中可以使用设置文章摘要 如下:
以上是文章摘要
以下是余下全文
生成与部署
- 生成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://[email protected]/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 [email protected] --save
#- npm install [email protected] --save
#- npm install [email protected] --save
#- npm install [email protected] --save
#- npm install [email protected] --save
#- npm install [email protected] --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 [email protected]"
- "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
详细补充配置文件加配图