使用Github Pages建獨立博客

時間  2019-11-21
標籤 使用 github pages 獨立 博客 欄目 Git 简体版
原文   原文鏈接

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

 

Github Pages有如下幾個優勢：css

  • 輕量級的博客系統，沒有麻煩的配置html

  • 使用標記語言，好比Markdownjava

  • 無需本身搭建服務器jquery

  • 根據Github的限制，對應的每一個站有300MB空間git

  • 能夠綁定本身的域名github

固然他也有缺點：web

  • 使用Jekyll模板系統，至關於靜態頁發佈，適合博客，文檔介紹等。shell

  • 動態程序的部分至關侷限，好比沒有評論，不過還好咱們有解決方案。bootstrap

  • 基於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）： 

 

一、檢查SSH keys的設置

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

C代碼  收藏代碼

  1. $ cd ~/.ssh  

 

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

 

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

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

C代碼  收藏代碼

  1. $ ls  

  2. config  id_rsa  id_rsa.pub  known_hosts  

  3. $ mkdir key_backup  

  4. $ cp id_rsa* key_backup  

  5. $ rm id_rsa*  

 

三、生成新的SSH Key：

輸入下面的代碼，就能夠生成新的key文件，咱們只須要默認設置就好，因此當須要輸入文件名的時候，回車就好。

C代碼  收藏代碼

  1. $ ssh-keygen -t rsa -C "郵件地址@youremail.com"  

  2. Generating public/private rsa key pair.  

  3. Enter file in which to save the key (/Users/your_user_directory/.ssh/id_rsa):<回車就好>  

 

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

C代碼  收藏代碼

  1. Enter passphrase (empty for no passphrase):<輸入加密串>  

  2. 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的部分不要修改：

C代碼  收藏代碼

  1. $ ssh -T git@github.com  

 

若是是下面的反應：

C代碼  收藏代碼

  1. The authenticity of host 'github.com (207.97.227.239)' can't be established.  

  2. RSA key fingerprint is 16:27:ac:a5:76:28:2d:36:63:1b:56:4d:eb:df:a6:48.  

  3. Are you sure you want to continue connecting (yes/no)?  

 

沒關係張，輸入yes就好，而後會看到：

C代碼  收藏代碼

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

 

六、設置你的帳號信息

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

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

C代碼  收藏代碼

  1. $ git config --global user.name "你的名字"  

  2. $ 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添加進去：

C代碼  收藏代碼

  1. $ git config --global user.name "你的名字"  

  2. $ git config --global user.token 0123456789your123456789token  

 

若是你改了GitHub的密碼，須要從新設置token。

 

成功了

好了，你已經能夠成功鏈接GitHub了。

 

使用GitHub Pages創建博客

與GitHub創建好連接以後，就能夠方便的使用它提供的Pages服務，GitHub Pages分兩種，一種是你的GitHub用戶名創建的username.github.com這樣的用戶&組織頁（站），另外一種是依附項目的pages。

 

User & Organization Pages

想創建我的博客是用的第一種，形如beiyuu.github.com這樣的可訪問的站，每一個用戶名下面只能創建一個，建立以後點擊Admin進入項目管理，能夠看到是這樣的：  而普通的項目是這樣的，即便你也是用的othername.github.com： 

建立好username.github.com項目以後，提交一個index.html文件，而後push到GitHub的master分支（也就是普通意義上的主幹）。第一次頁面生效須要一些時間，大概10分鐘左右。

生效以後，訪問username.github.com就能夠看到你上傳的頁面了，beiyuu.github.com就是一個例子。

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

 

綁定域名

咱們在第一部分就提到了在DNS部分的設置，再來看在GitHub的配置，要想讓username.github.com能經過你本身的域名來訪問，須要在項目的根目錄下新建一個名爲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結構以下：

C代碼  收藏代碼

  1. |-- _config.yml  

  2. |-- _includes  

  3. |-- _layouts  

  4. |   |-- default.html  

  5. |   `-- post.html  

  6. |-- _posts  

  7. |   |-- 2007-10-29-why-every-programmer-should-play-nethack.textile  

  8. |   `-- 2009-04-26-barcamp-boston-4-roundup.textile  

  9. |-- _site  

  10. `-- 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就好，而後會看到一個介紹頁面，把下面這段代碼複製到你的模板裏面，能夠只複製到顯示文章的模板中：

Html代碼  收藏代碼

  1. <div id="disqus_thread"></div>  

  2. <script type="text/javascript">  

  3.     /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */  

  4.     var disqus_shortname = 'example'; // required: replace example with your forum shortname 這個地方須要改爲你配置的網站名  

  5.   

  6.     /* * * DON'T EDIT BELOW THIS LINE * * */  

  7.     (function() {  

  8.         var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;  

  9.         dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';  

  10.         (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);  

  11.     })();  

  12. </script>  

  13. <noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>  

  14. <a href="http://disqus.com" class="dsq-brlink">blog comments powered by <span class="logo-disqus">Disqus</span></a>  

 

配置完以後，你也能夠作一些異步加載的處理，提升性能，好比我就在最開始頁面打開的時候不顯示評論，當你想看評論的時候，點擊「顯示評論」再加載Disqus的模塊。代碼很簡單，你能夠參考個人寫法。

Js代碼  收藏代碼

  1. $('#disqus_container .comment').on('click',function(){  

  2.         $(this).html('加載中...');  

  3.         var disqus_shortname = 'beiyuu';  

  4.         var that = this;  

  5.         BYB.includeScript('http://' + disqus_shortname + '.disqus.com/embed.js',function(){$(that).remove()}); //這是一個加載js的函數  

  6. });  

 

若是你不喜歡Disqus的樣式，你也能夠根據他生成的HTML結構，本身改寫樣式覆蓋它的，Disqus如今也提供每一個頁面的評論數接口，幫助文檔在這裏能夠看到。

 

代碼高亮插件

若是寫技術博客，代碼高亮少不了，有兩個可選插件DlHightLight代碼高亮組件和Google Code Prettify。DLHightLight支持的語言相對較少一些，有js、css、xml和html，Google的高亮插件基本上任何語言都支持，也能夠自定義語言，也支持自動識別，也有行號的特別支持。

 

Google的高亮插件使用也比較方便，只須要在<pre>的標籤上加入prettyprint便可。因此我選擇了Google Code Prettify。

 

結語

若是你跟着這篇不那麼詳盡的教程，成功搭建了本身的博客，恭喜你！剩下的就是保持熱情的去寫本身的文章吧。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程