Jekyll本地搭建開發環境以及Github部署流程

轉載自：

http://www.jianshu.com/p/f37a96f83d51

前言

博客從wordpres遷移到Jekyll上來了，整個過程仍是很順利的。Jekyll是什麼？它是一個簡單靜態博客生成工具，爲何是靜態，由於它是不須要數據庫的，經過markdown編寫靜態文件，生成Html頁面，它的優勢是提高了頁面的響應速度，而且讓博主能夠只專一於寫文章，不用再去考慮如何排版（markdown語法很好的解決了排版問題）。那麼爲何要遷移到Jekyll呢？不是由於跟風，也不是爲了提升自我，徹底就是瞎折騰！

本地搭建Jekyll

本次安裝能夠MacOS或Linux下進行。

使用gem安裝Jekyll

gem install jekyll

這樣就把jekyll安裝完成了。
若是本地沒有gem，那麼須要先安裝Ruby和gem，這裏就不介紹了。

使用Jekyll建立你的博客站點

jekyll new blog  #建立你的站點

控制檯能夠看見相似 New jekyll site installed in /home/user/blog.的提示

開啓Jekyll服務

cd blog         #進入blog目錄,記得必定要進入建立的目錄，不然服務沒法開啓 jekyll serve #啓動你的http服務

本地服務開啓後，Jekyll服務默認端口是4000，因此我打開瀏覽器，輸入：http://localhost:4000 便可訪問

使用Jekyll寫博文

咱們進入blog目錄後，會發現Jekyl的結構以下：

.
├ about.md
├ _config.yml
├ css
│   └ main.scss
├ feed.xml
├ _includes
│   ├ footer.html
│   ├ header.html
│   ├ head.html
│   ├ icon-github.html
│   ├ icon-github.svg
│   ├ icon-twitter.html
│   └ icon-twitter.svg
├ index.html
├ _layouts
│   ├ default.html
│   ├ page.html
│   └ post.html
├ _posts
│   └ 2016-03-04-welcome-to-jekyll.markdown └ _sass ├ _layout.scss └ _syntax-highlighting.scss

咱們進入_post目錄，撰寫的markdown語法的博文都放在這裏。默認會有一篇測試文章：2016-03-04-welcome-to-jekyll.markdown.
拷貝測試博文

cp 2016-03-04-welcome-to-jekyll.markdown 2016-03-04-test.markdown

而後刷新一下瀏覽器、發現頁面並無變化.由於咱們尚未經過Jekyll build去生成。

jekyll build

默認狀況下，服務會之前臺的方式掛起，若是但願用後臺進程運行服務，咱們可使用 --detach參數，縮寫參數爲-B(應該是Background的首字母)

jekyll serve build --detach

或者

jekyll serve build -B

值得注意的是：若是用vagrant虛擬機去安裝jekyll，那麼啓動服務時還須要加上-H參數，指定訪問主機號爲0.0.0.0，即jekyll serve build -B -H 0.0.0.0,不然vagrant下可能啓動失敗

再查看首頁，發現已經有兩篇文章了！由於沒有更改標題，因此都是同樣的。

好的，打開復制的 2016-03-04-test.markdown-test.markdown,能夠看見開頭有以下幾個東東。

---
layout: post title: "Welcome to Jekyll!" date: 2016-03-04 10:52:19 +0100 categories: jekyll update ---

layout表示使用的是post佈局，title是文章標題，date是自動生成的日期，categories是該文章生成html文件後存放的目錄，能夠去_site/jekyll/update下找到對應日期下面的html文檔。固然你也能夠只設置jekyll單一的目錄，甚至是更多級別的目錄，用空格分開便可。頭信息設置完成後就能夠書寫正文了。

若是每次都輸入這些頭信息，還要去整理格式，那麼必定很煩躁，這種重複性的東西咱們就把它自動化，經過Rakefile去解決，它相似shell這樣的腳本，可使用交互模式。如下是個人Rakefile,能夠複製後命名爲Rakefile，放在站點根目錄直接使用，也能夠修改成適合本身的Rakefile：

task :default => :new require 'fileutils' desc "建立新 post" task :new do puts "請輸入要建立的 post URL：" @url = STDIN.gets.chomp puts "請輸入 post 標題：" @name = STDIN.gets.chomp puts "請輸入 post 子標題：" @subtitle = STDIN.gets.chomp puts "請輸入 post 分類，以空格分隔：" @categories = STDIN.gets.chomp puts "請輸入 post 標籤：" @tag = STDIN.gets.chomp @slug = "#{@url}" @slug = @slug.downcase.strip.gsub(' ', '-') @date = Time.now.strftime("%F") @post_name = "_posts/#{@date}-#{@slug}.md" if File.exist?(@post_name) abort("文件名已經存在！建立失敗") end FileUtils.touch(@post_name) open(@post_name, 'a') do |file| file.puts "---" file.puts "layout: post" file.puts "title: #{@name}" file.puts "subtitle: #{@subtitle}" file.puts "author: pizida" file.puts "date: #{Time.now}" file.puts "categories: #{@categories}" file.puts "tag: #{@tag}" file.puts "---" end exec "vi #{@post_name}" end

如何使用Rake，輸入一下命令：

rake new

rake會啓動交互模式，讓你依次輸入title，subtitle，author，categories，tag等信息，併爲你建立好具備頭信息的markdown文件。以下同樣:

請輸入要建立的 post URL： testurl 請輸入 post 標題： testpost 請輸入 post 子標題： subtitle 請輸入 post 分類，以空格分隔： jekyll 請輸入 post 標籤： 技術

咱們查看_post目錄，發現已經有一篇2016-03-05-testurl.md文章，打開看下

---
layout: post title: testpost subtitle: subtitle author: pizida date: 2016-03-05 07:31:27 +0800 categories: jekyll tag: 技術 ---

已經爲咱們建立好頭信息了。

本地搭建jekyll和寫博文大體就是如此，有更多疑問可到官網https://jekyllrb.com/或中文鏡像站http://jekyllcn.com/查閱資料。

---

使用Github pages服務生成我的博客

建立咱們的倉庫

咱們repository name設置爲username.github.com(這裏的username是指你在Github上的用戶名，個人用戶名是engine-go,後面的username均指的是我的帳戶，再也不作說明)，選擇Public倉庫類型:

建立git倉庫

爲倉庫建立Github Pages

建立倉庫後，選擇setting

建立Github Pages

點擊Launch automatic page generator

生成pages

而後編輯下標題和描述，任意選擇一個模板，點擊Publish

如此，咱們已經能夠經過瀏覽器輸入 http://username.github.io訪問博客主頁。那麼我就訪問engine-go.github.com。
以下圖所示，就是你的博客首頁。

將本地jekyll代碼部署到Github上的倉庫

前面咱們已經詳細地說明如何搭建Jekyll，咱們能夠在本地開發測試，推送代碼到倉庫，發佈到線上。

克隆倉庫到本地

請確保本地安裝了git客戶端，克隆你的username.github.com倉庫到本地。

git clone https://github.com/username/username.github.com.git

此時你會看見當前存在username.github.com這個目錄，咱們啓動jekyll服務（啓動前確保其餘目錄下沒有jekyll服務，能夠ps aux|grep jekyll查看進程,有的話,用kill -9 進程號殺掉）:

cd username.github.com
jekyll serve -B

如今咱們打開<a href="localhost:4000">http://localhost:4000</a>,便可看見咱們在Github上建立的主頁，理論上和http://username.github.com 訪問的應該是如出一轍的。

拷貝本地的jekyll目錄到版本庫

刪除username.github.com下面的示例文件(README.md,不要刪除，綁定域名會用到):

rm -rf _site index.html params.json  stylesheets

拷貝本地blog(這個是前面本地搭建的blog，後續等同，再也不說明)下的全部目錄及文件到username.github.com

cp -r blog/* username.github.com

重啓服務，就能夠在本地看見jekyll的站點頁面了。

本地Jekyll站點部署到Github Pages上（至關於線上環境）

git add --all               #添加到暫存區 git commit -m "提交jekyll默認頁面" #提交到本地倉庫 git push origin master #線上的站點是部署在master下面的

稍等10分鐘左右，Github Pages有必定時間緩存,咱們刷新username.github.io看看,已經ok了！

如今已經能夠在本地blog下寫文章，而後經過git推送到遠程倉庫，你們能夠經過http://username.github.io/訪問你的站點了

爲username.github.io綁定個性域名

寫博客的朋友通常都有本身的域名，請根據如下方法設置：

1. 咱們要綁定的話須要在username.github.com目錄下增長一個CNAME文件。
   在裏面添加你的域名，假設爲example.com，而後推送CNAME文件到遠程倉庫:

git add CNAME
git push origin master

1. 到域名服務商增長你的CNAME記錄。
   添加兩條記錄，@和www的主機記錄，記錄類型爲CNAME類型，CNAME表示別名記錄，該記錄能夠將多個名字映射到同一臺計算機。
   記錄值請寫username.github.io.,值得注意的是io後面還有一個圓點，切記。

   

2. 過個幾分鐘，刷新博客，個人博客域名是pizida.com，就能直接訪問了，不截圖了。

---

總結

本文介紹了Jekyll本地搭建過程和遠程部署Jekyll的流程，咱們梳理一下思路，之後可這樣開發以及發佈到線上：

本地開發：

1. 經過jekyll serve -B啓動服務，使用Rakefile建立文章，而後用本身喜歡的工具進行寫做。
2. 創做完成，經過jekyll build生成頁面，本地localhost:4000查看文章。

發佈線上

1. 本地確認文章無誤，能夠經過git add,git commit,git push等git命令推送文章到Github Pages服務器。
2. 經過綁定的域名，查看線上文章，這個時候你們都能訪問了。