這篇文章主要介紹了我在搭建這個博客中使用的框架和搭建過程祭务，以及其中踩到的一些坑。我的電腦環(huán)境是Win10。
這篇文章分為以下幾個部分文兢。

1. 為什么選擇了Jekyll + GitHub page的組合
2. 基于windows的環(huán)境安裝
3. 建立自己的第一個博客
4. 使用Jekyll模板快速建立博客
5. 將博客放在Github Pages上

為什么是Jekyll + GitHub page的組合

選擇Jekyll的理由

引用自官網：
Jekyll 是一個簡單的博客形態(tài)的靜態(tài)站點生產機器。它有一個模版目錄焕檬，其中包含原始文本格式的文檔禽作，通過一個轉換器（如 Markdown）和我們的 Liquid渲染器轉化成一個完整的可發(fā)布的靜態(tài)網站，你可以發(fā)布在任何你喜愛的服務器上揩页。Jekyll 也可以運行在 GitHub Page 上旷偿，也就是說烹俗，你可以使用 GitHub 的服務來搭建你的項目頁面、博客或者網站萍程，而且是完全免費的幢妄。

選擇GitHub page的理由

GitHub Pages是一個免費的靜態(tài)網站托管平臺，由Github提供茫负，它具有以下特點：

• GitHub Pages 有 300M 免費空間蕉鸳，資料自己管理，保存可靠忍法；
• 熟悉版本控制潮尝，團隊協(xié)作流程；
• 可以自定義域名饿序，Github 學生認證享受諸多優(yōu)惠勉失。

基于windows的環(huán)境安裝

Jekyll的安裝

由于Jekyll是基于Ruby開發(fā)的，所以原探，要想在本地構建一個Jekyll的測試環(huán)境乱凿，需要具有Ruby的開發(fā)和運行環(huán)境。下載與本地環(huán)境相符的Ruby和RubyDevKit咽弦。

安裝Jekyll需要以下環(huán)境

1. Ruby
2. Ruby dev
3. Jekyll
4. Bundler

安裝過程如下：

• 首先需要從RubyInstaller下載Ruby+Devkit的組合包徒蟆，使用默認的選項進行安裝即可。
• Win鍵 + R鍵打開CMD命令行型型，通過以下命令下載jekyll和Bundler段审，安裝過程中如果卡了很久按下回車即可，下載大概需要10分鐘闹蒜。
  gem install jekyll bundler
• 在CMD命令行窗口中檢測jekyll是否安裝成功
  jekyll -v

編碼問題

如果你使用 UTF-8 編碼寺枉，請確保你的問題見中不存在 BOM 字符，否則 Jekyll 將會出現(xiàn)意想不到的情況嫂用。特別是你要在 Windows 上使用 Jekyll型凳，這個問題就需要特別注意。

因此需要將代碼控制臺頁面的編碼修改為 UTF-8嘱函，否則將會出現(xiàn)一個異常：“Liquid Exception: Incompatible character encoding” 甘畅。可以通過在CMD控制臺中輸入以下的命令解決：chcp 65001

建立自己的第一個博客

首先看看你想把你的博客建在哪里往弓，以D盤舉例疏唾，建立一個名字為testblog的博客。新建博客需要等待一定時間函似。命令行中輸入：

cd d:
jekyll new testblog  // testblog 為你的博客文件名,

控制臺返回（創(chuàng)建的地址有所不同）New jekyll site installed in D : /testblog槐脏。

開啟jekyll內置服務器

cd testblog//一定要進入創(chuàng)建的對應blog目錄，否則服務無法開啟
jekyll serve  //開啟服務器撇寞，可以按ctrl+c停止

控制臺返回如下：

image.png

根據返回的本地端口顿天，在瀏覽器中打開堂氯，得到如下界面。

image.png

使用 Jekyll 模版搭建博客

網絡上提供了大量適用于 GitHub Pages 的 Jekyll 模版牌废，下載一個并解壓將文件放到你的代碼庫（repository）根目錄下咽白。這些模板極大的方便了前端知識匱乏的我們建立一個精美的網頁。在這里下載：

• Jekyll Themes

我使用的是Voyager主題鸟缕，感謝redVi開源的主題晶框，精致又方便。

下載并解壓后懂从，進入解壓后的文件夾授段，可以看到主要包含幾個文件，其作用分別是：（資料來源：Jekyll 官網文檔）

不過隨著Jekyll的更新口予，新版的主題中沒有_drafts嫡秕，_data，jekyll-metadata等目錄和文件苹威，多了assets等目錄昆咽。下載完成后打開文件夾，_posts/ 目錄下的文章都刪除牙甫，此為模板作者的實例文章掷酗。將 _config.yml文件里面的內容修改為自己的信息。

你可能喜歡markdown來寫文章窟哺，那么我們在文章頭部添加yaml頭信息并且文件的命名要服從下面的規(guī)則：year-month-title.markdown //markup為你的文件格式的后綴名

---
bg: "tools.jpg"
layout: post
title:  "我是如何搭建這個博客的"
crawlertitle: "我是如何搭建這個博客的"
summary: "搭建博客總結"
date:   2019-03-06 20:09:47 +0700
categories: posts
tags: ['個人雜談']
author: Zhanghx
<!--在文章頭部添加的yaml頭信息實例-->
---

寫上自己的博文內容泻轰，按命名規(guī)則將這個文件_posts/目錄里面即可。啟動jekyll內置服務器且轨， jekyll serve浮声，生成頁面。

將博客放在Github Pages上

首先需要有一個Github賬戶旋奢，沒有的注冊一個泳挥，不多說。新建一個 new repository 新的個人倉庫至朗，倉庫的名字為你的github的名字+github+io屉符，即yourname.github.io。

接著是將這個新的倉庫拉取到本地锹引，在windows環(huán)境下我使用Github desktop作為Git客戶端矗钟，拉取完成后文件夾下會多出一個yourname的文件，我們把用下載好的主題下的所有文件復制到里面嫌变。然后把里面的所有文件push到剛剛建的遠程倉庫吨艇。

這時，在瀏覽器里面輸入網址：http://yourname.github.io 就可以看你的個人博客網站了腾啥，這就是你的博客網站的地址了东涡。前面所說的yourname指的是你的github賬號名字。

最后在本地把寫好的文章Push到Github上就可以完成網頁的更新了碑宴。至此一個個人博客算是搭建完成软啼。這是我的個人網站 http://zhanghx.me

以上安裝過程參考：

1. jekyll的windows安裝官方指南
2. Redchar的博客
3. 愛博客大伯