用Github搭建個人博客

由 Ghostzhang 發表於 2014-09-04 14:30

上個月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 #配置文件

站點已經建成，好像也沒寫下去的必要了。可是說好的美膚呢？不急，先來看看相關的語言。

###相關語言

在開始做皮膚之前，我們先來搞清楚模板還能做什麼，像公共的頭部、底部、導航什麼的，這些在上面並沒有提到，可是做爲一個模板引擎，怎麼都得支持吧。

YAML 一個幾乎所有編程語言都支持的易讀的數據序列化標準。
jekyll
Liquid Ruby的一個模板引擎庫。

在jekyll templates中可以看到，是支持include的，只需要在根目錄下創建一個名爲_includes的目錄，把頁面片放到這個目錄中，然後用下面的語法加載對應的頁面片文件即可：

{% include footer.html %} #加載名爲 footer.html 的文件到當前位置
{% include footer.html param="value" %} #也可傳參數到頁面片文件中，在footer.html文件中使用{{ include.param }}引用對應的值

目錄結構

/ username.github.com
    / _layouts #框架文件
        |-- default.html
    / _posts #要發佈的文章放這裏
        |-- 2014-09-02-hello-world.html
    / _includes #如果需要用到頁面片可以建這個目錄
        |-- footer.html
    / _data #自定義的數據內容
        |-- links.yml
    |-- index.html
    |-- _config.yml #配置文件

於是，我們可以用同樣的方法建立導航、頭部之類的公用代碼，然後放到_includes目錄中，在需要的位置引用。

###相關插件

做爲一個技術博客，常用會需要展示代碼，有幾種方式可以讓我們在頁面中展示所需的代碼片斷或者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": "[email protected]",
        "link": "http://blog.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 [email protected]: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 //更新到遠程服務器上