之前寫了一篇 HEXO搭建個人博客 的教程獲得了很好評松蒜，尤其是在 簡書 上目前已經(jīng)累積了10W+的閱讀量了秸苗，也有好心的讀者主動給我打賞，在此感謝玖瘸。

如果你看過我的文章會發(fā)現(xiàn)我現(xiàn)在的博客樣式跟之前是有很大的區(qū)別的雅倒，之前我也是使用 HEXO 搭建的博客蔑匣，后來發(fā)現(xiàn)使用 HEXO 在多臺電腦上發(fā)布博客棕诵，操作起來并不是那么方便校套，果斷就轉(zhuǎn)到了 Jekyll 上笛匙，接下來我會講如何使用 Jekyll 搭建博客， 博客模板效果 座硕。

屏幕快照 2016-10-21 上午10.24.10.png

介紹

Jekyll 是一個簡單的博客形態(tài)的靜態(tài)站點生產(chǎn)機器华匾。它有一個模版目錄蜘拉，其中包含原始文本格式的文檔旭旭，通過 Markdown （或者 Textile） 以及 Liquid 轉(zhuǎn)化成一個完整的可發(fā)布的靜態(tài)網(wǎng)站持寄，你可以發(fā)布在任何你喜愛的服務(wù)器上。Jekyll 也可以運行在 GitHub Page 上废麻，也就是說烛愧，你可以使用 GitHub 的服務(wù)來搭建你的項目頁面掂碱、博客或者網(wǎng)站怜姿，而且是完全免費的

使用 Jekyll 搭建博客之前要確認下本機環(huán)境，Git 環(huán)境（用于部署到遠端）疼燥、Ruby 環(huán)境（Jekyll 是基于 Ruby 開發(fā)的）沧卢、包管理器 RubyGems
　　如果你是 Mac 用戶，你就需要安裝 Xcode 和 Command-Line Tools了悴了。下載方式 Preferences → Downloads → Components搏恤。

Jekyll 是一個免費的簡單靜態(tài)網(wǎng)頁生成工具，可以配合第三方服務(wù)例如： Disqus（評論）湃交、多說(評論) 以及分享 等等擴展功能，Jekyll 可以直接部署在 Github（國外） 或 Coding（國內(nèi)） 上搞莺，可以綁定自己的域名息罗。Jekyll中文文檔、Jekyll英文文檔才沧、Jekyll主題列表迈喉。

Jekyll 環(huán)境配置

安裝 jekyll

$ gem install jekyll     

創(chuàng)建博客

$ jekyll new myBlog    

進入博客目錄

$ cd myBlog  

啟動本地服務(wù)

$ jekyll serve

在瀏覽器里輸入： http://localhost:4000，就可以看到你的博客效果了温圆。

image1.png

so easy !

目錄結(jié)構(gòu)

Jekyll 的核心其實是一個文本轉(zhuǎn)換引擎挨摸。它的概念其實就是： 你用你最喜歡的標記語言來寫文章，可以是 Markdown岁歉，也可以是 Textile,或者就是簡單的 HTML, 然后 Jekyll 就會幫你套入一個或一系列的布局中得运。在整個過程中你可以設(shè)置URL路徑, 你的文本在布局中的顯示樣式等等。這些都可以通過純文本編輯來實現(xiàn)，最終生成的靜態(tài)頁面就是你的成品了熔掺。

一個基本的 Jekyll 網(wǎng)站的目錄結(jié)構(gòu)一般是像這樣的：

.
├── _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

這些目錄結(jié)構(gòu)以及具體的作用可以參考 官網(wǎng)文檔

進入 _config.yml 里面饱搏，修改成你想看到的信息，重新 jekyll server 置逻，刷新瀏覽器就可以看到你剛剛修改的信息了推沸。

到此，博客初步搭建算是完成了券坞，

博客部署到遠端

我這里講的是部署到 Github Page 創(chuàng)建一個 github 賬號鬓催，然后創(chuàng)建一個跟你賬戶名一樣的倉庫，如我的 github 賬戶名叫 leopardpan恨锚，我的 github 倉庫名就叫 leopardpan.github.io深浮，創(chuàng)建好了之后，把剛才建立的 myBlog 項目 push 到 username.github.io倉庫里去（username指的是你的github用戶名）眠冈，檢查你遠端倉庫已經(jīng)跟你本地 myBlog 同步了，然后你在瀏覽器里輸入 username.github.io 菌瘫，就可以訪問你的博客了蜗顽。

編寫文章

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

編寫一篇新文章很簡單，你可以直接從 _posts/ 目錄下復(fù)制一份出來 2016-10-16-welcome-to-jekyll副本.markdown 栖忠，修改名字為 2016-10-16-article1.markdown 崔挖，注意：文章名的格式前面必須為 2016-10-16- ，日期可以修改庵寞，但必須為 年-月-日- 格式狸相，后面的 article1 是整個文章的連接 URL，如果文章名為中文捐川，那么文章的連接URL就會變成這樣的脓鹃，中文字符會經(jīng)過轉(zhuǎn)義：http://baixin.io/2015/08/HEXO%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A2/， 所以建議文章名最好是英文的或者阿拉伯數(shù)字古沥。 雙擊 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: 顯示的文章發(fā)布日期，如：date: 2016-10-16
categories: tag標簽的分類岩齿，如：categories: 隨筆

注意：文章頭部格式必須為上面的太颤，.... 就是文章的正文內(nèi)容。

我寫文章使用的是 Sublime Text2 編輯器盹沈，如果你對 markdown 語法不熟悉的話龄章，可以看看作業(yè)部落的教程

使用我的博客模板

雖然博客部署完成了，你會發(fā)現(xiàn)博客太簡單不是你想要的，如果你喜歡我的模板的話瓦堵，可以使用我的模板基协。

首先你要獲取的我博客，Github項目地址菇用，你可以直接 點擊下載博客 澜驮，進去leopardpan.github.io/ 目錄下， 使用命令部署本地服務(wù)

$ jekyll server   

如果你本機沒配置過任何jekyll的環(huán)境惋鸥，可能會報錯

/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 杂穷，執(zhí)行安裝 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

再次執(zhí)行 $ 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

這個時候你可能會發(fā)現(xiàn) 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

再次執(zhí)行命令 $ bundle install，發(fā)現(xiàn)開始有動靜了

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安裝完成溅漾，后再次啟動本地服務(wù)

$ jekyll server

繼續(xù)報錯

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

解決方法有兩個

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

2暮胧、升級 jekyll 版本锐借，我當前的是 jekyll 3.1.2 。

修改完成后保存配置往衷，再次執(zhí)行

$ 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.

表示本地服務(wù)部署成功钞翔。

在瀏覽器輸入 127.0.0.1:4000 ， 就可以看到 baixin.io 博客效果了炼绘。

修改成你自己的博客

• 如果你想使用我的模板請把 _posts/ 目錄下的文章都去掉嗅战。
• 修改 _config.yml 文件里面的內(nèi)容為你自己的。

然后使用 git push 到你自己的倉庫里面去俺亮，檢查你遠端倉庫驮捍，在瀏覽器輸入 username.github.io 就會發(fā)現(xiàn)，你有一個漂亮的主題模板了脚曾。

【 如果想修改博客樣式卻不知道怎么修改东且，可以直接在評論里給我提問 】

為什么要是用 Jekyll

使用了 Jekyll 你會發(fā)現(xiàn)如果你想使用多臺電腦發(fā)博客都很方便，只要把遠端 github 倉庫里的博客 clone 下來本讥，寫文章后再提交就可以了珊泳，Hexo 由于遠端提交的是靜態(tài)網(wǎng)頁鲁冯，所有無法直接寫 Markdown 的文章。如果你想看 Hexo 搭建博客色查，可以看看我的另一篇 HEXO搭建個人博客 的教程薯演。

如果你在搭建博客遇到問題，可以在 原文博客 的評論里給我提問秧了。

后面會繼續(xù)介紹跨扮，在我的博客基礎(chǔ)上，如何修改成你自己喜歡的 Style验毡，歡迎繼續(xù)關(guān)注我博客的更新衡创。