用Github搭建个人博客

由 Ghostzhang 发表于 2014-09-04

上个月26号下午开始，原先博客的服务器宕机了，虽然一直觉得过段时间就会好的，不过一连3天都没恢复，开始有点忍不住了，内容还是好多的，没了多可惜啊，在公司登录不了管理后台，想从数据库把内容搞出来也做不到，如果是文件就好了，哭~~。虽然一直以来对Git¹还停留在使用图形界面软件的程度，但还是想试试用GitHub²怎么折腾出一个博客出来。

搜索了关于github建站的文章后，看了前人各种安装node、ruby等天书般的命令就头大，最后还是选择了相对简单的hexo³，也在win7上成功搭建，教程见最下方。不过hexo的模板修改起来不太容易，看不懂，也就意味着只能用别人做好的theme，对于想要自己定制theme的同学来说，并不太适合。

这时候，[阿成][]同学又出现了，提到另一个方法，就是利用github已支持的jekyll，按要求建目录、文件，然后直接传到github对应的项目中就可以了，github会自动解析模板并显示，此方法优点就是只需要安装git就可以了，模板的自由度高，但缺点也很明显，就是本地无法预览，不过这问题不大。

下面就总结下我使用的方法，希望能帮到有用github搭建个人博客的同学。

站点

先看看阮一峰的《搭建一个免费的，无限流量的Blog—-github Pages和Jekyll入门》，看完对整个站点应该就有了一个大概的认识。如果你跟着他一步步做下来，无意外的话就能看到一个最简单的博客了。

目录结构

/ username.github.com
    / _layouts #框架文件
        |-- default.html
    / _posts #要发布的文章放这里
        |-- 2014-09-02-hello-world.html
    |-- index.html
    |-- _config.yml #配置文件

站点已经建成，好像也没写下去的必要了。可是说好的美肤呢？不急，先来看看相关的语言。

相关插件

做为一个技术博客，常用会需要展示代码，有几种方式可以让我们在页面中展示所需的代码片断或者Demo效果。

代码展示

直接展示

由于Github是支持使用Markdown的，所以我们可以使用Markdown的代码展示方式，具体可以看Markdown中的CODE BLOCKS部分。

高亮展示

对于代码的阅读体验，当然能高亮显示会更好些，jekyll也支持相应的代码高亮显示，像这样：


{% highlight 代码类型 %}
代码放这里
{% endhighlight %}

支持的代码类型可以在List of supported languages and lexers查到。

第三方平台

代码展示可以选择类似cssdeck.com的服务，同类的还有jsfiddle、RunJS等。以csdeck为例，创建一个demo后，选择Share菜单上中间的 “Embed on your webpage (blogs, articles, etc.) “，会得到类似下面的一段代码：

<pre class="_cssdeck_embed" data-pane="output" data-user="ghostzhang" data-href="zaalj4cz" data-version="0"></pre>
<script async src="http://cssdeck.com/assets/js/embed.js"></script>

我们可以把这段代码放到文章中，用来显示代码的效果。

为了引用更方便，这时我们就可以利用上面提到的include功能了，在 “_include” 目录下创建一个名为 “code.html” 的文件，内容如下：

<pre class="_cssdeck_embed" data-pane="output" data-user="换成你的用户名" data-href="{{ include.id }}" data-version="{{ include.v }}"></pre>
<script async src="http://cssdeck.com/assets/js/embed.js"></script>

注意里面的include.id、include.v，用于接收传进来的参数值，然后当我们要引用cssdeck上的代码时，只需要用下面的方式即可：


{% include demo.html id="zaalj4cz" v="0" %} #这里将id为zaalj4cz和版本为0两个参数传给include的页面片，即code.html

再利用Sublime Text的Snippet，自定义一个代码片段，就可以更快的输入了，可以这样做：

Tools > New Snippet…
内容见下方的Snippet代码
保存到Packages⁴目录中的任意位置，建议为 “/Packages/User/Snippet/”。

Snippet代码

<snippet>
    <content><![CDATA[
{% highlight ${1:text} ${2:linenos }%}
${3:{% raw %\}
$0
{% endraw %\}}
{% raw %\}
$0
{% endraw %\}}
{% endhighlight %}
]]></content>
    <!-- tabTrigger：定义快捷字符，可通过快捷字符+tab的方式快速输入  -->
    <tabTrigger>co</tabTrigger>
    <!-- scope：定义snippet在哪类文件中生效，这里指定了markdown类型 -->
    <scope>text.html.markdown</scope>
</snippet>

保存位置

|-- Packages
    |-- User
        |-- Snippet
            |-- jekyll-code.sublime-snippet

添加RSS

要方便定阅，可以添加RSS输出到我们的站点上，大体分为三步：

1.修改设置文件

name: 站点名称
description: 站点说明
url: 站点URL

2.在github上有一个jekyll-rss-feeds的项目，下载你需要的RSS文件放到站点根目录下

3.然后在页面的<head>区加上RSS的<link>即可，像

<link href='/feed.xml' rel='alternate' type='application/atom+xml' />

详细可看《RSS for Jekyll blogs》这篇文章。

评论系统

网上有几个可以嵌入到静态站点的评论系统，像多说、友言、畅言等等，还有Jekyll模板里默认使用的DISQUS。

安装都非常简单，申请账号，获取代码，然后修改几个参数（以多说为的代码为例）：

<!-- 多说评论框 start -->
<div class="ds-thread" data-thread-key="{{ page.id }}" data-title="{{ page.title }}" data-url="{{ site.url }}{{ page.url }}"></div>
<!-- 多说评论框 end -->

把上面的代码放到文章页模板的下面即可。

编写文章

Markdown 有多个实现, Github, 以及国内很多社区都是使用 GFM 包括 Python China, Ruby China, SegmentFault 都用了 GFM 语法，有 Node 模块 marked 支持 GFM 的渲染，GFM 和原始 Markdown 的区别可以看轻量级标记语言了解更多。

除了Markdown之外，还可以用Textile语法来写，我原先使用的博客系统Textpattern就是使用这种语法。

编辑器（Sublime Text）

知道编写的格式之后，有以有很多的编辑器可以选择，这里以Sublime Text为例，安装几个相关的插件，也可以把Sublime Text变成一个Markdown的编辑器。

安装插件

先安装传说中的插件管理Package Control，非常简单，进入Sublime Text，按ctrl+~打开控制台，将对应的代码复制进输入框，回车然后等待完成，重启Sublime Text后会在 “Preferences” 菜单下看到 “Package Control”，说明安装成功。

SUBLIME TEXT 2

import urllib2,os,hashlib; h = '7183a2d3e96f11eeadd761d777e62404' + 'e330c659d4bb41d3bdf022e94cab3cd0'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); os.makedirs( ipp ) if not os.path.exists(ipp) else None; urllib2.install_opener( urllib2.build_opener( urllib2.ProxyHandler()) ); by = urllib2.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); open( os.path.join( ipp, pf), 'wb' ).write(by) if dh == h else None; print('Error validating download (got %s instead of %s), please try manual install' % (dh, h) if dh != h else 'Please restart Sublime Text to finish installation')

SUBLIME TEXT 3

import urllib.request,os,hashlib; h = '7183a2d3e96f11eeadd761d777e62404' + 'e330c659d4bb41d3bdf022e94cab3cd0'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)

然后就可以通过Package Control来安装下面的插件了，按ctrl+shift+p，找到 “Package Control: Install Package”，然后在搜索里输入插件名，回车即可，安装完成后不需求重启即可使用。

Markdown Editing
SublimeTmpl
Markdown Preview

设置

Sublime Text

修改保存文件时的默认后缀形式

新建一个空白文件，设置文件类型为 “Syntax - Markdown”
然后 “Preferences > Setting - more > Syntax Specific - User” 会打开 “Markdown.sublime-settings”，然后将下面的内容保存（文件名应该是：Packages/User/Markdown.sublime-settings）

{
  "extensions": [ "md" ] 
}

Markdown Editing

在 “Preferences > Package Settings > Markdown Editing > Markdown GFM Settings - User” 里可以修改Makdown Editing的编辑界面和输出格式等等。

SublimeTmpl

在 “Packages/User/SublimeTmpl/templates/” 下增加一个模版文件：

|-- Packages
    |-- User
        |-- SublimeTmpl
            |-- templates
                |-- markdown.tmpl

内容如下：

---
layout: article
title: ${1:文章标题}
date: ${date}
tags: $2
---

# {{ page.title }}

$0

然后在 “Preferences > Package Settings > SublimeTmpl > Settings - Menu” 里加上

[
    {
        "id": "file",
        "children":
        [
            {
                "caption": "New File (SublimeTmpl)",
                "children":
                [
                    {
                        "caption": "Markdown",
                        "command": "sublime_tmpl",
                        "args": {
                            "type": "markdown"
                        }
                    },
                    ......

在 “Preferences > Package Settings > SublimeTmpl > Settings - Commands” 里加上

    {
        "caption": "Tmpl: Create Markdown", "command": "sublime_tmpl",
        "args": {"type": "markdown"}
    }

在 “Preferences > Package Settings > SublimeTmpl > Settings - User” 里加上

{
    "markdown": {
        "syntax": "Packages/MarkdownEditing/Markdown.tmLanguage"
    },
    "attr": {
        "author": "Ghostzhang" ,
        "email": "lovej1bz@gmail.com",
        "link": "http://www.cssforest.org"
    }
}

Markdown Preview

修改设置文件 “Preferences > Package Settings > Markdown Preview > Settings - User” ，加入

{
    "enabled_parsers": ["markdown"],
    "github_mode": "gfm",
    "enabled_parsers": ["github"],
    "build_action": "browser"
}

然后在编辑Markdown文件时，按下Ctrl+B即可在本地浏览器进行简单的预览了。

其它Markdown免费编辑器

Windows 平台

Linux 平台

ReText

Mac 平台

在线编辑器

浏览器插件

MaDe (Chrome)

常用git命令

git clone git@github.com:heiniuhaha/heiniuhaha.github.com.git//本地如果无远程代码，先做这步，不然就忽略
cd .ssh/heiniuhaha.github.com//定位到你blog的目录下
git pull origin master //先同步远程文件，后面的参数会自动连接你远程的文件
git status //查看本地自己修改了多少文件
git add .//添加远程不存在的git文件
git commit * -m "what I want told to someone"
git push origin master //更新到远程服务器上

参考文章

Sublime

hexo

Git

Git Linus Torvalds写的分布式版本管理系统，用与管理Linux的开发。 ↩
GitHub 一个提供Git托管服务的网站。 ↩
hexo 一个快速，简单和功能强大的博客，基于node.js。 ↩
可以在菜单 “Preferences > Browse Packages…” 找到目录的位置。 ↩