Jekyll搭建我的博客

　以前寫了一篇 HEXO搭建我的博客 的教程得到了很好評，尤爲是在 簡書 上目前已經累積了10W+的閱讀量了，也有好心的讀者主動給我打賞，在此感謝。

　若是你看過個人文章會發現我如今的博客樣式跟以前是有很大的區別的，以前我也是使用 HEXO 搭建的博客，後來發現使用 HEXO 在多臺電腦上發佈博客，操做起來並非那麼方便，果斷就轉到了 Jekyll 上，接下來我會講如何使用 Jekyll 搭建博客，博客模板效果。

介紹

　Jekyll 是一個簡單的博客形態的靜態站點生產機器。它有一個模版目錄，其中包含原始文本格式的文檔，經過 Markdown （或者 Textile） 以及 Liquid 轉化成一個完整的可發佈的靜態網站，你能夠發佈在任何你喜好的服務器上。Jekyll 也能夠運行在 GitHub Page 上，也就是說，你可使用 GitHub 的服務來搭建你的項目頁面、博客或者網站，並且是徹底免費的

　使用 Jekyll 搭建博客以前要確認下本機環境，Git 環境（用於部署到遠端）、Ruby 環境（Jekyll 是基於 Ruby 開發的）、包管理器 RubyGems
　　若是你是 Mac 用戶，你就須要安裝 Xcode 和 Command-Line Tools了。下載方式 Preferences → Downloads → Components。

　　Jekyll 是一個免費的簡單靜態網頁生成工具，能夠配合第三方服務例如： Disqus（評論）、多說(評論) 以及分享 等等擴展功能，Jekyll 能夠直接部署在 Github（國外） 或 Coding（國內） 上，能夠綁定本身的域名。Jekyll中文文檔、Jekyll英文文檔、Jekyll主題列表。

Jekyll 環境配置

安裝 jekyll

$ gem install jekyll

建立博客

$ jekyll new myBlog

進入博客目錄

$ cd myBlog

啓動本地服務

$ jekyll serve

在瀏覽器裏輸入： http://localhost:4000，就能夠看到你的博客效果了。

so easy !

目錄結構

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

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

.
├── _config.yml
├── _includes
|   ├── footer.html
|   └── header.html
├── _layouts
|   ├── default.html
|   ├── post.html
|   └── page.html
├── _posts
|   └── 2016-10-08-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 帳戶名叫 leopardpan，個人 github 倉庫名就叫 leopardpan.github.io，建立好了以後，把剛纔創建的 myBlog 項目 push 到 username.github.io倉庫裏去（username指的是你的github用戶名），檢查你遠端倉庫已經跟你本地 myBlog 同步了，而後你在瀏覽器裏輸入 username.github.io ，就能夠訪問你的博客了。

編寫文章

　　全部的文章都是 _posts 目錄下面，文章格式爲 mardown 格式，文章文件名能夠是 .mardown 或者 .md。

　　編寫一篇新文章很簡單，你能夠直接從 _posts/ 目錄下複製一份出來 2016-10-16-welcome-to-jekyll副本.markdown ，修更名字爲 2016-10-16-article1.markdown ，注意：文章名的格式前面必須爲 2016-10-16- ，日期能夠修改，但必須爲 年-月-日- 格式，後面的 article1 是整個文章的鏈接 URL，若是文章名爲中文，那麼文章的鏈接URL就會變成這樣的：http://baixin.io/2015/08/%E6%... ， 因此建議文章名最好是英文的或者阿拉伯數字。 雙擊 2016-10-16-article1.markdown 打開

---
layout: post
title:  "Welcome to Jekyll!"
date:   2016-10-16 11:29:08 +0800
categories: jekyll update
---

正文...

title: 顯示的文章名， 如：title: 個人第一篇文章
date: 顯示的文章發佈日期，如：date: 2016-10-16
categories: tag標籤的分類，如：categories: 隨筆

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

我寫文章使用的是 Sublime Text2 編輯器，若是你對 markdown 語法不熟悉的話，能夠看看做業部落的教程

使用個人博客模板

雖然博客部署完成了，你會發現博客太簡單不是你想要的，若是你喜歡個人模板的話，可使用個人模板。

首先你要獲取的我博客，Github項目地址，你能夠直接點擊下載博客，進去leopardpan.github.io/ 目錄下， 使用命令部署本地服務

$ jekyll server

若是你本機沒配置過任何jekyll的環境，可能會報錯

/Users/xxxxxxxx/.rvm/rubies/ruby-2.2.2/lib/ruby/site_ruby/2.2.0/rubygems/core_ext/kernel_require.rb:54:in `require': cannot load such file -- bundler (LoadError)
    from /Users/xxxxxxxx/.rvm/rubies/ruby-2.2.2/lib/ruby/site_ruby/2.2.0/rubygems/core_ext/kernel_require.rb:54:in `require'
    from /Users/xxxxxxxx/.rvm/gems/ruby-2.2.2/gems/jekyll-3.3.0/lib/jekyll/plugin_manager.rb:34:in `require_from_bundler'
    from /Users/xxxxxxxx/.rvm/gems/ruby-2.2.2/gems/jekyll-3.3.0/exe/jekyll:9:in `<top (required)>'
    from /Users/xxxxxxxx/.rvm/gems/ruby-2.2.2/bin/jekyll:23:in `load'
    from /Users/xxxxxxxx/.rvm/gems/ruby-2.2.2/bin/jekyll:23:in `<main>'
    from /Users/xxxxxxxx/.rvm/gems/ruby-2.2.2/bin/ruby_executable_hooks:15:in `eval'
    from /Users/xxxxxxxx/.rvm/gems/ruby-2.2.2/bin/ruby_executable_hooks:15:in `<main>'

緣由： 沒有安裝 bundler ，執行安裝 bundler 命令

$ gem install bundler

提示：

Fetching: bundler-1.13.5.gem (100%)
Successfully installed bundler-1.13.5
Parsing documentation for bundler-1.13.5
Installing ri documentation for bundler-1.13.5
Done installing documentation for bundler after 5 seconds
1 gem installed

再次執行 $ jekyll server ，提示

Could not find proper version of jekyll (3.1.1) in any of the sources
Run `bundle install` to install missing gems.

跟着提示運行命令

$ bundle install

這個時候你可能會發現 bundle install 運行卡主不動了。

若是很長時間都沒任何提示的話，你能夠嘗試修改 gem 的 source

$ gem sources --remove https://rubygems.org/
$ gem sources -a http://ruby.taobao.org/
$ gem sources -l
*** CURRENT SOURCES ***

http://ruby.taobao.org

再次執行命令 $ bundle install，發現開始有動靜了

Fetching gem metadata from https://rubygems.org/...........
Fetching version metadata from https://rubygems.org/..
Fetching dependency metadata from https://rubygems.org/.
。。。
Installing jekyll-watch 1.3.1
Installing jekyll 3.1.1
Bundle complete! 3 Gemfile dependencies, 17 gems now installed.
Use `bundle show [gemname]` to see where a bundled gem is installed.

bundler安裝完成，後再次啓動本地服務

$ jekyll server

繼續報錯

Configuration file: /Users/tendcloud-Caroline/Desktop/leopardpan.github.io/_config.yml
  Dependency Error: Yikes! It looks like you don't have jekyll-sitemap or one of its dependencies installed. In order to use Jekyll as currently configured, you'll need to install this gem. The full error message from Ruby is: 'cannot load such file -- jekyll-sitemap' If you run into trouble, you can find helpful resources at http://jekyllrb.com/help/! 
jekyll 3.1.1 | Error:  jekyll-sitemap

表示 當前的 jekyll 版本是 3.1.1 ，沒法使用 jekyll-sitemap

解決方法有兩個

一、打開當前目錄下的 _config.yml 文件，把 gems: [jekyll-paginate,jekyll-sitemap] 換成 gems: [jekyll-paginate] ，也就是去掉jekyll-sitemap。

二、升級 jekyll 版本，我當前的是 jekyll 3.1.2 。

修改完成後保存配置，再次執行

$ jekyll server

提示

Configuration file: /Users/baixinpan/Desktop/OpenSource/Mine/Page-Blog/leopardpan.github.io-github/_config.yml
            Source: /Users/baixinpan/Desktop/OpenSource/Mine/Page-Blog/leopardpan.github.io-github
       Destination: /Users/baixinpan/Desktop/OpenSource/Mine/Page-Blog/leopardpan.github.io-github/_site
 Incremental build: disabled. Enable with --incremental
      Generating... 
                    done in 0.901 seconds.
 Auto-regeneration: enabled for '/Users/baixinpan/Desktop/OpenSource/Mine/Page-Blog/leopardpan.github.io-github'
Configuration file: /Users/baixinpan/Desktop/OpenSource/Mine/Page-Blog/leopardpan.github.io-github/_config.yml
    Server address: http://127.0.0.1:4000/
  Server running... press ctrl-c to stop.

表示本地服務部署成功。

在瀏覽器輸入 127.0.0.1:4000 ， 就能夠看到baixin.io博客效果了。

修改爲你本身的博客

• 若是你想使用個人模板請把 _posts/ 目錄下的文章都去掉。

• 修改 _config.yml 文件裏面的內容爲你本身的。

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

【 若是想修改博客樣式殊不知道怎麼修改，能夠直接在評論裏給我提問 】

爲何要是用 Jekyll

使用了 Jekyll 你會發現若是你想使用多臺電腦發博客都很方便，只要把遠端 github 倉庫裏的博客 clone 下來，寫文章後再提交就能夠了，Hexo 因爲遠端提交的是靜態網頁，全部沒法直接寫 Markdown 的文章。若是你想看 Hexo 搭建博客，能夠看看個人另外一篇 HEXO搭建我的博客 的教程。

若是你在搭建博客遇到問題，能夠在 原文博客 的評論裏給我提問。

後面會繼續介紹，在個人博客基礎上，如何修改爲你本身喜歡的 Style，歡迎繼續關注我博客的更新。