天天看點
傳回

使用Github Pages建獨立部落格

layout title description category
post 使用Github Pages建獨立部落格 Github本身就是不錯的代碼社群，他也提供了一些其他的服務，比如Github Pages，使用它可以很友善的建立自己的獨立部落格，并且免費。 blog

[{{ page.title }}][1]

2012-02-22 By {{ site.author_info }}

​​Github​​​很好的将代碼和社群聯系在了一起，于是發生了很多有趣的事情，世界也因為他美好了一點點。Github作為現在最流行的代碼倉庫，已經得到很多大公司和項目的青睐，比如​​jQuery​​​、​​Twitter​​​等。為使項目更友善的被人了解，介紹頁面少不了，甚至會需要完整的文檔站，Github替你想到了這一點，他提供了​​Github Pages​​的服務，不僅可以友善的為項目建立介紹站點，也可以用來建立個人部落格。

Github Pages有以下幾個優點：

  • 輕量級的部落格系統，沒有麻煩的配置
  • 使用标記語言，比如​​Markdown​​
  • 無需自己搭建伺服器
  • 根據Github的限制，對應的每個站有300MB空間
  • 可以綁定自己的域名

當然他也有缺點：

  • 使用​​Jekyll​​模闆系統，相當于靜态頁釋出，适合部落格，文檔介紹等。
  • 動态程式的部分相當局限，比如沒有評論，不過還好我們有解決方案。
  • 基于Git，很多東西需要動手，不像Wordpress有強大的背景

大緻介紹到此，作為個人部落格來說，簡潔清爽的表達自己的工作、心得，就已達目标，是以Github Pages是我認為此需求最完美的解決方案了。

購買、綁定獨立域名

雖說​​Godaddy​​曾支援過SOPA，并且首頁放着極其不專業的大胸美女，但是作為域名服務商他做的還不賴，選擇它最重要的原因是他支援支付寶，沒有信用卡有時真的很難過。

域名的購買不用多講，注冊、選域名、支付，有網購經驗的都毫無壓力，優惠碼也遍地皆是。域名的配置需要提醒一下，因為偉大英明的GFW的存在，我們必須多做些事情。

流傳Godaddy的域名解析伺服器被牆掉，導緻域名無法通路，後來這個事情在​​BeiYuu​​也發生了，不得已需要把域名解析服務遷移到國内比較穩定的服務商處，這個遷移對于域名來說沒有什麼風險，最終的控制權還是在Godaddy那裡，你随時都可以改回去。

我們選擇​​DNSPod​​的服務，他們的産品做得不錯，易用、免費，收費版有更高端的功能，暫不需要。注冊登入之後，按照DNSPod的說法，隻需三步（我們插入一步）：

  • 首先添加域名記錄，可參考DNSPod的幫助文檔：​​https://www.dnspod.cn/Support​​
  • 在DNSPod自己的域名下添加一條​​A記錄​​，位址就是Github Pages的服務IP位址：207.97.227.245
  • 在域名注冊商處修改DNS服務:去Godaddy修改Nameservers為這兩個位址：f1g1ns1.dnspod.net、f1g1ns2.dnspod.net。如果你不明白在哪裡修改，可以參考這裡：​​Godaddy注冊的域名如何使用DNSPod​​
  • 等待域名解析生效

域名的配置部分完成，跪謝方校長。

配置和使用Github

Git是版本管理的未來，他的優點我不再贅述，相關資料很多。推薦這本​​Git中文教程​​。

要使用Git，需要安裝它的用戶端，推薦在Linux下使用Git，會比較友善。Windows版的下載下傳位址在這裡：​​http://code.google.com/p/msysgit/downloads/list​​​。其他系統的安裝也可以參考官方的​​安裝教程​​。

下載下傳安裝用戶端之後，各個系統的配置就類似了，我們使用windows作為例子，Linux和Mac與此類似。

在Windows下，打開Git Bash，其他系統下面則打開終端（Terminal）： ​​

使用Github Pages建獨立部落格

​​

1、檢查SSH keys的設定

首先我們需要檢查你電腦上現有的ssh key：

$ cd ~/.ssh

如果顯示“No such file or directory”，跳到第三步，否則繼續。

2、備份和移除原來的ssh key設定：

因為已經存在key檔案，是以需要備份舊的資料并删除：

$ ls
config  id_rsa  id_rsa.pub  known_hosts
$ mkdir key_backup
$ cp id_rsa* key_backup
$ rm id_rsa*

3、生成新的SSH Key：

輸入下面的代碼，就可以生成新的key檔案，我們隻需要預設設定就好，是以當需要輸入檔案名的時候，回車就好。

$ ssh-keygen -t rsa -C "郵件位址@youremail.com"
Generating public/private rsa key pair.
Enter file in which to save the key (/Users/your_user_directory/.ssh/id_rsa):<回車就好>

然後系統會要你輸入加密串（​​Passphrase​​）：

Enter passphrase (empty for no passphrase):<輸入加密串>
Enter same passphrase again:<再次輸入加密串>

最後看到這樣的界面，就成功設定ssh key了： ​​

使用Github Pages建獨立部落格

​​

4、添加SSH Key到GitHub：

在本機設定SSH Key之後，需要添加到GitHub上，以完成SSH連結的設定。

用文本編輯工具打開id_rsa.pub檔案，如果看不到這個檔案，你需要設定顯示隐藏檔案。準确的複制這個檔案的内容，才能保證設定的成功。

在GitHub的首頁上點選設定按鈕： ​​​​

選擇SSH Keys項，把複制的内容粘貼進去，然後點選Add Key按鈕即可： ​​​​

PS：如果需要配置多個GitHub賬号，可以參看這個​​多個github帳号的SSH key切換​​​，不過需要提醒一下的是，如果你隻是通過這篇文章中所述配置了Host，那麼你多個賬号下面的送出使用者會是一個人，是以需要通過指令​

​git config --global --unset user.email​

​​删除使用者賬戶設定，在每一個repo下面使用​

​git config --local user.email '你的github郵箱@mail.com'​

​指令單獨設定使用者賬戶資訊

5、測試一下

可以輸入下面的指令，看看設定是否成功，​

​[email protected]​

​的部分不要修改：

$ ssh -T [email protected]

如果是下面的反應：

The authenticity of host 'github.com (207.97.227.239)' can't be established.
RSA key fingerprint is 16:27:ac:a5:76:28:2d:36:63:1b:56:4d:eb:df:a6:48.
Are you sure you want to continue connecting (yes/no)?

不要緊張，輸入​

​yes​

​就好，然後會看到：

Hi <em>username</em>! You've successfully authenticated, but GitHub does not provide shell access.

6、設定你的賬号資訊

現在你已經可以通過SSH連結到GitHub了，還有一些個人資訊需要完善的。

Git會根據使用者的名字和郵箱來記錄送出。GitHub也是用這些資訊來做權限的處理，輸入下面的代碼進行個人資訊的設定，把名稱和郵箱替換成你自己的，名字必須是你的真名，而不是GitHub的昵稱。

$ git config --global user.name "你的名字"
$ git config --global user.email "[email protected]"

設定GitHub的token

2012-4-28補充：新版的接口已經不需要配置token了，是以下面這段可以跳過了

有些工具沒有通過SSH來連結GitHub。如果要使用這類工具，你需要找到然後設定你的API Token。

在GitHub上，你可以點選Account Setting > Account Admin： ​​

使用Github Pages建獨立部落格

​​

然後在你的指令行中，輸入下面的指令，把token添加進去：

$ git config --global user.name "你的名字"
$ git config --global user.token 0123456789your123456789token

如果你改了GitHub的密碼，需要重新設定token。

成功了

好了，你已經可以成功連接配接GitHub了。

使用GitHub Pages建立部落格

與GitHub建立好連結之後，就可以友善的使用它提供的Pages服務，GitHub Pages分兩種，一種是你的GitHub使用者名建立的​

​username.github.io​

​這樣的使用者&組織頁（站），另一種是依附項目的pages。

User & Organization Pages

想建立個人部落格是用的第一種，形如​

​beiyuu.github.io​

​​這樣的可通路的站，每個使用者名下面隻能建立一個，建立之後點選​

​Admin​

​​進入項目管理，可以看到是這樣的： ​​​​​ 而普通的項目是這樣的，即使你也是用的​

​othername.github.io​

​​： ​​​​

建立好​

​username.github.io​

​​項目之後，送出一個​

​index.html​

​​檔案，然後​

​push​

​​到GitHub的​

​master​

​分支（也就是普通意義上的主幹）。第一次頁面生效需要一些時間，大概10分鐘左右。

生效之後，通路​

​username.github.io​

​​就可以看到你上傳的頁面了，​​beiyuu.github.​​io就是一個例子。

關于第二種項目​

​pages​

​​，簡單提一下，他和使用者pages使用的背景程式是同一套，隻不過它的目的是項目的幫助文檔等跟項目綁定的内容，是以需要在項目的​

​gh-pages​

​​分支上去送出相應的檔案，GitHub會自動幫你生成項目pages。具體的使用幫助可以參考​​Github Pages​​的官方文檔：

綁定域名

我們在第一部分就提到了在DNS部分的設定，再來看在GitHub的配置，要想讓​

​username.github.io​

​​能通過你自己的域名來通路，需要在項目的根目錄下建立一個名為​

​CNAME​

​的檔案，檔案内容形如：

beiyuu.com

你也可以綁定在二級域名上：

blog.beiyuu.com

需要提醒的一點是，如果你使用形如​

​beiyuu.com​

​這樣的一級域名的話，需要在DNS處設定A記錄到一個ip(ping username.github.io)，而不是在DNS處設定為CNAME的形式，否則可能會對其他服務（比如email）造成影響。

設定成功後，根據DNS的情況，最長可能需要一天才能生效，耐心等待吧。

Jekyll模闆系統

GitHub Pages為了提供對HTML内容的支援，選擇了​​Jekyll​​​作為模闆系統，Jekyll是一個強大的靜态模闆系統，作為個人部落格使用，基本上可以滿足要求，也能保持管理的友善，你可以檢視​​Jekyll官方文檔​​。

你可以直接fork​​我的項目​​，然後改名，就有了你自己的滿足Jekyll要求的文檔了，當然你也可以按照下面的介紹自己建立。

Jekyll基本結構

Jekyll的核心其實就是一個文本的轉換引擎，用你最喜歡的标記語言寫文檔，可以是Markdown、Textile或者HTML等等，再通過​

​layout​

​将文檔拼裝起來，根據你設定的URL規則來展現，這些都是通過嚴格的配置檔案來定義，最終的産出就是web頁面。

基本的Jekyll結構如下：

|-- _config.yml
|-- _includes
|-- _layouts
|   |-- default.html
|   `-- post.html
|-- _posts
|   |-- 2007-10-29-why-every-programmer-should-play-nethack.textile
|   `-- 2009-04-26-barcamp-boston-4-roundup.textile
|-- _site
`-- index.html

簡單介紹一下他們的作用：

_config.yml

配置檔案，用來定義你想要的效果，設定之後就不用關心了。

_includes

可以用來存放一些小的可複用的子產品，友善通過​

​{ % include file.ext %}​

​（去掉前兩個{中或者{與%中的空格，下同）靈活的調用。這條指令會調用_includes/file.ext檔案。

_layouts

這是模闆檔案存放的位置。模闆需要通過​​YAML front matter​​​來定義，後面會講到，​

​{ { content }}​

​标記用來将資料插入到這些模闆中來。

_posts

你的動态内容，一般來說就是你的部落格正文存放的檔案夾。他的命名有嚴格的規定，必須是​

​2012-02-22-artical-title.MARKUP​

​這樣的形式，MARKUP是你所使用标記語言的檔案字尾名，根據_config.yml中設定的連結規則，可以根據你的檔案名靈活調整，文章的日期和标記語言字尾與文章的标題的獨立的。

_site

這個是Jekyll生成的最終的文檔，不用去關心。最好把他放在你的​

​.gitignore​

​檔案中忽略它。

其他檔案夾

你可以建立任何的檔案夾，在根目錄下面也可以建立任何檔案，假設你建立了​

​project​

​​檔案夾，下面有一個​

​github-pages.md​

​​的檔案，那麼你就可以通過​

​yoursite.com/project/github-pages​

​​通路的到，如果你是使用一級域名的話。檔案字尾可以是​

​.html​

​​或者​

​markdown​

​​或者​

​textile​

​​。這裡還有很多的例子：​​https://github.com/mojombo/jekyll/wiki/Sites​​

Jekyll的配置

Jekyll的配置寫在_config.yml檔案中，可配置項有很多，我們不去一一追究了，很多配置雖有用但是一般不需要去關心，​​官方配置文檔​​​有很詳細的說明，确實需要了可以去這裡查，我們主要說兩個比較重要的東西，一個是​

​Permalink​

​，還有就是自定義項。

​

​Permalink​

​項用來定義你最終的文章連結是什麼形式，他有下面幾個變量：

  • ​

    ​year​

     ​ 檔案名中的年份
  • ​

    ​month​

     ​ 檔案名中的月份
  • ​

    ​day​

     ​ 檔案名中的日期
  • ​

    ​title​

     ​ 檔案名中的文章标題
  • ​

    ​categories​

     ​ 文章的分類，如果文章沒有分類，會忽略
  • ​

    ​i-month​

     ​ 檔案名中的除去字首0的月份
  • ​

    ​i-day​

     ​ 檔案名中的除去字首0的日期

看看最終的配置效果：

  • ​

    ​permalink: pretty​

     ​ /2009/04/29/slap-chop/index.html
  • ​

    ​permalink: /:month-:day-:year/:title.html​

     ​ /04-29-2009/slap-chop.html
  • ​

    ​permalink: /blog/:year/:month/:day/:title​

     ​ /blog/2009/04/29/slap-chop/index.html

我使用的是：

  • ​

    ​permalink: /:title​

     ​ /github-pages

自定義項的内容，例如我們定義了​

​title:BeiYuu的部落格​

​​這樣一項，那麼你就可以在文章中使用​

​{ { site.title }}​

​來引用這個變量了，非常友善定義些全局變量。

YAML Front Matter和模闆變量

對于使用YAML定義格式的文章，Jekyll會特别對待，他的格式要求比較嚴格，必須是這樣的形式：

---
layout: post
title: Blogging Like a Hacker
---

前後的​

​---​

​​不能省略，在這之間，你可以定一些你需要的變量，layout就是調用​

​_layouts​

​下面的某一個模闆，他還有一些其他的變量可以使用：

  • ​

    ​permalink​

     ​ 你可以對某一篇文章使用通用設定之外的永久連結
  • ​

    ​published​

     ​ 可以單獨設定某一篇文章是否需要釋出
  • ​

    ​category​

     ​ 設定文章的分類
  • ​

    ​tags​

     ​ 設定文章的tag

上面的​

​title​

​​就是自定義的内容，你也可以設定其他的内容，在文章中可以通過​

​{ { page.title }}​

​這樣的形式調用。

模闆變量，我們之前也涉及了不少了，還有其他需要的變量，可以參考官方的文檔：​​https://github.com/mojombo/jekyll/wiki/template-data​​

使用Disqus管理評論

模闆部分到此就算是配置完畢了，但是Jekyll隻是個靜态頁面的釋出系統，想做到關爽場倒是很容易，如果想要評論呢？也很簡單。

現在專做評論子產品的産品有很多，比如​​Disqus​​​，還有國産的​​多說​​，Disqus對現在各種系統的支援都比較全面，到寫部落格為止，多說現在僅是WordPress的一個插件，是以我這裡暫時也使用不了，多說與國内的社交網絡緊密結合，還是有很多亮點的，值得期待一下。我先選擇了Disqus。

新增賬號什麼的就不提了，Disqus支援很多的部落格平台，參見下圖： ​​​​

我們選擇最下面的​

​Universal Code​

​就好，然後會看到一個介紹頁面，把下面這段代碼複制到你的模闆裡面，可以隻複制到顯示文章的模闆中：

<div id="disqus_thread"></div>
<script type="text/javascript">
    /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
    var disqus_shortname = 'example'; // required: replace example with your forum shortname 這個地方需要改成你配置的網站名

    /* * * DON'T EDIT BELOW THIS LINE * * */
    (function() {
        var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
        dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
    })();
</script>
<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
<a href="http://disqus.com" class="dsq-brlink">blog comments powered by <span class="logo-disqus">Disqus</span></a>

配置完之後，你也可以做一些異步加載的處理，提高性能，比如我就在最開始頁面打開的時候不顯示評論，當你想看評論的時候，點選“顯示評論”再加載Disqus的子產品。代碼很簡單，你可以參考我的寫法。

$('#disqus_container .comment').on('click',function(){
        $(this).html('加載中...');
        var disqus_shortname = 'beiyuu';
        var that = this;
        BYB.includeScript('http://' + disqus_shortname + '.disqus.com/embed.js',function(){$(that).remove()}); //這是一個加載js的函數
});

如果你不喜歡Disqus的樣式，你也可以根據他生成的HTML結構，自己改寫樣式覆寫它的，Disqus現在也提供每個頁面的評論數接口，​​幫助文檔​​在這裡可以看到。

代碼高亮插件

如果寫技術部落格，代碼高亮少不了，有兩個可選插件​​DlHightLight代碼高亮元件​​​和​​Google Code Prettify​​。DLHightLight支援的語言相對較少一些，有js、css、xml和html，Google的高亮插件基本上任何語言都支援，也可以自定義語言，也支援自動識别，也有行号的特别支援。

Google的高亮插件使用也比較友善，隻需要在​

​<pre>​

​​的标簽上加入​

​prettyprint​

​即可。是以我選擇了Google Code Prettify。

結語

如果你跟着這篇不那麼詳盡的教程，成功搭建了自己的部落格，恭喜你！剩下的就是保持熱情的去寫自己的文章吧。

git github html
上一篇: 關于IOS,swift開發中的總結
下一篇: #阿維塔11首搭ADS2.0#無人駕駛真的要取代人為駕駛技術了嗎？也許在以前這是理想與願望！可是到了現在阿維塔11讓這遙

繼續閱讀