Jekyll搭建我的博客-拓展版

關於Jekyll

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

書寫博客是一個很好地習慣，因此就整理建立一個博客系統來記錄本身的所見所聞所得！

另外，我的感受另外一款博客框架hexo也挺好的，實際上這兩款博客框架都是目前較爲主流的。

---

寫在前面(網上搜集來的)

• 針對Windows系統下的用戶，使用 Jekyll 搭建博客以前要確認下本機環境，Git 環境（用於部署到遠端）、Ruby 環境（Jekyll 是基於 Ruby 開發的）、包管理器 RubyGems

  (因爲我是基於windows來作這個的，因此有必要配置安裝相關的Windows環境，方便之後操做。)

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

• 若是你是 Mac 用戶，你就須要安裝 Xcode 和 Command-Line Tools了。

ruby與ruby gem的關係

• ruby是一種腳本語言
• ruby的其中一個「程序」叫rubygems，簡稱 gem(ruby 1.9.2及其以上就已經默認安裝了ruby gem的，因此無需再次手動安裝)
• 另外還有一個ruby bunder(rails框架中用來管理項目的gem的，叫bundle)，在windows中搭建jekyll，須要安裝完ruby後用gem 安裝下bunder。

ruby與jekyll的關係

• jekyll是基於ruby的，因此搭建jekyll以前必須確保ruby正常安裝 注意，必須ruby大於2.0.0。

jekyll與python的關係(表示才知道)

• jekyll3.0以前，有一個語法高亮插件」Pygments」，這玩意是基於python的，因此纔會有各類教程裏面都說搭建jekyll以前須要python環境。
  !!!可是,請注意 jekyll3.0之後，語法高亮插件已經默認改爲了 「rouge‘ 而它是基於ruby的，也就是說 如今搭建jekyll,咱們徹底沒必要要再安裝python 這樣能夠減小很大一部分工做量。

爲何ruby要改用source來源

• 無論是那一篇教程，都會告訴你安裝完ruby後須要經過gem命令將官方源改爲淘寶源或[ruby china][]源，這是由於默認的官方源在國外，國內幾乎是沒法訪問的(具體緣由麼…)
  因此纔會必須改爲其否源，不然沒法使用，可是，請注意 如今淘寶源已經中止維護了，最新搭建jekyll 都應該要改爲 [ruby china][]的源http://gems.ruby-china.org

如何解決jekyll安裝過程當中的問題

• 首先，在確保ruby(2.0.0以上)正常安裝，而且切換了ruby china源(或者淘寶源)後，其它遇到的全部問題幾乎都能解決。
• 固然，確實某些ruby程序的問題，因此只須要根據提示 經過相應命令，好比 gem install … 便可解決.

注：windows下還得確保DEVELOPMENT KIT正常安裝，而且正確配置。

提早總結一下，安裝Jekyll主要有如下三個步驟

• 安裝 Ruby
• 安裝 DevKit
• 安裝 Jekyll

接下來就正式開始安裝啦！

---

安裝Ruby

下載安裝exe，地址：http://rubyinstaller.org/downloads/

根據本身的機型選擇對應的安裝包(因後續有須要安裝不一樣的gem，我發現好多由於ruby版本問題裝不了，因此在這推薦使用2,2,4版本的)

安裝的注意點：
自動幫你配置環境變量，要安裝在根目錄

測試是否安裝完成：

ruby -v

個人輸出結果是

ruby 2.3.0p0 (2015-12-25 revision 53290) [x64-mingw32]

---

安裝Devkit

1）運行安裝包並解壓縮至某文件夾，如 C:\DevKit

2）經過初始化來建立config.yml文件。在命令行窗口內，輸入下列命令：

cd 「C:\DevKit」
ruby dk.rb init
notepad config.yml

3）在打開的記事本窗口中，於末尾添加新的一行- C:\Ruby200-x64(這段表明加上本身的ruby路徑，實際中能夠將C:\Ruby200-x64改成本身的實際ruby目錄)，保存文件並退出。

4）回到命令行窗口內，審查（非必須）並安裝。

ruby dk.rb review
ruby dk.rb install

一切順利後，就表明Development Kit已經正確安裝並配置

---

更改默認的source源

這是很重要的一步！鑑於官方源沒法訪問，因此咱們得更換爲可使用的源，這裏推薦使用[ruby china][]源，大體步驟以下:

• 先鍵入命令gem sources -l查看當前已經添加的源(默認應該是同時有官方源和淘寶源);
• 而後經過gem sources -r https://rubygems.org/ gem sources -r https://ruby.taobao.org/分別移除官方源和淘寶源 (注意，請對比實際，移除本身已經添加的源便可，能夠改成本身上一步中查詢出來的地址);
• 經過gem sources -a http://gems.ruby-china.org添加了[ruby china][]的可用源;
• 修改來源後能夠經過gem sources -l查看是否正確修改。

注意,上述的[ruby china][]源,我採用了http連接，這是由於我在windows中使用https時遇到了ssl問題，而且沒法解決，若是你能正確解決，能夠換爲https連接。

---

安裝jekyll

先查看你的gem是否安裝完畢：

gem -v
gem install jekyll

測試是否安裝完畢：

新建jekyll 項目

jekyll new myblog
cd myblog

運行jekyll 項目： 官方文檔

jekyll s / jekyll serve

另外，若是過程當中遇到一些其它缺失組件的狀況，能夠經過相應的gem命令安裝

最終成功運行！

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

---

簡析目錄結構

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

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

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

注意：若是你暫時沒有本身的域名，CNAME裏面就什麼都不用填。

這些目錄結構以及具體的做用能夠參考 官網文檔

進入 _config.yml裏面，修改爲你想看到的信息，從新 jekyll server ，刷新瀏覽器就能夠看到你剛剛修改的信息了。

到此，基於Jekyll初步搭建博客算是完成了。

---

關於網站評論管理系統與訪問統計系統

訪問統計

你須要去百度統計和Google Analytics(翻個牆咯~ 多大點事)註冊帳號，並提取相應的id（詳細操做請Baidu或Google）這在後面會使用到。

評論管理系統

目前本網站使用的是一款韓國名爲「來必力」評論系統，來必力官網。固然還了解了一下這款快速、簡潔且高效的無後端評論系統——Valine評論系統;

後面我又發現了gitment，一款由國內大牛imsun開發的基於github issues的評論系統，網上也是有很多相關的佈置教程的，做者在這裏提供一篇僅供參考–在Jekyll博客添加評論系統：gitment篇。

下面是這段時間在解決 * 添加評論系統 * 問題時,花時間找了一下國內外的幾個第三方評論系統:

• 多說，曾經較火的評論系統，網上介紹文章比較多，但已於2017年6月1日正式關停服務，沒法再用了。

• 暢言，sohu旗下的，網上說：須要我的博客備案後才能使用，備案操做自己就很繁瑣(這個我沒有測試過，不願肯定)。

• 友言，jiaThis旗下的，網上說：因爲時http請求，github pages如今都是https了， 在https站點沒法調用http請求，故也沒法使用(這個我也沒有測試過，不願肯定)。

• 網易雲跟貼，曾被看成「多說」的替代品，惋惜官方通報說也在2017年8月1日下線了。

• 再看看Disqus，國外比較火的評論系統，但在國內牆了，也只能暫時放棄了。

• 幸虧碰到了來必力,經過這段時間使用狀況看，仍是挺好的。

---

關於編寫文章

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

編寫一篇新文章很簡單，你能夠直接從 _posts/ 目錄下複製一份出來 2018-01-13-Hello World.md ，修更名字爲 2018-01-11-article1.md ，注意：文章名的格式必須爲 年-月-日-articleName ，後面的 articleName同時也是該篇文章的連接 URL。

只不過若是文章名爲中文，好比文章https://javef.github.io/2018/04/走進Markdown園子/的連接URL複製粘貼過來就會變成這樣的：https://javef.github.io/2018/04/%E8%B5%B0%E8%BF%9BMarkdown%E5%9B%AD%E5%AD%90/。

因此建議文章名最好是英文或者阿拉伯數字。

打開你新建的博客文章2018-01-11-article1.markdown

---
layout: post
title:  "article1"
date:   2018-01-11
tag: jekyll
---

(這兒即是正文內容了...)

其中：

title:  顯示的文章名， 如：title: 個人第一篇文章 
date:  顯示的文章發佈日期，如：date: 2018-01-11(格式要對) 
tag:  tag標籤的分類，如：tag: 隨筆 

注意：文章頭部格式必須包含上面的那些樣板信息，這樣才能正確解析。

我寫文章使用的是Cmd Markdown 編輯閱讀器，若是你對 Markdown 語法不熟悉或者想要了解更多，也能夠看看個人另外一篇博客: 走進Markdown園子。

---

總結

• 雖說在windows上搭建jekyll時遇到了各類各樣問題，可是最終都解決了；

• 在解決的那一瞬間，實際上是挺有知足感的(大概這也是樂此不疲的緣由之一吧)，並且確實感受知識面比起之前仍是有所拓展的；

• 因此無論怎麼樣，仍是得多學多動手嘗試！

• 你如今所學的知識，必定會在未來的某個時間段派上用場！

---

update 2018/4/22

進一步瞭解

• 咱們前面講的都是基於ruby+git配置安裝jekyll(Hexo也同樣)，其實是利用了Jekyll的博客框架的優點！

• 經過本地開啓Jekyll服務實現本地隨時隨地調試，方便；

• 再將本身調試好的我的博客項目上傳到遠端代碼託管倉庫，如GitHub、Coding等，利用他們提供的Pages功能實現靜態網頁的部署；

• 固然，若是你有本身的域名的話，也能夠將你的域名綁定到你的Pages頁面，能夠看看個人這篇文章：爲GitHub Pages自定義域名並添加SSL-開啓HTTPS強制

---

真正快速部署我的博客！

先提早說明一下這種取巧的方法，須要下載安裝哪些

• GitHub Desktop
• Git

具體步驟

1. 建立一個 github 帳號，而後建立一個跟你帳戶名同樣的倉庫，如個人 github 帳戶名叫 Javef，個人 github 倉庫名就叫 javef.github.io；

2. 其實這個時候去瀏覽器輸入https://javef.github.io,這個靜態頁面就已經建立好了，只是這個時候頁面內容太空虛…

3. 那麼爲了建立一個好看又穩定、簡潔又完整的網頁，去Google或Baidu搜索挑選下載某個你認爲與你審美搭得上的Jekyll、Hexo等等框架開放源碼項目，至於修改其中哪些配置參數變成你本身可用的頁面框架，這裏就不贅述了，很簡單的。這裏我提供一些:Jekyll-powered blogs and sites；

4. 下載安裝Git；

5. 下載安裝GitHub Desktop，輸入你的GitHub帳號密碼登陸；

6. 經過如下方法將你以前挑選準備的網頁框架項目文件上傳到遠端託管倉庫。

   • 打開此電腦，選擇一個文件夾，好比 f 盤的 test 文件，右鍵空白處點擊 git bash here；
   • git clone https://github.com/Javef/javef.github.io.git javef.github.io
   • cd javef.github.io
   • 將本身以前準備的網頁框架項目文件複製粘貼至 f 盤的 test 文件中
   • git add . # 將新添加的文件加入索引中
   • git commit -m 「first commit」 # 將此次的修改做爲一個打包
   • git push origin master # 提交到遠程倉庫
   • 可能會有彈出框讓你輸入你的 github 帳號和密碼哦
   • 這個時候你再去瀏覽器輸入https://javef.github.io，刷新一下，就能夠看到全新的頁面了~

補充-經常使用git命令：

$ git clone  //本地若是無遠程代碼，先作這步，否則就忽略
$ cd //定位到你blog的目錄下
$ git status //查看本地本身修改了多少文件
$ git add . //添加遠程不存在的git文件
$ git commit  -m "what I want told to someone" //提交修改
$ git push  //更新到遠程服務器上
$ git rm //移除文件

注意:

• git status 列出當前目錄全部尚未被git管理的文件和被git管理且被修改但還未提交(git commit)的文件，也就是全部改動文件，紅色字體標出。

• 而後輸入 git add . (有個點) 表示添加當前目錄下的全部文件和子目錄，

• 而後再輸入一次 git status 若是看見文件都變綠了 ，那麼就表明 它們已經準備好了被提交（git commit）。

---

關於 git rm

在github上只能刪除倉庫,卻沒法刪除文件夾或文件, 因此只能經過命令來解決

• $ git rm file1.txt #刪除file1.txt
• git commit -m ‘delete file1.txt’ #提交,添加操做說明
• git push -u origin master #將本次更改更新到github項目上去

這個命令必須是在提交到版本庫中之後纔可以執行的,不然的話：

• 若是這個文件沒有提交到暫存區，它是不會被發現的：

$ git rm file1.txt
fatal: pathspec 'file1.txt' did not match any files

• 若是提交到暫存區了之後，仍是沒辦法刪除：

$ git rm file1.txt
error: the following file has changes staged in the index:
    file1.txt
(use --cached to keep the file, or -f to force removal)

• 若是這個文件與版本庫中不一致，就刪除不了，除非強制刪除，以下所示：

$ git rm file2.txt
error: the following file has staged content different from both the file and the HEAD:
    file2.txt
(use -f to force removal)

若是你只有一個文件想要刪除，使用這個命令能夠真正的從文件系統中刪除了文件，而且它會暫存這個文件已經被刪除的事實，若是你提交了，這個文件不會從以前的歷史中消失，但會從將來的提交中消失。

參數–cached

若是你想刪除這樣一個文件，不想從文件系統中真正的刪除它,也就是本地項目中的文件不受操做影響,刪除的只是遠程倉庫中的文件，就是用下面的命令：

$ git rm --cached file3.txt

換個說法，你想告訴Git，再也不跟蹤這個文件，可是把它保留在工做樹中，這多是一種狀況，你之外地提交了一個文件，你並不想讓他成爲歷史的一部分。它暫存了刪除，可是，他在那裏保存了文件，如今，在你的工做樹中，做爲一個不被追蹤的文件。

注意：每次增長文件或刪除文件，都要commit 而後直接 git push -u origin master，就能夠同步到github上了。

參考資料

• Blogging Like a Hacker
• How I Turned Down $300,000 from Microsoft to go Full-Time on GitHub
• 介紹一些免費好用的靜態網站託管服務
• Jekyll+多說，創建屬於你的輕博客>>>>雖然多說已經亡了，但經過這篇博文很感慨這傢伙當年的強大…

【附：一文一圖】