Jekyll + Github = 簡單搭建一個我的博客

在我成功試水，搭建了本身的我的博客後，我體會到了 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 我的博客的操做了。接下來，你就能夠對它進行更多地自定義操做，而且添加更多的內容。但願你們可以在寫我的博客的過程當中提高本身的技術水平，並將本身的學習經驗分享給更多人。