1. 程式人生 > >技術人如何利用 github+Jekyll ,搭建一個獨立免費的技術部落格

技術人如何利用 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,但這個主題已經盡兩年多都沒有更新了。因此後期我在這個主題的基礎上做了一些改動,其中有依賴元件的更新,結合個人情況對個別頁面進行了改版,就成為了現在的樣子:

使用這個主題的原因是,我比較喜歡簡潔大氣的風格,並且此部落格主題對程式碼展示支援良好。

快速構建一個部落格

以我的部落格為例,介紹如何最快搭建一個部落格。這也是我部落格經歷的第一個階段。

1、首先開啟地址https://github.com/ityouknow/ityouknow.github.io,點選 Fork 按鈕將程式碼複製一份到自己的倉庫。

過上一分鐘,你的 github 倉庫發現一個 ityouknow.github.io 專案。

2、刪除 CNAME 檔案

刪除專案中的 CNAME 檔案,CNAME 是定製域名的時候使用的內容,如果不使用定製域名會存在衝突。

3、設定 GitHub Pages

點選 Settings 按鈕開啟設定頁面,頁面往下拉到 GitHub Pages 相關設定,在 Source 下面的複選框中選擇 master branch ,然後點選旁邊的 Save 按鈕儲存設定。

4、重新命名專案

點選 Settings 按鈕開啟設定頁面,重新命名專案名稱為:github_username.github.io。

github_username 是你的 github 登入使用者名稱

5、重新命名之後,再次回到 Settings > GitHub Pages 頁面

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

這個時候,你訪問此地址已經可以看到部落格的首頁,但是點選文章的時連結跳轉地址不對,這是因為少配置了一個檔案。

6、配置 _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 ,就會自動觸發部落格的自動化部署。

可能會出現的問題

有一些小夥伴反饋在克隆部落格的時候出現了一些問題,在這裡集中回覆一下。

1、克隆部落格後格式丟失

這是很多讀者反饋的第一個問題,因為我的部落格 css 和 圖片是放到另外一個域名下的:www.itmind.net ,因此這塊大家克隆過去需要改成本地的。

主要涉及的檔案 ityouknow.github.io\_includes 目錄下 head.html 和 footer.html 兩個資料夾,將檔案中的 http://www.ityouknow.com/xxx/xxx 改為相對路徑/xxx/xxx即可。

2、留言功能丟失

這裡就需要大家修改一下 _config.yml 中 gitalk 的配置資訊。具體如何操作大家可以參考這篇文章 jekyll-theme-H2O 配置 gitalk。註冊完之後,需要在 _config.yml 配置以下資訊:

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

將這裡改成你註冊好的資訊

3、部落格

部落格現在還缺檢索功能,下一頁和上一頁功能、系列文章優化檢視的功能,大家克隆後有完善功能的,也請幫忙留意,共同把這個部落格完善的更好。

最後,大家可以在這篇文章下留下你的個人部落格地址,方便同行們觀賞、交流、學習。