HackerMi

一、缘起

从大学到现在一直有记录自己生活的习惯，不过形式一直在变。大学时因为网易邮箱的缘故，顺便就用网易博客记录了。毕业后，工作一直比较忙，干脆用记事本偶尔写写。来北京后，尝试过新浪微博，新浪博客等。这些年折腾下来，基本算是业余博客写作爱好者。

早在13年就看到可以用github写博客，但因自己的懈怠，一直没有真正建起来。只是心血来潮的申请了一个好玩的域名，搞了一个测试页面，便荒废在那里。一转眼2年过去了，已是而立之年的我，貌似没有什么像样的东西。唯一的安慰就是自己还算努力，研究了不少东西，但疏于整理，一直荒废在电脑的某个文件夹里。新的一年打算给他们安个家，温故知新，输出一些有价值的东西。先从搭建GitHub博客开始，闲言少叙，开始正题。

二、基本概念

相较其他博客，GitHub上搭建博客有一定的技术门槛，需要自己动手摸索。对于不做前端开发的人来说，还是有些陌生。这里先说说自己对一些技术概念的理解。

Jekyll

官方的定义：将纯文本转化为静态博客网站。简单明了，第一眼感觉很是神奇。研究了一下他的工作原理，发现Jekyll其实有些像JAVA虚拟机。它有自己的编程语言Markdown 和 Liquid，用户利用这些语言为自己的blog“编程”，而后jekyll将他们翻译为HTML静态网页，在利用内置的HTML Server将静态网页运转起来，最终构成大家熟悉的网站。

Markdown

Markdown 有些像HTML语言，有自己的标记和符号。根据自己的使用情况来看，Markdown更多的是针对写作————简化排版操作、易用。它没有HTML语言那么多繁杂的标签，标签也更形象和人性化，用起来蛮顺手的。技术上，jekyll最终将Markdown翻译为对应的HTML语言，从这角度上说Markdown语言更像是在HTML语言之上做了进一步简化和包装，从而达到简单易用的目的。

Liquid

Liquid 是基于Ruby的模板语言，主要用来加载网站的动态内容。它有些类似javascript，主要帮助jekyll生成网站页面。相较Markdown方便用户写作的目的，Liquid则是方便用户控制自己的网站，包括布局，交互等。

GitHub & GitHub Page

GitHub 程序员圈大名鼎鼎的社交化代码管理网站，换句话就是Git的云版实现。有了它，程序员在任何有网络的地方随时提交代码，十分方便。GitHub 为每个用户提供了一种展示自己管理项目的机制 ———— GitHub Page，用户可以利用它编写自己的静态页面，说明自己的项目。同时静态页面也使用类似其他Git项目的代码管理。这不仅为用户提供了控制展示页面的权利，同时也免去了管理网站的麻烦。

三、搭建思路

大家可能已经厌倦了各种技术术语的轰炸，这里换个角度介绍搭建思路。

Blog 1.0 版本

我们从GitHub Page作为切入点。GitHub Page既然可以自己管理展示的页面，那我们就在本地构建一个静态网页构成的网站（即由静态网页和超链接组织起来的网站，本质上讲就是一些静态网页根据内容需要的重新组合），而后我们将它上传至GitHub，并将其首页作为GitHub Page的展示页面。理论上可行，但是这样做无疑增加了很多网站维护的工作，有办法简化吗？当然，来看2.0版本。

Blog 2.0 版本

对就是Jekyll，他可以将一般的文本转化为静态网站。我们用Jekyll编写自己的静态网站，来解决1.0中的网站维护问题。 Jekyll原生使用的是Liquid语言，用这个语言编写页面时还是需要处理一些页面的东西，写作的注意力右被分散了，能不能再简单点？当然，进一步3.0版本。

Blog 3.0 版本

这回Markdown登场了，简单看过Markdown的语法就会发现，这种语言就是专为写作设计的，完全不像HTML那么繁杂而且反人类。 Jekyll果断支持了这种语言，这样我们就可以把与写作无关的事减到最少。

总结一下整体思路：
1. 使用Markdown撰写Blog内容
2. 使用Jekyll生成静态网站页面
3. 将内容提交GitHub，利用GitHub Page展示自己的Blog

四、搭建方法

搭建基于Github 的Blog主要包括两部分内容，本机环境以及网站配置

本机环境搭建

本机环境主要用于写作、验证、排版内容，主要工作包括：

1. Git 本地环境安装  
2. Jekyll 基础环境搭建
3. Jekyll 安装

Git本地环境安装

命令行版本请参照官方文档
当然你如果不喜欢命令行，GitHub开发了图形界面的版本，请参考官网

Jekyll基础环境安装

Jekyll官方文档推荐通过Ruby Gem安装，所以需要安装Ruby开发环境，不同平台请参考：
Window平台安装Ruby，Mac & Linux(Ubuntu)平台安装Ruby

注意：
1. Ruby 需要安装 v1.9.3 以上版本，旧版本的Ruby无法安装jekyll 2或3
2. 有老版本的Ruby需要先卸载，再安装

有了Ruby开发环境后，接下来安装Ruby Gems —— Ruby的软件包安装工具，类似Ubuntu中的apt-get，安装过程请参考官方教程。

最后是三个可选工具的安装，一个是NodeJS，安装请参考官网，它其实是JavaScript引擎，目前大部分系统都已经内置，一般没有特殊需要可以不安装；其二是Python，个人推荐还是安装，主要是为了代码高亮工具Pygments（安装和使用请参考这里）；最后是markdown渲染引擎，首选C语言编写RDiscount，内置的Maruku效率比较低，不推荐，安装方法参考这里

Jekyll安装

准备好基础环境后，Jekyll的安装非常简单，只需一条命令：

$ gem install jekyll

Tips: 对于Window平台，整个安装也可以参考这篇文章

网站配置

网站配置主要用来发布内容，主要工作包括：

1. GitHub账户注册
2. Jekyll Pages页面的配置
3. 独立域名的申请和挂接GitHub

GitHub 账户注册

注册过程和一般网站没有区别，直接登录官网注册即可

Jekyll Pages页面配置

整个配置过程非常简单，主要步骤如下：

1. 创建公开的代码仓库，使用username.github.io方式命名，其中username是你的github账户名 
2. 同步代码库到本地
3. 创建主页面（index.html）并提交到代码库

详细请参考官网教程

独立域名的申请和挂接GitHub

说到域名申请首推Godaddy，国内的域名提供商不太靠谱。现在Godaddy支持支付宝了，购买域名也十分方便，这里找到一篇百度经验不错，大家照做即可。

注意：网上有很多Godaddy优惠码，个人建议不要用，因为Godaddy后续会要求你上传身份证护照等信息作为代价。

买完域名后，一般会找一个DNS服务商为你提供域名解析相关的服务，比如域名解析次数统计，域名安全等。当然这些不是必须的，不过国内有免费的域名服务商而且做的不错，还帮你解决了电信，网通，教育网互通的问题，何乐而不为。这里推荐DNSPod, 配置很简单，只需添加一条UNAME记录即可：

详细教程参见这里。

最后，需要让GitHub知道你的域名，只需在项目的根目录下创建CNAME文件，并且填写域名即可，详细操作请参考这里

五、博客建设

这里主要整理一些有用的博客资源，以及日常使用技巧。

Jekyll使用技巧

常用的全局变量

发布草稿常用方法

• 在_post目录下的文章的YAML列表中增加 published 并设置为 false。
• 在根目录下创建 _ drafts目录，讲草稿文件放置在这个目录下使用jekyll s –drafts 讲 _ drafts目录下的文件加入网站编译，更多参考这里

MarkDown使用技巧

• 实现页内跳转的方法
• 换行方法：在行尾追加两个空格在换行
• MarkDown首行缩进的方法

博客资源

Markdown 免费编辑器
个人比较推荐在线编辑器Markable.in，所有平台都通用，云存储。

• Windows 平台 MarkdownPad, MarkPad
• Linux 平台 ReText
• Mac 平台 Mou
• 在线编辑器 Markable.in, Dillinger.io
• 浏览器插件 MaDe (Chrome)
• 高级应用 Sublime Text 2 + MarkdownEditing / 教程

Blog 模板

• Jekyll主题网站
• 简洁明快风格
• 优雅风格

博客评论工具
这里推荐Disqus，简单易用，详细教程参见这里

Font Awesome 网站图标集与使用

• 图标资源库
• 图标使用教程

网站CSS样式
推荐使用Bootstrap，具体参见官网