介绍

GitHub 是我们程序员以码会友的地方。多的不说了。不知道 GitHub 的同学不是本篇目标读者。：）

GitHub Pages 让你的网站直接托管在 GitHub 的服务器上，不用付一毛钱。更新维护网站内容很简单，就简单的 git commit + git push 即可，因为 GitHub Pages 就是 GitHub 上的一个 Git 代码仓库。

GitHub Pages 原理

每个人的 Pages 自身是个特殊的 GitHub 项目。往这里 git push 自己网站的各种 .html 文件，然后就可以通过 http://xxx.github.io 来访问你的网站了，例如我的就是 http://yangsf5.github.io。

GitHub Pages 的 Hello World

见 Pages 官网。

以我的账户为例，我的用户名是 yangsf5。

• 创建 Pages 专门的代码库，库名为 http://yangsf5.github.io。
• Clone 代码库到本地：$ git clone https://github.com/yangsf5/yangsf5.github.io
• 以 Hello World 为第一个页面的内容：$ cd http://yangsf5.github.io
  $ echo "Hello World" > index.html
• 提交、上传代码：$ 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：$ npm install -g hexo-cli

Hexo 的本地 Hello World

• 在本地创建一个 Hexo 工作文件夹 myblog：$ hexo init myblog
  $ cd myblog
  $ npm install
• myblog 下文件如下：
  • _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 路径下运行命令：$ hexo s
• 输出如下：INFO 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：$ hexo g
• 这时就能看见很多生成了很多 .html、.css、.js 文件，这些目标文件出现在新文件夹 myblog/public 里。public 里的文件如下：2016/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 里的文件传进 http://yangsf5.github.io 代码库里。
• 我们不必每次生成 public/* 后手动去提交更新我们的 *.http://github.io 代码库。Hexo 的命令 hexo d -g 可以帮我们生成并自动提交更新到代码库。只需将 myblog/_config.yml 里 deploy 段做下配置：deploy:
  type: git
  repo: git@github.com:yangsf5/yangsf5.github.io.git
  branch: master
• 别忘了将其中的 yangsf5 改为你自己的 GitHub 账户名。另外注意 .yml 文件的格式，缩进必须是空格，而不能是 TAB 字符。 然后执行如下命令即可发布：$ hexo d -g
• 命令的输出最后一行提示错误：ERROR Deployer not found: git
• 这个说的不是 Git 命令，而是 Hexo 的一个 npm 包 hexo-deployer-git，装下即可：$ npm install hexo-deployer-git --save
• 然后再 hexo d -g 后，去你的 *.http://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 之旅就是以这个姿势开始：

$ 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 点击我要安装，注册你的多说二级域名。去掉 .http://duoshuo.com 部分，剩下的就是你的 shortname。

后续按 Jacman 官方文档走就可以了。

我的写博客及发布整体流程

• 在 Ulysses 里写好文章。（这个是我个人的工具，大家可以使用免费的 GitHub 官方开发的 Atom 或者其他 Markdown 编辑器）
• 在 myblog 下创建 Markdown 文件。我没有使用 hexo new，而是直接在 source/_post 下创建文件，弄好头部标识，将 Ulysses 里文章的 Markdown 文本拷过来。
• 保存好之后，在本地的 http://localhost:4000/ 看下文章排版、分类什么的时候 OK，有问题就调整。
• 没问题之后，hexo d -g 就直接发布了。
• 然后去 http://blog.clawz.me 看看线上是否 OK。

进阶话题

不想用 *.http://github.io 这个域名，想用自己的域名：

• 在 source 文件夹下创建 CNAME 文件，在里边写上你的域名，例如我的就是 http://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 哥正在搭建中……

后续

后续根据大家的反馈，会补述些常见的误解或者大家很难搞定的问题的解决方案。

文章首发在公众号「结伴学袭」，喜欢的话，可以搜索「结伴学袭」或「ComebackEve」关注下。

​