使用Github Pages建獨立博客

時間 2019-11-12

標籤使用 github pages 獨立博客欄目 Git 简体版

原文原文鏈接

->轉載自http://beiyuu.com/github-pages/<-javascript

本文地址: http://www.cnblogs.com/blackmanba/p/3675558.html或者http://forkme.info/github-pages/, 轉載請註明源地址。css

Github很好的將代碼和社區聯繫在了一塊兒，因而發生了不少有趣的事情，世界也由於他美好了一點點。Github做爲如今最流行的代碼倉庫，已經獲得不少大公司和項目的青睞，好比jQuery、Twitter等。爲使項目更方便的被人理解，介紹頁面少不了，甚至會須要完整的文檔站，Github替你想到了這一點，他提供了Github Pages的服務，不只能夠方便的爲項目創建介紹站點，也能夠用來創建我的博客。html

Github Pages有如下幾個優勢：java

輕量級的博客系統，沒有麻煩的配置
使用標記語言，好比Markdown
無需本身搭建服務器
根據Github的限制，對應的每一個站有300MB空間
能夠綁定本身的域名

固然他也有缺點：python

使用Jekyll模板系統，至關於靜態頁發佈，適合博客，文檔介紹等。
動態程序的部分至關侷限，好比沒有評論，不過還好咱們有解決方案。
基於Git，不少東西須要動手，不像Wordpress有強大的後臺

大體介紹到此，做爲我的博客來講，簡潔清爽的表達本身的工做、心得，就已達目標，因此Github Pages是我認爲此需求最完美的解決方案了。jquery

購買、綁定獨立域名

雖然說Godaddy曾支持過SOPA，而且首頁放着極其不專業的大胸美女，可是做爲域名服務商他作的還不賴，選擇它最重要的緣由是他支持支付寶，沒有信用卡有時真的很難過。git

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

流傳Godaddy的域名解析服務器被牆掉，致使域名沒法訪問，後來這個事情在BeiYuu也發生了，不得已須要把域名解析服務遷移到國內比較穩定的服務商處，這個遷移對於域名來講沒有什麼風險，最終的控制權仍是在Godaddy那裏，你隨時均可以改回去。web

咱們選擇DNSPod的服務，他們的產品作得不錯，易用、免費，收費版有更高端的功能，暫不須要。註冊登陸以後，按照DNSPod的說法，只需三步（咱們插入一步）：shell

首先添加域名記錄，可參考DNSPod的幫助文檔：https://www.dnspod.cn/Support
在DNSPod本身的域名下添加一條A記錄，地址就是Github Pages的服務IP地址：207.97.227.245(當前IP地址已經變化爲192.30.252.153和192.30.252.154)
在域名註冊商處修改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）：

一、檢查SSH keys的設置

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

$ cd ~/.ssh

若是顯示「No such file or directory」，跳到第三步，不然繼續。

二、備份和移除原來的ssh key設置：

由於已經存在key文件，因此須要備份舊的數據並刪除：

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

三、生成新的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了：

四、添加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' 命令單獨設置用戶帳戶信息

五、測試一下

能夠輸入下面的命令，看看設置是否成功，git@github.com的部分不要修改：

$ ssh -T git@github.com

若是是下面的反應：

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.

六、設置你的帳號信息

如今你已經能夠經過SSH連接到GitHub了，還有一些我的信息須要完善的。

Git會根據用戶的名字和郵箱來記錄提交。GitHub也是用這些信息來作權限的處理，輸入下面的代碼進行我的信息的設置，把名稱和郵箱替換成你本身的，名字必須是你的真名，而不是GitHub的暱稱。

$ git config --global user.name "你的名字"
    $ git config --global user.email "your_email@youremail.com"

設置GitHub的token

2012-4-28補充：新版的接口已經不須要配置token了，因此下面這段能夠跳過了

有些工具沒有經過SSH來連接GitHub。若是要使用這類工具，你須要找到而後設置你的API Token。

在GitHub上，你能夠點擊Account Setting > Account Admin：

而後在你的命令行中，輸入下面的命令，把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.com就是一個例子。

關於第二種項目pages，簡單提一下，他和用戶pages使用的後臺程序是同一套，只不過它的目的是項目的幫助文檔等跟項目綁定的內容，因此須要在項目的gh-pages分支上去提交相應的文件，GitHub會自動幫你生成項目pages。具體的使用幫助能夠參考Github Pages的官方文檔：

綁定域名

咱們在第一部分就提到了在DNS部分的設置，再來看在GitHub的配置，要想讓username.github.io能經過你本身的域名來訪問，須要在項目的根目錄下新建一個名爲CNAME的文件，文件內容形如：

beiyuu.com

你也能夠綁定在二級域名上：

blog.beiyuu.com

須要提醒的一點是，若是你使用形如beiyuu.com這樣的一級域名的話，須要在DNS處設置A記錄到207.97.227.245（這個地址會有變更，這裏查看），而不是在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。

搭建本地jekyll環境

這裏主要介紹一下在Mac OS X下面的安裝過程，其餘操做系統能夠參考官方的jekyll安裝。

做爲生活在水深火熱的牆內人民，有必要進行下面一步修改gem的源，方便咱們更快的下載所需組建：

sudo gem sources --remove http://rubygems.org/ 
    sudo gem sources -a http://ruby.taobao.org/

而後用Gem安裝jekyll

$ gem install jekyll

不過通常若是有出錯提示，你可能須要這樣安裝：

$ sudo gem install jekyll

我到了這一步的時候老是提示錯誤 Failed to build gem native extension ，極可能的一個緣由是沒有安裝rvm，rvm的安裝能夠參考這裏，或者敲入下面的命令：

$ curl -L https://get.rvm.io | bash -s stable --ruby

而後還須要安裝Markdown的解釋器，這個須要在你的_config.yml裏面設置 markdown:rdiscount ：

$ gem install jekyll rdiscount

好了，若是一切順利的話，本地環境就基本搭建完成了，進入以前咱們創建的博客目錄，運行下面的命令：

$ jekyll server (原文: jekyll --server)

這個時候，你就能夠經過 localhost:4000 來訪問了。還有關於jekyll bootstrap的資料，須要本身修改調試的，能夠研究一下。

我在這個過程當中還遇到兩個詭異的沒有解決的問題，一個是我放在根目錄下面的blog.md等文件，在GitHub的pages服務上一切正常，能夠經過 beiyuu.com/blog 訪問的到，可是在本地環境下，老是 not found ，非常讓人鬱悶，看生成的 _site 目錄下面的文件，也是正常的 blog.html ，但就是找不到，只有當我把URL改成 localhost:4000/blog.html 的時候，才能訪問的到，環境不一樣真糟糕。

還有一個是關於 category 的問題，根據 YAML 的語法，咱們在文章頭部能夠定義文章所屬的類別，也能夠定義爲 category:[blog,rss] 這樣子的多類別，我在本地試一切正常，可是push到GitHub以後，就沒法讀取了，真讓人着急，沒有辦法，只能採用別的辦法知足個人需求了。這裏還有一篇Jekyll 本地調試之若干問題，安裝中若是有其餘問題，也能夠對照參考一下。