利用Github+Jeklly搭建個人部落格網站

視學演算法發表於2020-04-06
Github網站

↑↑↑點選上方“藍字”，關注“視學演算法”

如果你喜歡我，可以把我置頂或加為星標

640?wx_fmt=jpeg

題圖：by ben.pinto from Instagram

閱讀文字大概需要 9 分鐘。

1.評估 Github Pages 方案

前面說到幾種部落格方案，我都玩過，可以說是各有各的特點與優勢。在你考慮選擇是否 Github Pages 方案之前，可以先了解其優缺點，然後根據自己情況加一判定。
•優點：
1.完全免費。因為它本質上是一個 Github 倉庫，只不過 Github 官方提供網頁寄存服務。
2.簡單省心。無須自己購買雲服務，也不需要關係環境搭建、系統維護等，我們只需專注寫作。
3.頻寬夠用。在使用的時候專案和網站的大小不要超過 1GB，也不要過於頻繁的更新網站的內容（每小時不超過 10 個版本），每個月的也要注意頻寬使用上限為 100GB。這些對於個人網站其實是夠用。

•缺點：
1.它是靜態網站，無法支援資料庫，涉及一些資料儲存的操作需要自己找其他解決方案。例如頁面瀏覽的閱讀人數統計、點贊數等。
2.訪問速度比較慢。我們的網站是寄託在 Github 網站上，Github 伺服器節點是在美國，所以訪問速度沒有國內主機快。
以上是我對於 Github Pages 方案的理解。如果你已經確認選擇 Github Pages 方案，繼續跟著猴哥的思路，一步步搭建屬於自己的部落格。

2.建立簡單頁面

首先需要註冊一個 GitHub 賬號，然後到個人主介面裡面，建立一個新的 Repository。

640?wx_fmt=jpeg

進入建立新倉庫頁面後，在 Repository name 的位置填寫域名，格式是 username.GitHub.io。我的 Github 的 id 是 monkey-soft，所以域名如下圖所示。

640?wx_fmt=jpeg

建立成功後，點選 settings 欄目。

640?wx_fmt=jpeg

接著找到 GitHub Pages，然後隨便選擇 Github 提供的預設主題。

640?wx_fmt=jpeg

640?wx_fmt=jpeg

最後，我們通過瀏覽器訪問倉庫的域名（monkey.github.io）就能看到系統建立的預設網頁。

3.Jekyll 主題選擇

上文講到選擇預設的主題，這裡都是 Jekyll 主題。那什麼是 Jeklly呢？它是一個簡單靜態站點生成器，能將純文字的(一般是 Markdown 檔案)轉化為靜態頁面。有趣的是，Jeklly 是由 GitHub 的聯合創始人 Tom Preston-Werner 基於 Ruby 語言編寫的。因此，GitHub 官方預設採用 Jeklly 來生成網頁內容。
原生的 Jeklly 主題過於簡單，如果自己想進行改造，工作量還蠻大的。通常比較方便的做法是利用其他作者製作的主題。猴哥找到三個 Jeklly 主題網站，分別是：
•http://jekyllthemes.org
•https://jekyllthemes.io
•http://themes.jekyllrc.org
你可以根據個人喜好選擇適合的主題。我找到一款名為 MatJek 的主題，將主題壓縮包下載到本地。

640?wx_fmt=jpeg

主題下載之後，我們需要把主題檔案同步到我們的網站，也就是遠端的 Github 倉庫。如果你熟悉 Git 用法，可以使用 clone 命令將 Github 倉庫下載到本地。
如果你沒有任何 Git 的基礎，也不想進行一些繁瑣的配置，那麼推薦使用桌面客戶端的形式進行管理。我們需要下載 GitHub 桌面客戶端，然後登入自己 Github 賬號，接著將倉庫拉取到本地。注意的是，儲存路徑不能有中文

640?wx_fmt=jpeg

找到倉庫存放的資料夾，將之前所有檔案全部刪除，把剛才下載的主題檔案複製到當前資料夾中。

640?wx_fmt=jpeg

我們還需要修改配置檔案。_config.yml 是 Jekyll 的全域性配置檔案。裡面記錄著網站的名字，網站的域名，網站的連結格式等等。
我對於原來的 MatJek 主題進行一些定製化需求，整合起來更像是一個部落格網站。這裡我以自己修改主題的配置檔案為例。如果你使用其他主題，根據作者的要求，修改 _config.yml 的內容即可。

640?wx_fmt=jpeg

最後一步，我們將剛才修改的內容同步到 Github 遠端倉庫。

640?wx_fmt=jpeg

完成以上操作，我們可以開啟瀏覽器，輸入我們倉庫地址訪問我們的網站。

640?wx_fmt=jpeg

該主題是猴哥基於 MatJek 主題進行修改，同時也修復幾個缺陷。如果你想獲取猴哥同款主題，在公眾號後臺回覆『主題』即可獲取。

4.Jekyll 本地環境搭建

如果我們想對主題介面進行修改，每次預覽介面需要將檔案同步到 Github 倉庫，這樣操作不太方便。因此，我們可以本地搭建個 Jeklly 環境，方便我們除錯。
因為 Jeklly 是基於 Ruby 語言編寫的，所以我們需要安裝 Ruby 環境。我以 Windows 環境下安裝為例，Mac 環境比較簡單，可以執行搜尋搞定。
首先，我們到 Ruby 下載安裝包，最好下載帶有包管理工具 devkit，方便後續安裝各種元件。
安裝 Ruby 之後，會彈出提示安裝 MSYS。MSYS 是 Windows 上模擬 GUN 環境的元件。這裡選擇選項 3 進行安裝。

640?wx_fmt=jpeg

進入到本地專案檔案中，啟動終端，依次執行以下命令。

640?wx_fmt=jpeg

~ $ gem install jekyll bundler	
~ $ bundle install	
~ $ bundle exec jekyll serve  # 啟動本地伺服器
然後開啟瀏覽器，訪問 http://localhost:4000 就能預覽本地網站的介面效果。

5.SEO 優化

該主題已經整合用於 SEO 優化的 jekyll-seo-tag 外掛，我們簡單修改 _config.yml 裡面的這幾個欄位。
•title（部落格主題）
•subtitle（部落格副標題）
•description（網站描述，儘量增加跟網站內容的關鍵字）
接著是優化網站文章的 URL 連結。預設 Jeklly 的 URL 的 Path 路徑是 /:year/:month/:day/:title，顯示效果如/2019/11/12/我的第一篇文章.html。這種固定連結不太理想。
猴哥總結 URL 地址的 SEO 優化三個原則：
1.日期需要出現在固定連結中。
 這基於兩個方面的考慮。一是如果數字出現在固定連結裡面，等於提醒搜尋引擎，這是很舊的內容了，沒必要再爬一遍了。另外一個原因是，假如你要修改文章的日期重新發布的話，連結地址就變了，也就是意味著你的反向連結，PR 等等都沒有了。
2.連結的層次不要太深
 預設的固定連結是 /年/月/日/文章名。這種層次過深，不方便搜尋引擎爬蟲的抓取，對搜尋引擎的收錄不太友好。
3.連結中不要出現中文 
雖然現在的搜尋引擎已經能識別URL地址裡面的中文字元， 但無論是從美觀上，以及中文字元會被轉義的角度上看，都是非常差的。
猴哥推薦兩種固定連結方案。一種是 /postname/，基於文章的英文單詞翻譯；另一種是 /post_id/，基於文章釋出的 ID 號。
因為是靜態網站，所以必須按照 Jeklly 的規範來設定 URL，第一種方式也就被排除，只能選擇第二種方案。Jeklly 提供的路徑變數只有幾個，不夠靈活。
最後我花費九牛二虎之力，翻閱 Jeklly 中文網站，找到一個偽 postid 的方案。Path 路徑設定為 /:short_year:i_month:i_day.html, 即利用日期的部分欄位來拼湊。
這裡我進行講解下。比如一篇文章於 2017-06-25 釋出的，Jeklly 會將年前面兩位去掉；月份如果是10月之前去掉數字 0，沒有則直接保留月份；日跟月份一樣會去掉數字 0；因此，最後的 Path 路徑是 17625.html。

6.釋出文章

網站主題搭建工作完成之後，我們就能往部落格上填充內容。文章一般是用 Markdown 語法編寫的，存放在 _posts 檔案中。

640?wx_fmt=jpeg

檔案的命名規則是：年-月-日-文章標題.md。

640?wx_fmt=jpeg

在 md 檔案中，必須帶上頭部資訊才能被識別出來，其中資訊有文章標題、編寫時間、分類、標籤等。

640?wx_fmt=jpeg

我的設想是在首先展示文章時會顯示封面圖片，我在檔案中建立一個名為 img 資料夾來存放封面圖片，圖片命名須方式是以日期的形式。
當一切工作完成就緒，我們就可以使用 Github 客戶端將內容推送到遠端倉庫。
劇透一下，下篇分享 Github Pages 結合 Hexo 搭建部落格網站方案。
如果你覺得文章不錯，請轉發分享給你的小夥伴們~。

- END -
如果看到這裡，說明你喜歡這篇文章，請轉發、點贊。微信搜尋「perfect_iscas」，關注後回覆「進群」或者掃描下方二維碼即可進入無廣告技術交流群。
↓掃描二維碼進群↓

640?wx_fmt=jpeg

640

640?wx_fmt=gif

喜歡文章，點個在看 640?wx_fmt=jpeg

相關文章