技術人如何利用 github+Jekyll ，搭建一個獨立免費的技術博客

上次有人留言說，技術博客是程序員的標配，但據我所知絕大部分技術同窗到如今仍然沒有本身的技術博客。緣由有不少，有的是懶的寫，有的是怕寫很差，還有的是一直想憋個大招，幻想作到完美再發出來，結果一直胎死腹中。但其實更多程序員是不知道如何去搭建一個博客，其實現在搭建一個我的技術博客很是簡單，其中最簡單搭建方式莫屬使用 GitHub Pages + Jekyll 了，個人博客就是使用這種技術。

GitHub Pages

Github Pages 是面向用戶、組織和項目開放的公共靜態頁面搭建託管服務，站點能夠被免費託管在 Github 上，你能夠選擇使用 Github Pages 默認提供的域名 github.io 或者自定義域名來發布站點。Github Pages 支持 自動利用 Jekyll 生成站點，也一樣支持純 HTML 文檔，將你的 Jekyll 站點託管在 Github Pages 上是一個不錯的選擇。

使用 Github Pages 搭建博客有如下幾個優勢：

• 徹底免費，其中服務器、流量、域名什麼的都管，徹底零費用搭建一個技術博客
• 寫博客就是提交代碼，讓寫做和編程的體驗保持一致
• 支持綁定本身的域名
• 提供流行的網頁主題模板

缺點也是有的：

• 不支持動態內容，博客必須都是靜態網頁，通常會使用 Jekyll 來構建內容。
• 博客不能被百度索引，因 Github 和百度有過節，因此 Github 就把百度給屏蔽了。
• 倉庫空間不大於1G
• 每月的流量不超過100G
• 每小時更新不超過 10 次

Github Pages 使用 Jekyll 來構建內容，那麼 Jekyll 是什麼呢？

Jekyll 介紹

Jekyll 是一個簡單的博客形態的靜態站點生產機器。它有一個模版目錄，其中包含原始文本格式的文檔，經過一個轉換器（如 Markdown）和咱們的 Liquid 渲染器轉化成一個完整的可發佈的靜態網站，你能夠發佈在任何你喜好的服務器上。Jekyll 也能夠運行在 GitHub Page 上，也就是說，你可使用 GitHub 的服務來搭建你的項目頁面、博客或者網站，並且是徹底免費的。

但若是咱們只是在 GitHub 上面使用的話，到不須要知道 Jekyll 的語法，通常 Github 會自動將咱們寫的 Markdown 文件轉換成靜態頁面。使用 Jekyll 須要使用 Markdown 語法來寫你的文章，不過 Markdown 語法很是簡單，作爲程序員來說基本上兩三天就掌握了，你們也能夠參考這篇文章：markdown 使用總結。

給你們分享一些 Jekyll 主題，這個網站下有不少 http://jekyllthemes.org/ 主題，你們能夠根據本身的愛好去選擇博客主題。

個人我的博客

個人博客通過了三個階段，第一個階段，徹底依託於使用 GitHub Pages 來構建；第二個階段，將博客託管於國外的一個服務商；第三個階段，服務器遷移回到國內、域名備案。以前也寫過幾篇關於技術博客的文章，以下：

• 千里追蹤博客之殤
• 歷時25天，個人博客（www.ityouknow.com）終於又活了過來
• 技術博客那些事兒

使用 Github Pages + Jekyll 構建一個技術博客很簡單，基本上步驟就是網上找一個本身喜歡的主題，直接 Fork 到本身的 Github ，而後在刪掉原博客中的內容，在上傳本身的文章便可，以我本身的博客爲例。

個人博客最初使用的是Yummy-Jekyll，但這個主題已經盡兩年多都沒有更新了。所以後期我在這個主題的基礎上作了一些改動，其中有依賴組件的更新，結合我的狀況對個別頁面進行了改版，就成爲了如今的樣子：

使用這個主題的緣由是，我比較喜歡簡潔大氣的風格，而且此博客主題對代碼展現支持良好。

快速構建一個博客

以個人博客爲例，介紹如何最快搭建一個博客。這也是我博客經歷的第一個階段。

一、首先打開地址https://github.com/ityouknow/ityouknow.github.io，點擊 Fork 按鈕將代碼複製一份到本身的倉庫。

過上一分鐘，你的 github 倉庫發現一個 ityouknow.github.io 項目。

二、刪除 CNAME 文件

刪除項目中的 CNAME 文件，CNAME 是定製域名的時候使用的內容，若是不使用定製域名會存在衝突。

三、設置 GitHub Pages

點擊 Settings 按鈕打開設置頁面，頁面往下拉到 GitHub Pages 相關設置，在 Source 下面的複選框中選擇 master branch ，而後點擊旁邊的 Save 按鈕保存設置。

四、重命名項目

點擊 Settings 按鈕打開設置頁面，重命名項目名稱爲：github_username.github.io。

github_username 是你的 github 登陸用戶名

五、重命名以後，再次回到 Settings > GitHub Pages 頁面

會發現存在這樣一個地址： https://github_username.github.io

這個時候，你訪問此地址已經能夠看到博客的首頁，可是點擊文章的時連接跳轉地址不對，這是由於少配置了一個文件。

六、配置 _config.yml

打開項目目錄下的 _config.yml 文件，修改如下配置：

repository: github_username/github_username.github.io
github_url: https://github.com/github_username
url: https://github_username.github.io

這時候在訪問地址： https://github_username.github.io，就會發現博客就已經構建完成了。剩下的事情就是去項目的 _posts 目錄下刪除掉個人文章，而後按照 Jekyll 的語法就寫本身的文章就行了。

github_username 爲你的 github id。

自定義域名

雖然經過地址https://github_username.github.io能夠正常訪問博客，可是技術小夥伴們確定有人想使用本身的域名訪問博客，這樣的需求 GitHub Pages 也是支持的。

首先須要設置域名解析，將域名的地址指向本身的 github 博客地址。這裏以萬網的域名配置爲例，選擇須要設置的域名點擊解析，在域名解析頁面添加如下兩條記錄

紅框內，須要填寫本身github_username值。

而後從新打開項目的 Settings > GitHub Pages 頁面，Custom domain 下的輸入框輸入剛纔設置的域名：xxx.com，點擊保存便可。

從新配置 _config.yml

打開項目目錄下的 _config.yml 文件，修改如下配置：

url: http://www.xxx.com

等待一分鐘以後，瀏覽器訪問地址：www.xxx.com 便可訪問博客。

自定義 DIY 博客

通常同窗到上面這一步也就完成了，基本知足了 80% 技術同窗的需求。但仍是有一些同窗們有更高的追求，好比說使用 Github Pages 雖然簡單方便，可是不能被百度檢索白白流失了大量的流量，還有一個緣由有些時候，博客網絡訪問穩定性不是很高。

當時我在國外有幾個虛擬機，原本用做它用，後來在上面安裝了一個 Nginx 做爲靜態頁面的服務器。首先我在本機（win10）安裝了 Jekyll 環境，將 Github 上的博客代碼下載下來以後，在本機編譯成靜態的 Html ，而後手動上傳到服務的 Nginx 目錄下；而後將域名指向虛擬機。

很是不建議你們實踐以上這段內容，win10 上面安裝 Jekyll 環境是一段慘痛的經歷。

就這樣很麻煩的步驟我用了幾個月後，實在是受不了了，一方面由於服務器在國外，有時候仍然不穩定（可能由於服務器安裝了代理），另外一方面我須要使用一些功能，使用這些功能的前提是網站須要備案，那段時間騰訊雲在作活動，就把博客又從國外搬了回來，順便從新優化了一下流程。

仍然把博客託管在 Github 上面，每次提交完代碼後，在騰訊雲上面執行一個腳本，這個腳本會自動從 Github 拉取最新更新的文件，並自動生產靜態的 Html 文件推送到 Nginx 目錄，域名從新指向這臺服務器。能夠在 Github 上面設置一些鉤子，當提交代碼的時候自動觸發腳本，也能夠定時觸發腳原本發佈文章。

腳本內容以下：

cd /usr/local/ityouknow.github.io
git pull http://github.com/ityouknow/ityouknow.github.io.git
jekyll build --destination=/usr/share/nginx/html

執行此腳本的前提是安裝好 git\jekyll 環境，這個網上有不少案例，這裏就再也不多描述了。
關於 Jekyll 環境搭建和使用能夠參考這裏：https://jekyllcn.com/docs/home/

自動化部署

這兩天看到方誌朋搞了自動化部署，我也按照他的步驟實踐了一番，很好用，因此把自動化部署這段寫補上。

配置 Webhook

在開發過程當中的 Webhook，是一種經過一般的 callback，去增長或者改變 Web page或者 Web app 行爲的方法。這些 Callback 能夠由第三方用戶和開發者維持當前，修改，管理，而這些使用者與網站或者應用的原始開發沒有關聯。Webhook 這個詞是由 Jeff Lindsay 在 2007 年在計算機科學 hook 項目第一次提出的。

用大白話講就是，代碼倉庫在收到代碼提交的時候，會自動觸發一個 url 類型的通知，你能夠根據這個通知去作一些事情，好比提交了代碼就自動去部署項目。

咱們的自動部署博客也是利用了這個機制，Github 自帶了 Webhook 功能，咱們直接配置便可使用。

在 Github 倉庫的項目界面，好比本博客項目 https://github.com/ityouknow/ityouknow.github.io，點擊 Setting->Webhooks->Add Webhook，在添加 Webhooks 的配置信息，個人配置信息以下：

Payload URL: http://www.ityouknow.com/deploy
Content type: application/json
Secret: 123456

以下圖：

服務器接受推送

咱們須要在博客的服務器上面創建一個服務，來接收 Github 提交代碼後的推送，從而來觸發部署的腳本。 Github 上有一個開源項目能夠作這個事情 github-webhook-handler。

這個開源項目目的很單純，就是負責接收 Github 推送過來的通知，而後執行部署腳本，不過他是使用 NodeJs 來開發的，因此咱們先須要在 Centos 上面按照 Node 環境。

centos7 安裝 Node 環境

首先添加源

sudo rpm -ivh https://dl.fedoraproject.org/pub/epel/7/x86_64/Packages/e/epel-release-7-11.noarch.rpm

//yum安裝node.js
yum install -y nodejs

而後在安裝 github-webhook-handler

npm install -g github-webhook-handler     #安裝 github-webhook-handler
#若是沒有安裝成功，能夠選擇法2來安裝
npm install -g cnpm --registry=http://r.cnpmjs.org
cnpm install -g github-webhook-handler

安裝成功以後，咱們須要添加一個腳本。進入到安裝目錄下：

cd  /usr/lib/node_modules/github-webhook-handler

新建 deploy.js

vi deploy.js

腳本內容以下：

var http = require('http')
var createHandler = require('github-webhook-handler')
var handler = createHandler({ path: '/deploy', secret: 'ityouknow' }) //監聽請求路徑，和Github 配置的密碼
 
function run_cmd(cmd, args, callback) {
  var spawn = require('child_process').spawn;
  var child = spawn(cmd, args);
  var resp = "";
 
  child.stdout.on('data', function(buffer) { resp += buffer.toString(); });
  child.stdout.on('end', function() { callback (resp) });
}
 
http.createServer(function (req, res) {
  handler(req, res, function (err) {
    res.statusCode = 404
    res.end('no such location')
  })
}).listen(3006)//監聽的端口
 
handler.on('error', function (err) {
  console.error('Error:', err.message)
})
 
handler.on('push', function (event) {
  console.log('Received a push event for %s to %s',
    event.payload.repository.name,
    event.payload.ref);
  run_cmd('sh', ['/usr/local/depoly.sh'], function(text){ console.log(text) });//成功後，執行的腳本。
})

腳本的做業就是啓動一個監聽端口來接收請求，接收到請求後執行部署腳本，腳本內容的關鍵點已經標註上註釋。

部署博客的腳本以下：depoly.sh

echo `date`
cd /usr/local/ityouknow.github.io
echo start pull from github 
git pull http://github.com/ityouknow/ityouknow.github.io.git
echo start build..
jekyll build --destination=/usr/share/nginx/html

就是拉取代碼，進行部署而已。

這個腳本的啓動須要藉助 Node 中的一個管理 forever 。forever 能夠看作是一個 nodejs 的守護進程，可以啓動，中止，重啓咱們的 app 應用。

不過咱們的先安裝 forever，而後須要使用 forever 來啓動 deploy.js 的服務，執行命令以下：

npm install forever -g   #安裝
$ forever start deploy.js          #啓動
$ forever stop deploy.js           #關閉
$ forever start -l forever.log -o out.log -e err.log deploy.js   #輸出日誌和錯誤
/root/node-v8.12.0-linux-x64/lib/node_modules/forever/bin/forever start -l forever.log -o out.log -e err.log deploy.js

若是報錯：
/root/node-v8.12.0-linux-x64/lib/node_modules/forever/bin/forever start -a -l forever.log -o out.log -e err.log deploy.js

同時通常狀況下，咱們不會對外保留不少端口，因此須要經過博客的地址來轉發，須要在 Nginx 上面添加一個轉發配置，用來監聽的 /deploy 請求轉發到 nodejs 服務上，配置代碼以下：

location = /deploy {
     proxy_pass http://127.0.0.1:3006/deploy;
}

這樣咱們整個自動化部署就完了，每次提交代碼時，Github 會發送 Webhook 給地址http://www.ityouknow.com/deploy，Nginx 將 /deploy 地址轉發給 Nodejs 端口爲 3306 的服務，最後經過 github-webhook-handler 來執行部署腳本，已到達自動部署的目的。

之後只須要咱們提交代碼到 Github ,就會自動觸發博客的自動化部署。

可能會出現的問題

有一些小夥伴反饋在克隆博客的時候出現了一些問題，在這裏集中回覆一下。

一、克隆博客後格式丟失

這是不少讀者反饋的第一個問題，由於個人博客 css 和 圖片是放到另一個域名下的：www.itmind.net ，所以這塊你們克隆過去須要改爲本地的。

主要涉及的文件 ityouknow.github.io\_includes 目錄下 head.html 和 footer.html 兩個文件夾，將文件中的 http://www.ityouknow.com/xxx/xxx 改成相對路徑/xxx/xxx便可。

二、留言功能丟失

這裏就須要你們修改一下 _config.yml 中 gitalk 的配置信息。具體如何操做你們能夠參考這篇文章 jekyll-theme-H2O 配置 gitalk。註冊完以後，須要在 _config.yml 配置如下信息：

gitalk:
    owner: ityouknow
    repo: blog-comments
    clientID: 61bfc53d957e74e78f8f
    clientSecret: 31c61e66cdcc9ada8db2267ee779d0bdafac434c

將這裏改爲你註冊好的信息

三、博客

博客如今還缺檢索功能，下一頁和上一頁功能、系列文章優化查看的功能，你們克隆後有完善功能的，也請幫忙留意，共同把這個博客完善的更好。

最後，你們能夠在這篇文章下留下你的我的博客地址，方便同行們觀賞、交流、學習。