在我成功試水，搭建了自己的個人部落格後，我體會到了 Jekyll 製作網站的輕便性。而 GitHub Pages 對 Jekyll 的支援，又省去了建站時伺服器和域名的搭建過程。在查閱網上的資料時，大牛們都是先在本地做好 Ruby + Jekyll 的環境，除錯完成後再上傳至 GitHub 上。但是我在安裝 Jekyll 這一步卡住了。無奈之下我尋找了一種更加“輕量化”的解決方法：直接在 GitHub 上對模版進行編輯和除錯，這樣我們就不需要在本地搭建環境。不過因為 GitHub 在國內的訪問速度較慢，所以這篇教程同時介紹 GitHub 和 Gitee 的建站方法。建站完成的效果，大家可以參考一下我的個人部落格：

• Github(已繫結域名): cometeme的個人部落格

• Gitee: cometeme的個人部落格

1.尋找模版

在開始之前，我們需要先到 Jekyll Themes 上面尋找自己喜歡的模版。模版介紹介面的 Demo 按鈕可以檢視模版的示例網站。如果你喜歡這個模版，你可以點 Download 將其下載並解壓。

2.簡單介紹檔案結構

解壓完成之後，你應該能看到這樣一些資料夾。以我的網站為例

不同的模版可能檔案的個數不一樣，但是一定會有這幾個關鍵檔案：

• index.html 首頁的檔案

• _config.yml 設定你的網站資訊

• 404.html 自定義404介面（這個一般都會有，如果沒有的話就會使用最“原始”的404頁面）

• README.md （很重要！）作者一般會在這個檔案中介紹如何配置模版。如果沒有這個檔案，請重新開啟你下載的模版的介紹頁面，下方應該會有提示。

同時，檔案目錄下應該也會有這些資料夾：

• _post 存放你的文章

• _layouts 網頁模版檔案

• _includes 導航欄，頁尾等元件模版

3.修改資訊

接下來就是對你的網站進行自定義的環節。

先開啟 README.md 這個檔案並仔細閱讀。開啟 _config.yml ，根據裡面有的註釋進行修改。因為沒有搭建本地環境。所以修改後的成果是無法檢視的。當然 _config.yml

4.註冊 GitHub/Gitee 賬號

接下來我們應該註冊賬號，如果已經註冊過了就可以跳過這一節。目前對 Jekyll Pages 的支援比較好的有 GitHub 和 Gitee。推薦先使用 GitHub ，再使用 Gitee 。（因為 Gitee 可以直接將 GitHub 的倉庫同步過去）

網址：

• GitHub

• Gitee

5.建立個人站點的倉庫

現在我們可以建立一個倉庫（ Repository ）。不過 Pages 分為專案 Pages 和個人 Pages 。其中個人 Pages 可以通過特殊的域名訪問。（比如本站是 https://cometeme.github.io ）要建立個人 Pages ，倉庫的名稱必須要符合一定的規則。 GitHub 與 Gitee 兩者的名稱規則不同。

• GitHub：倉庫名稱要求為 username.github.io

• Gitee：倉庫名稱要求為 username

如果想要之後直接將 GitHub 上面的專案克隆至 Gitee ，可以先按照上面的規則建立一個空的專案，然後在“遠端倉庫”這一欄新增 Github 倉庫的 .git 連結

專案建立完成後，我們開啟專案，將本地的修改過的模版檔案框選拖至視窗中，等待上傳完成後提交。（底下的介紹可以用預設的，建議直接提交至 master 分支）。提交完成後，就是以下的效果了：

6.開啟 Pages 服務

• GitHub

選中選單的 Settings 選單。

找到下方的 GitHub Pages 選項。（本圖中已經開啟，如果沒有開啟只需要點選相應的按鈕開啟即可）其中上方提示 "Your site is published at https://cometeme.github.io/" 說明已經部署完成了。這個時候你點選那個連結就可以看到自己的網頁。（ GitHub 的頁面更新速度較慢，有些時候做一定的更改要過段時間重新整理才生效）

• Gitee

選擇選單中的 服務 。

進入 碼雲 Pages 頁面。並在下方選中 master 分支，點選部署。部署完成後同樣會給出一個連結。點開就是架好的部落格了。

如果到這裡你的網頁能夠成功顯示，那麼恭喜你，你完成了建站所需要的所有步驟。接下來就只需要對介面再進行一些微調（比如修改首頁圖片，自定義 about 頁面等），併發布你的文章。

7.修改首頁圖片/個人頭像

如果單純地套用模版，大家做出來的網頁就難免會“撞臉”。這個時候，自定義一下首頁的圖片是最好的選擇。

隨便翻翻模版的檔案，總能夠找到幾張圖片格式的檔案。它們其中就有首頁的頭圖。當你找到它之後，你只需要用一張新的圖片替換就可以簡便地更換首頁的圖片。 不過永遠要注意的是，上傳圖片前最好先進行一定的裁剪使得圖片適合那塊區域的大小。其次最好對圖片進行一定的壓縮，一般 800kb 是一個比較好的選擇。

尋找圖片是不是很頭痛？給大家推薦一個好用的“免費無版權“的相簿： Unsplash 。它上面的圖片可以直接用於商用而不需要任何版權授權，而且 Unsplash 上的圖片品質都比較高，我部落格上的所有圖片都是來源於它。

找到一張合適的圖片並進行處理後，將它命名為與原頭圖名稱相同的檔案（包括檔案格式），然後上傳到 GitHub 上面就可以將原來的圖片覆蓋，實現替換。不過為了避免出錯，最好先將原來的圖片下載下來“備份”一下。同樣的，只要你能找得到網頁的各部分圖片，你都可以將它們替換。替換完成後，開啟你的部落格並重新整理一下，看看有沒有什麼變化

一般更改完圖片，或是釋出一篇新的文章後，網頁需要較長的時間來更新。（也就是說有可能你重新整理幾遍發現圖片沒換）這時千萬不要以為失敗了，等待1-2分鐘之後再重新整理試試看

8.什麼是 YAML ？

YAML 指的是一個檔案的頭資訊。你可以用它來定義這篇文章的寫作時間、標題、引用圖片等等。每個文章都必須要有頭資訊才能被模版正確地讀取。

頭資訊的內容被夾在兩行 --- 之間，你需要將它放在整個文章的最上方。每個模版對於 YAML 的定義不同。一般在你的模版中的 _post 資料夾中一定有幾篇預置的文章。用文字編輯器開啟它，你就能看到你所需要的頭資訊了，比如說我的模版：

---
layout: post
title: 'Jekyll + Github = 簡單搭建一個個人部落格'
subtitle: ‘輕量化靜態部落格搭建指南’
date: 2018-08-08
categories: Jekyll+GitHub
cover: '../../../assets/img/Jekyll-header.jpg'
tags: Jekyll Github Gitee Markdown HTML JavaScript
---

不同的模版引數的格式都不同，不過以我的為例，其中這些引數有以下作用：

• layout：選定一個模版檔案，一般不需要改
• title：文章的標題名
• subtitle：文章的小標題
• date：文章的時間
• catagories：文章的分類，不同分類可用空格分割
• cover：文章的封面圖片位置
• tags：文章的標籤。類似於catagories，可以分的更細一些

經過上面的介紹後，我們瞭解 YAML 的作用。在學習了 YAML 之後，我們就能開始建立文章了！

9.建立你的第一篇文章

首先先在 _post 資料夾中新建一個檔案。在 Jekyll 中的文章，檔名必須是 年-月-日-文章名.md 的形式（其實也可以是 .html ,但是在這裡我推薦大家用 Markdown 編寫文章），例如 2018-08-08-Jekyll+GitHub=簡單搭建一個個人部落格.md 。

建立完一個新的文章之後，我們用文字編輯器開啟它，並將其他文章的 YAML 頭複製進來，並進行一定的修改。在標頭檔案的下方，我們就可以用 Markdown 寫我們的文章了。為什麼要推薦使用 Markdown 呢？

• Markdown 的優點：

  • 可以用簡單的語法來實現建立標題，進行加粗等操作。

  • 對可以很方便地顯示程式碼、程式碼塊。

  • 不需要學習 html 的語法，可以專注於寫作本身。

• Markdown 的缺點：

  • 需要用專門的軟體來顯示。不同的軟體顯示效果會不同。

  • 排版不直觀，如果兩個自然段之間只有一個換行，它就會連在一起。

  • 指令有些多，需要記。

雖然 Markdown 的缺點也有些多，但是它的確能夠讓你專注於寫作。不過在寫作之前，你需要先：

• 準備一個 Markdown 編輯器，可以實時顯示 Markdown 的效果。( GitHub 在編輯 Markdown 檔案時也可以切換顯示，但是在 GitHub 的書寫有些不順暢)

• 學習一些簡單的 Markdown 語法 。

學習了一部分 Markdown 語法後，你就可以完成第一篇文章併發布它。當你把它上傳到 GitHub 上的 _post 資料夾之後，你就可以在你的部落格中看到它。不過記得將它引用的照片傳到相應的目錄，不然的話它可是不會顯示的哦。

結語與其他文件

這樣就完成了搭建 Github Pages 個人部落格的操作了。接下來，你就可以對它進行更多地自定義操作，並且新增更多的內容。希望大家能夠在寫個人部落格的過程中提升自己的技術水平，並將自己的學習經驗分享給更多人。