Windows環境下Jekyll+Github搭建我的博客

萌新來說講如何使用 Jekyll 搭建我的博客，從安裝到配置！炒雞詳細！。原文地址https://zhangmingemma.github....

介紹

jekyll是一個靜態站點生成器，會根據網頁源碼生成靜態文件。

• 簡單。無需數據庫，評論功能，不須要不斷更新版本，只用關注你的博客內容
• 靜態。只用Markdown(或者Textile)、Liquid、HTML&CSS就能夠構建可部署的靜態網站
• 博客形態。自定義地址、分類頁面、分類博客內容以及自定義的佈局設計
• 使用GitHub Pages能夠運行jekyll，很簡單就能夠徹底免費的在GitHub上發佈網站

環境配置

1. 註冊Github帳號，並新建倉庫教程第一部份內容,照作便可
2. 下載安裝Git,git for Windows,安裝教程
3. 安裝Ruby & Devkit, Window 系統下，咱們可使用 RubyInstaller 來安裝 Ruby 環境，下載地址,安裝教程
4. 配置jekyll環境(前提是你的電腦有Python、easy_install)

安裝 jekyll

$ gem install jekyll

建立博客

$ jekyll new myBlog

進入博客目錄

$ cd myBlog

啓動本地服務

$ jekyll serve

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

Error: Auto-regeneration: enabled for 'c:/Devkit/MyBlog'
Configuration file: c:/Devkit/MyBlog/_config.yml
jekyll 3.4.1 | Error:  Permission denied - bind(2) for 127.0.0.1:4000

*解決方法：先關掉後臺開啓的Apache、MySQL服務，從新啓動jekyll serve，繼續錯誤，則在_config.yml文件最後一行加入port : 4001

目錄結構

　
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 ，刷新瀏覽器就能夠看到你剛剛修改的信息了。

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

博客部署到遠端

在本地新建一個文件夾blog，在文件夾內打開git bash，運行命令

$ git clone https://github.com/(github的用戶名)/(github的倉庫名).git

能夠看到文件夾內多了文件夾(github的倉庫名).git(內含隱藏的.git文件夾和READme文件)

將它們所有移動到blog目錄下，並將你本地建立的博客文件下的全部內容_config.yml，_layouts,_posts等，刪掉(github的倉庫名).git文件夾

運行命令

git add .
git commit -a -m "first commit"
git remote add origin https://github.com/(github用戶名)/(github倉庫名).git
git push -u origin master

若是是綁定到一級域名：

1. 首先在項目根目錄下建立一個叫CNAME文件，裏面寫上本身的以及一級域名（如這個博客就是skyinlayer.com）
2. 在DNS中爲本身的域名增長一條A記錄，指向207.97.227.245
3. 將項目提交到github上，等一下子（不會超過1小時）
4. baseurl應該爲"/"
5. 訪問本身的域名看看結果吧

若是是綁定到二級域名，須要額外在DNS中增長一條CNAME，指向(github用戶名).github.io，而後再CNAME文件中修改成本身的二級域名便可

編寫文章

全部的文章都是 _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 Text3 編輯器，Markdown簡單語法

使用博客模板

雖然博客部署完成了，你會發現博客太簡單不是你想要的，這裏有不少漂亮的模板。

選擇你喜歡的模板下載解壓到目錄下， 將_config.yml、_posts修改爲本身的信息與文章，使用命令部署本地服務

$ jekyll server

可能會出現一些錯誤：

/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

提示

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/XXXXXXXXXXXXX/_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

表示沒有安裝gem 的jekyll-sitemap

gem install jekyll-sitemap

並將Gemfile中加入

gem 'jekyll-sitemap', '~> 1.0'

再次啓動本地服務

$ jekyll server

提示

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

表示本地服務部署成功。

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