github pages + hexo 构建自己的网站

一、前期准备

git
git安装地址

nodejs
nodejs安装地址

hexo 使用npm安装
安装好nodejs以后，进入nodejs安装目录

二、Hexo

hexo是一款基于Node.js的静态博客框架。
在nodejs安装目录下执行命令

$npm install hexo -g

仅需一步就把 Hexo 本体和所有相依套件安装完毕。

更新hexo到最新版

$npm update hexo -g

查看版本

node -v

v0.12.7

初始化
创建hexo目录，比如E:\hexo ,进入E:\hexo 目录，执行命令

$hexo init

安装依赖包

$npm install

启动服务

$hexo server 

新开启一个gitbash

$ hexo new "My New Post"

刷新http://localhost:4000/。
可以发现已生成了一篇新文章 “My New Post”。

执行下面的命令，将markdown文件生成静态网页。

$ hexo generate

该命令执行完后，会在 E:\hexo\public\ 目录下生成一系列html，css等文件。
编辑需要使用markdown语法

hexo常用命令：http://segmentfault.com/a/1190000002632530

常用命令：
hexo new "postName" #新建文章
hexo new page "pageName" #新建页面
hexo generate #生成静态页面至public目录
hexo server #开启预览访问端口（默认端口4000，'ctrl + c'关闭server）
hexo deploy #将.deploy目录部署到GitHub
简写：
hexo n == hexo newhexo g == hexo generate
hexo s == hexo server
hexo d == hexo deploy

三、GitHub

注册Github 账号
创建一个新的repository
chenlly99.github.io //注意，名称必须是xxx.github.io 格式，并且xxx必须是GitHub的用户名

编辑_config.yml 在E:\hexo 目录下
deploy:
type: git
repository: git@github.com:chenlly99/chenlly.github.io.git
branch: master

$hexo deploy 如果最后显示
[info] Deploy done: github
说明发布成功

问题1：hexo deploy 命令行没有任何输出，也没有错误。
deploy:标签，在每个冒号后面必须要空格

问题2：
hexo deploy命令显示ERROR Deployer not found : github
解决：
deploy的type改成git，然后运行下npm install hexo-deployer-git –save
再hexo g
hexo d

问题3：
fatal: Could not read from remote repository.

Please make sure you have the correct access rights
and the repository exists.
FATAL Something’s wrong. Maybe you can find the solution here: http://hexo.io/docs/troubleshooting.html
Error: Host key verification failed.
fatal: Could not read from remote repository.

解决：
先生成key:
登录git bash
$ ssh-keygen -t rsa -C “chenliling99@126.com”
Generating public/private rsa key pair.
Enter file in which to save the key (/c/Users/Administrator/.ssh/id_rsa):
/c/Users/Administrator/.ssh/id_rsa already exists.
Overwrite (y/n)? y
Enter passphrase (empty for no passphrase):
Enter same passphrase again:
Your identification has been saved in /c/Users/Administrator/.ssh/id_rsa.
Your public key has been saved in /c/Users/Administrator/.ssh/id_rsa.pub.
The key fingerprint is:
02:80:dc:c0:02:25:9b:73:0e:3f:59:fa:ea:d6:35:29 chenliling99@126.com
The key’s randomart image is:
+–[ RSA 2048]—-+
|*+= |
|o* o |
|* . o |
| * + . |
| * ..S |
| oE +. |
| ..o . |
| … |
| oo |
+—————–+

之后会要求确认路径和输入密码，我们这使用默认的一路回车就行。成功的话会在~/下生成.ssh文件夹，进去，打开id_rsa.pub，复制里面的key。

回到github，进入Account Settings，左边选择SSH Keys，Add SSH Key,title随便填，粘贴key。为了验证是否成功，
$ ssh -T git@github.com
Enter passphrase for key ‘/c/Users/Administrator/.ssh/id_rsa’:
Hi chenlly99! You’ve successfully authenticated, but GitHub does not provide shell access.

问题4：执行命令hexo deploy 报如下错误
Error: spawn git ENOENT at exports._errnoException (util.js:746:11) at Process.ChildProcess._handle.onexit (child_process.js:1053:32) at child_process.js:1144:20 at process._tickCallback (node.js:355:11)
添加环境变量：C:\Program Files (x86)\Git\bin;C:\Program Files (x86)\Git\libexec\git-core，这样就解决了问题了。

点击 Github 上项目的 Settings，GitHub Pages，提示Your site is published at http://chenlly99.github.io/
第一次上传网站的话需要等十分钟左右，以后每次更新都能马上打开

四、主题

参考：https://github.com/zippera/lightum

复制主题：

$ git clone https://github.com/zippera/lightum.git themes/lightum

更新主题：
cd themes/lightum
git pull

复制下来以后，修改配置文件
修改Hexo目录下的config.yml配置文件中的theme属性，将其设置为
theme: lightum

五、布局

站点配置用到两个文件，一个是对整站的配置H:\hexo_config.yml，另一个是对主题的配置H:\hexo\themes\light_config.yml，
添加分类、标签云、友情链接widget
修改themes\light_config.yml 增加widgets
widgets:
- search
- category
- tagcloud
- blogroll
在D:\hexo\themes\lightum\layout_widget 分别增加
search.ejs
category.ejs
tagcloud.ejs
blogroll.ejs

参考：http://www.ituring.com.cn/article/23

1、字体

*这些文字显示为斜体*
**这些文字显示为粗体**

2、代码：

$ hexo deploy

3、标题

#表示这是一级标题
##表示这是二级标题
###表示这是三级标题

4、无序列表

- 列表项目
- 列表项目
- 列表项目

5、嵌套列表

- 列表项目
     + 列表项目
     + 列表项目
     + 列表项目
- 列表项目

6、有序列表
数字接着一个英文句点

1.  Bird
2.  McHale
3.  Parish

7、连接

URL格式：[图灵社区](http://www.ituring.com.cn)
图片连接
开头加一个惊叹号

图片可以是网络图片也可以是本地图片
本地图片建议放在\source\img 目录下。
eg:
或者直接用img标签，同时指定图片大小

<img src="/img/forkme_left_green_007200.png" alt="图灵社区" width="200px" /> 

8、表格
http://www.jianshu.com/p/q81RER

七、写文章

hexo new [layout] “postName” #新建文章
其中layout是可选参数，默认值为post。有哪些layout呢，请到 scaffolds 目录下查看post的layout默认是hexo\scaffolds\post.md
修改scaffolds\post.md的模板样式
title: {{ title }}
date: {{ date }}
tags:
categories:

正文支持markdown格式，建议你先学习一下它的语法。markdown不像html似的一大堆标签，很简单，只有几个符号。
新建、删除或修改文章

文章可以拥有如下属性：
Setting Description Default
layout Layout post或page
title 文章的标题
date 创建日期 文件的创建日期
updated 修改日期 文件的修改日期
comments 是否开启评论 true
tags 标签
categories 分类

八、自定义页面

执行new page命令

$hexo new page "about"

在 hexo\source\ 下会生成 about 目录，里面有个index.md，直接编辑就可以了
然后在themes\light_config.yml 配置
menu:
首页: /
归档: /archives
关于: /about

九、评论框

注册多说地址：
在多说进行注册，获得通用代码。
将通用代码粘贴到themes\light\layout_partial\comment.ejs里面，如下：

<% if ( page.comments){ %>
<section id="comment">
通用代码
</section>
<% } %>

十、RSS 阅读

安装插件

$npm install hexo-generator-feed

全局配置文件开启插件
plugins:
- hexo-generator-feed

主题配置文件添加入口
rss: /atom.xml

添加到首页
在themes/light/layout/_partial/header.ejs中，

<li> <a href="/atom.xml">RSS</a> </li>

十一、网站地图

网站地图，又称站点地图，它就是一个页面，上面放置了网站上需要搜索引擎抓取的所有页面的链接
安装插件

$npm install hexo-generator-sitemap

开启插件
plugins:
- hexo-generator-sitemap

浏览http://localhost:4000/sitemap.xml查看是否生效

十二、统计：

因Google Analytics偶尔被墙，故用百度统计，以 modernist 主题为例，介绍如何添加。
编辑文件 hexo\themes\modernist_config.yml ，增加配置选项：
baidu_tongji: true

新建文件 hexo\themes\modernist\layout_partial\baidu_tongji.ejs ，内容如下：
<% if (theme.baidu_tongji){ %><% } %>
注册并登录百度统计获取你的统计代码。

编辑文件 hexo\themes\modernist\layout_partial\head.ejs ，在 [/head] 之前增加：
<%- partial(‘baidu_tongji’) %>

重新生成并部署你的站点。
不出意外的话，在你的站点的每个页面的左上角都会看到一个恶心的百度LOGO。你只能在『百度统计首页->网站列表->获取代码->系统管理设置->统计图标设置->显示图标』，把那个勾去掉。

十三、域名

(1)、进入source文件夹，创建名为CNAME的文件，编辑：
chenlly.com
(2)、设置DNS解析
本人首先在阿里云上购买了一个域名，
登录域名控制台，添加域名解析,github.com两个ip地址分别是192.30.252.154，192.30.252.153

打开浏览器输入
chenlly.com

OK