前言

一直就想搭建一個屬於自己的部落格網站，但是一直拖著沒有執行，在一次偶然的機會看到了鴻洋大神的 如何利用github打造部落格專屬域名，就心血來潮，馬上自己動手做了一個，耗時了近一個星期，終於差不多完成了，特意記錄下來，供他人蔘考。
本部落格同步釋出於 XueLong的部落格

關於Jekyll

　Jekyll 是一個免費的生成靜態網頁的工具，不需要資料庫支援。它有一個模版目錄，其中包含原始文字格式的文件，通過 Markdown （或者 Textile） 以及 Liquid 轉化成一個完整的可釋出的靜態網站，可以配合第三方服務例如： Disqus（評論）、多說(評論) 以及分享 等等擴充套件功能，Jekyll 可以直接部署在 Github（國外） 或 Coding（國內） 上，可以繫結自己的域名。

關於GitHub Pages

　官方說法是Websites for you and your projects.GitHub Pages是一個免費的靜態網站託管平臺，由github提供，它具有以下特點：

1. GitHub Pages 有 300M 免費空間，資料自己管理，儲存可靠；
2. 學著用 GitHub，享受 GitHub 的便利，上面有很多大牛，眼界會開闊很多；
3. 順便看看 GitHub 工作原理，最好的團隊協作流程；
4. GitHub 是趨勢；
5. 可以自定義域名

本地環境搭建

如果你只是想使用本主題，而不想搭建本地環境，那麼可以直接跳過這部分，不搭建本地環境則不能實現本地預覽，以下安裝操作都是在Windows系統環境下進行。（安裝有點煩，會出現你意想不到的錯誤，祝你好運！）

安裝Ruby

jekyll本身基於Ruby開發，因此，想要在本地構建一個測試環境需要具有Ruby的開發和執行環境。在windows下，可以使用Rubyinstaller安裝，ruby安裝官方說明，Windows下只需要保持預設狀態一路下一步就可以了。

安裝RubyDevKit

從這裡下載DevKit，注意版本要與Ruby版本一致。

下載下來的是一個sfx格式的檔案，如果你安裝有7-zip，可以直接雙擊，它會自解壓到你所選擇的目錄。

解壓完成之後，用cmd進入到剛才解壓的目錄下，執行下面命令，該命令會生成config.yml。

$ ruby dk.rb init

config.yml檔案實際上是檢測系統安裝的ruby的位置並記錄在這個檔案中，以便稍後使用。但上面的命令只針對使用rubyinstall安裝的ruby有效，如果是其他方式安裝的話，需要手動修改config.yml。

最後，執行如下命令，執行安裝：

$ ruby setup.rb

如果沒有setup.rb的話，執行：

$ ruby dk.rb install

安裝Git

Git下載

建立本地倉庫myblog

$ git init myblog

安裝Bundler

建議使用Bundler來安裝和執行Jekyll。

直接使用下面命令即可：

$ gem install bundler

然後在上面的myblog目錄建立一個叫Gemfile的檔案，注意沒有後綴，輸入

source 'https://ruby.taobao.org/'
gem 'github-pages', group: :jekyll_plugins

儲存後，在命令列中執行

$ bundle install

命令會根據當前目錄下的Gemfile，安裝所需要的所有軟體。這一步所安裝的東西，可以說跟github本身的環境是完全一致的，所以可以確保本地如果沒有錯誤，上傳後也不會有錯誤。而且可以在將來使用下面命令，隨時更新環境，十分方便

$ bundle update

使用下面命令，啟動轉化和本地服務：

$ bundle exec jekyll serve

so easy !(PS:說起來都是淚啊，國內的網路你懂得，下載安裝有點慢請耐心等待，或者使用淘寶源)

目錄結構

　
　Jekyll 的核心其實是一個文字轉換引擎。它的概念其實就是： 你用你最喜歡的標記語言來寫文章，可以是 Markdown，也可以是 Textile,或者就是簡單的 HTML, 然後 Jekyll 就會幫你套入一個或一系列的佈局中。在整個過程中你可以設定URL路徑, 你的文字在佈局中的顯示樣式等等。這些都可以通過純文字編輯來實現，最終生成的靜態頁面就是你的成品了。

一個基本的 Jekyll 網站的目錄結構一般是像這樣的：

.
├── _config.yml
├── _includes
|   ├── footer.html
|   └── header.html
├── _layouts
|   ├── default.html
|   ├── post.html
|   └── page.html
├── _posts
|   └── 2017-08-01-welcome-to-jekyll.markdown
├── _sass
|   ├── _base.scss
|   ├── _layout.scss
|   └── _syntax-highlighting.scss
├── about.md
├── css
|   └── main.scss
├── feed.xml
└── index.html

這些目錄結構以及具體的作用可以參考 官網文件

進入 _config.yml 裡面，修改成你想看到的資訊，重新 jekyll server ，重新整理瀏覽器就可以看到你剛剛修改的資訊了。

到此，部落格初步搭建算是完成了，

部署到伺服器

我這裡講的是部署到 Github Page 建立一個 github 賬號，然後建立一個跟你賬戶名一樣的倉庫，如我的 github 賬戶名叫 skylarklxlong，我的 github 倉庫名就叫 skylarklxlong.github.io，建立好了之後，把剛才建立的 myblog 專案 push 到 username.github.io倉庫裡去（username指的是你的github使用者名稱），檢查你遠端倉庫已經跟你本地 myBlog 同步了，然後你在瀏覽器裡輸入 username.github.io ，就可以訪問你的部落格了。

編寫文章

　　所有的文章都是 _posts 目錄下面，文章格式為 mardown 格式，文章檔名可以是 .mardown 或者 .md。

　　編寫一篇新文章很簡單，你可以直接從 _posts/ 目錄下複製一份出來 2017-08-01-welcome-to-myblog.md ，修改名字為 2017-08-01-article1.markdown ，注意：文章名的格式前面必須為 2017-08-01- ，日期可以修改，但必須為 年-月-日- 格式，後面的 article1 是整個文章的連線 URL，如果文章名為中文，那麼文章的連線URL就會變成這樣的：%E6%90%AD%E5， 所以建議文章名最好是英文的或者阿拉伯數字。 雙擊 2017-08-01-article1.markdown 開啟

---
layout: post
title: 歡迎來到我的部落格
date: 2017-08-01
tags: Jekyll
---

正文...

title: 顯示的文章名， 如：title: 我的第一篇文章
date: 顯示的文章釋出日期，如：date: 2016-10-16
tags: tag標籤的分類，如：tags: 隨筆

注意：文章頭部格式必須為上面的，…. 就是文章的正文內容。

我寫文章使用的是 MarkdownPad2 編輯器，如果你對 markdown 語法不熟悉的話，可以在網上查詢寫資料，後續我也會寫關於如何使用markdown的相關文章。

使用我的模版

雖然部落格部署完成了，你會發現部落格太簡單不是你想要的，如果你喜歡我的模板的話，可以使用我的模板。

首先你要獲取的我部落格，Github專案地址，你可以直接點選下載部落格，進去skylarklxlong.github.io/ 目錄下， 使用命令部署本地服務

$ jekyll server   

就可以看到的部落格樣式了。

修改成你自己的部落格

• 如果你想使用我的模板請把 _posts/ 目錄下的文章都去掉。
• 修改 _config.yml 檔案裡面的內容為你自己的。

然後使用 git push 到你自己的倉庫裡面去，檢查你遠端倉庫，在瀏覽器輸入 username.github.io 就會發現，你有一個漂亮的主題模板了。

寫在最後

剛開始寫部落格不久（是真的剛開始），難免會出現一些語法及其他錯誤，還請各位多多包含。

如果你在搭建部落格遇到問題，可以在我的聯絡方式中給我提問。

後面會繼續介紹，如何繫結你自己的固定域名，歡迎繼續關注我部落格的更新。

參考資源