使用 GitHub Pages 免费搭建博客
介绍
GitHub 是我们程序员以码会友的地方。多的不说了。不知道 GitHub 的同学不是本篇目标读者。：）
GitHub Pages 让你的网站直接托管在 GitHub 的服务器上，不用付一毛钱。更新维护网站内容很简单，就简单的 git commit + git push 即可，因为 GitHub Pages 就是 GitHub 上的一个 Git 代码仓库。
GitHub Pages 原理
每个人的 Pages 自身是个特殊的 GitHub 项目。往这里 git push 自己网站的各种 .html 文件，然后就可以通过 xxx.github.io 来访问你的网站了，例如我的就是 yangsf5.github.io。
GitHub Pages 的 Hello World
见 Pages 官网。
以我的账户为例，我的用户名是 yangsf5。
- 创建 Pages 专门的代码库，库名为
yangsf5.github.io。 Clone 代码库到本地：
1
$ git clone https://github.com/yangsf5/yangsf5.github.io
以
Hello World为第一个页面的内容：1
2$ cd yangsf5.github.io
$ echo "Hello World" > index.html提交、上传代码：
1
2
3$ git add --all
$ git commit -m "Initial commit"
$ git push -u origin master访问
http://yangsf5.github.io网站。收工。
咦，要自己写 HTML？
这岂不是太 low 了。不用我们自己写。有工具可以直接将 Markdown 文件生成 HTML 文件。Pages 官网的最下边有介绍用 Jekyll 来做这件事，不过我们有更好用的 Hexo。
Markdown
如果以最简单的方式写作，不考虑排版格式等，一段一段的，从第一个写到最后一个字，那用任何软件来写文章都没什么区别。但如果想低成本的带点格式，那用 Markdown 来控制排版是首选。
Markdown 就是个标记语言，只有少数几个简单的标签，但足以应对我们文章的排版。
Hexo
几个工具的对比，对比数据来源网上：
- Jekyll
- 稍繁琐
- Octopress
- 基于 Jekyll，是 Jekyll 的简化版
- 文章一多，将 Markdown 编译 HTML 的速度就慢。关于慢可以看下唐巧的评价 《从 Octopress 迁移到 Hexo》。
- Hexo
- 安装简单，操作简单，命令少
- 将 Markdown 编译 HTML 的速度快
我是根据这些做了大概评估，选择的 Hexo。
主题就选的 Jacman。Jacman 直接集成一些中文博客常用的插件，例如多说评论、DISQUS 评论，百度统计、Google 统计，分类、标签、归档、标签云、友情链接、微博秀等。
搭建 Hexo 的基本思路
详细请见 Hexo 官方中文文档 ，这里说下基本思路。
安装 Hexo
- GitHub 肯定是要 Git 的，没有 Git 和 GitHub 账户的不要说话。
- Hexo 是 Node.js 写的，所以需要先安装好 Node.js。安装好之后就有了 Node.js 的包管理工具 npm。
- 使用 npm 来便捷安装 Hexo：
1
$ npm install -g hexo-cli
Hexo 的本地 Hello World
在本地创建一个 Hexo 工作文件夹
myblog：1
2
3$ hexo init myblog
$ cd myblog
$ npm installmyblog 下文件如下：
- _config.yml 是 Hexo 的配置。
- node_modules 是每个 Node.js 项目的依赖代码库，不用管。
- package.json 是每个 Node.js 项目的依赖库说明，不用管。
- scaffolds 模板文件夹，高端话题。非高级用户不用管。
- source 文件夹就是我们放原始 Markdown 写的文章的地方。每次发布上传文章时都要先将这里的原始 Markdown 格式文件编译成 HTML 文件。source 文件夹下默认带了 _post 文件夹，且后者里边有篇默认的 Markdown 文章，即 hello-world.md 文件。
- themes 文件夹里放的是主题，主题就是大家博客的页面布局、样式等。上边安装时带了一个默认主题
landscape，自己可以往这里放自定义主题。
本地运行 myblog 站点，在 myblog 路径下运行命令：
1
$ hexo s
输出如下：
1
2INFO Start processing
INFO Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.去浏览器访问
http://localhost:4000/就会神奇的看见咱们默认主题landscape风格的博客了。博客里默认自带了一篇Hello World文章。
将本地 Hello World 发布到 GitHub Pages 上
- 刚才
hexo s之后大家看见了本地站点的样子，但是肯定会好奇整个站点的 HTML、CSS 等文件在哪呢？去 myblog 文件夹下找也没找到啊。这个应该是 Hexo 运行的时候直接将 themes 和 Markdown 文件的编译结果放自己的内存里了。 想看编译后的站点文件，运行命令
hexo generate或者 简写hexo g：1
$ hexo g
这时就能看见很多生成了很多 .html、.css、.js 文件，这些目标文件出现在新文件夹 myblog/public 里。public 里的文件如下：
1
2
3
4
5
6
7
82016/07/16/hello-world/index.html # 这里就是我们的 Hello World 文章
archives/index.html # 这是归档页的首页
archives/2016/index.html # 这是 2016 年归档的索引页面，每年级别归档
archives/2016/07/index.html # 这是 2016 年 7 月的归档索引页面，每月级别的归档
css/* # 这里是 CSS 样式文件
fancybox/*
index.html # 这是博客站点首页
js/* # 这里放的是 JavaScript 文件由上可以看出通过
hexo g就能生成&更新博客站点的 HTML 文件。到这大家应该发现我们可以与文章开头的 GitHub Pages 的 Hello World 衔接上了，只需是将 public 里的文件传进yangsf5.github.io代码库里。我们不必每次生成 public/* 后手动去提交更新我们的 *.github.io 代码库。Hexo 的命令
hexo d -g可以帮我们生成并自动提交更新到代码库。只需将 myblog/_config.yml 里deploy段做下配置：1
2
3
4deploy:
type: git
repo: git@github.com:yangsf5/yangsf5.github.io.git
branch: master别忘了将其中的 yangsf5 改为你自己的 GitHub 账户名。另外注意 .yml 文件的格式，缩进必须是空格，而不能是 TAB 字符。 然后执行如下命令即可发布：
1
$ hexo d -g
命令的输出最后一行提示错误：
1
ERROR Deployer not found: git
这个说的不是 Git 命令，而是 Hexo 的一个 npm 包
hexo-deployer-git，装下即可：1
$ npm install hexo-deployer-git --save
然后再
hexo d -g后，去你的 *.github.io 就可以看见你的线上博客了。
以上基本步骤，其他的例如要修改网站 title 等，都可以看官方详细文档，大部分可以通过修改 _config.yml 即可。每次修改这个配置文件后想在本地看看效果，需要重启下 Hexo，即重新执行下 hexo s。
安装 Jacman 的基本思路
详细请见 Jacman GitHub、如何使用 Jacman 主题，这里做下补充说明。
我把 Jacman 的主题做了点小修改，主要是把一些不想要的东西做了下精简，如果大家觉得我这个比官方那个更简洁，可以直接以我的 https://github.com/yangsf5/jacman 为起点 Fork 你的定制版。
例如三癫 Fork 了我的修改版，变成她自己的 https://github.com/KittyCookie/jacman，她的 Jacman 之旅就是以这个姿势开始：1
2
3
4$ cd myblog/themes
$ git clone https://github.com/KittyCookie/jacman.git
$ cd jacman
$ git checkout -b kittycookie yangsf5
注意上边最后一步，以我的分支 yangsf5 为起点创建了三癫自己的分支 kittycookie。这样大家自己的修改在自己分支上进行，以后合并 Jacman 官方的修改或者其他人的修改会更方便些。
（注意：各种插件的标识要换成你自己的，否则就统计到我这里了。这是要付我精神损失费的。）
多说的 shortname 不是你的昵称，而是要去 http://duoshuo.com 点击我要安装，注册你的多说二级域名。去掉 .duoshuo.com 部分，剩下的就是你的 shortname。
后续按 Jacman 官方文档走就可以了。
我的写博客及发布整体流程
- 在 Ulysses 里写好文章。（这个是我个人的工具，大家可以使用免费的 GitHub 官方开发的 Atom 或者其他 Markdown 编辑器）
- 在 myblog 下创建 Markdown 文件。我没有使用
hexo new，而是直接在 source/_post 下创建文件，弄好头部标识，将 Ulysses 里文章的 Markdown 文本拷过来。 - 保存好之后，在本地的
http://localhost:4000/看下文章排版、分类什么的时候 OK，有问题就调整。 - 没问题之后，
hexo d -g就直接发布了。 - 然后去
blog.clawz.me看看线上是否 OK。
进阶话题
不想用 *.github.io 这个域名，想用自己的域名：
- 在 source 文件夹下创建 CNAME 文件，在里边写上你的域名，例如我的就是
blog.clawz.me。 - 去你的 DNS 服务商那做下相应的设置。
- 注意这里的 CNAME 文件一定要放到 source 文件夹下，而不是 public 文件下。放 public 下没用，每次
hexo g的时候会自动将 public 里那些不存在于 source 里的文件删除。
想在博客文章里放些图片：
- Markdown 有链接图片的语法。
- 如果不想引用网络图片，而是直接将图片放在自己的站点里：
- 在 source 里创建文件夹 images；
- 将图片拷到 images 里，例如图片文件
source/images/clawz.jpg； - 在文章里引用时直接
即可。
source 里的资源想用其他 Git 库来保存：
- _config.yml 里可以配置 source 的路径，不过绝对路径我没有试过。
- 我自己是用一个专门的 Git Private 代码库
writing来存的。然后将writing里的 blog_source 软链到 myblog 的 source 上。这样每次我调完 blog_source 里的 Markdown 格式，也会同步将修改同步到writing远端库里，防止丢失。 - Git Private 是要美刀的，如果不舍得这个花费，可以试试
https://bitbucket.org/，这是可以创建免费的私有库。后者我以前用的时候也挺好用的。
感觉国内访问 GitHub Pages 搭的博客慢咋办?
- 参考唐巧的文章《将博客从 GitHub 迁移到 GitCafe》。
- GitCafe 其实就是国内版的 GitHub。不要被标题里
迁移给迷惑了，其实这个东西原理一样，而且都是 Git 代码库，其实就是给我们的 GitHub Pages 博客库增加个远程仓库地址 GitCafe 对应的。文章里提到的镜像更准确些。 - 我暂时没有试这个 GitCafe，我的 Pages 博客从监控宝里看也大概是首页平均打开速度是 2s，但我觉得我的博客暂时访问量应该不大，等大了再考虑这个延迟问题。
2016-07-16 更新
在自己搭完之后不久，又帮程序媛 三癫 搭了一遍，并完善这个教程。所以应该没有大的问题了。
2016-07-20 更新
徐龙同学已经根据这个教程搞定了 Hexo 生成的带默认主题的 博客，继续搭建中……
Jian 哥表示教程里对上面上的几款博客生成器的对比很有用。恩，Jian 哥，我懂你。Jian 哥正在搭建中……
后续
后续根据大家的反馈，会补述些常见的误解或者大家很难搞定的问题的解决方案。
