全網最清晰的Jekyll+Github搭建部落格教程

Jekyll GitHub · 發表 2018-09-17 21:10:00

摘要：能快樂旅行的人，一定是輕裝旅行的人前言應廣大的網友(裝逼~~哈哈)要求，決定寫個Jekyll+Giuhub搭建部落格的教程，以便幫助更多的人，畢竟我也是這麼過來的。這是我的部落格地址 ,可以先看看效果。首先介紹一下Jekyll這個框架，這個框架是Ruby語言一個基於靜態...

能快樂旅行的人，一定是輕裝旅行的人

前言

應廣大的網友(裝逼~~哈哈)要求，決定寫個Jekyll+Giuhub搭建部落格的教程，以便幫助更多的人，畢竟我也是這麼過來的。這是我的部落格地址 ,可以先看看效果。

首先介紹一下Jekyll這個框架，這個框架是Ruby語言一個基於靜態檔案的框架，因為不需要資料庫，直接用靜態檔案來渲染，再加上有Github的支援所以成了搭建部落格的不二之選。目前支援Markdown和

Textile 兩種格式的檔案。但是當你的部落格寫的越多的時候載入的就越慢，所以這就是靜態檔案的缺點。但是和他的優點比起來，這完全可以忽略不計。那廢話不多說，咱們開幹！！

正文

1.準備環境

linu環境的搭建(我的是CentOS6.8)

安裝Ruby

$ yum install ruby

檢視ruby版本

$ ruby -v

輸出

ruby 2.0.0p648 (2015-12-16) [x86_64-linux]

jekyll 最新版要求 ruby 2.2或更高,所以更新ruby

這裡我使用rvm更新ruby

安裝rvm

$ gpg --keyserver hkp://keys.gnupg.net --recv-keys 409B6B1796C275462A1703113804BB82D39DC0E3
$ curl -sSL https://get.rvm.io | bash -s stable
$ source ~/.bashrc
$ source ~/.bash_profile
$ source /etc/profile.d/rvm.sh

修改rvm 的映象到國內

$ echo "ruby_url=https://cache.ruby-china.org/pub/ruby" > /usr/local/rvm/user/db

注意這裡可能提示找不到/usr/local/rvm/user/db這個資料夾，所以你得自己用find命令找一下看你的這個rvm/user/db在哪裡

安裝Ruby 2.4

jekyll 最新版要求 ruby 2.3所以保險起見咱們直接安裝2.4

你還可以更新到更高版本，可以用 $ rvm list known 檢視當前各個作業系統可以安裝的所有版本

$ rvm install 2.4

gem在中國不好使, 萬能的中國Ruby社群給我們搭建了gem映象

移除gem預設倉庫地址並新增中國的倉庫

$ gem sources --remove https://rubygems.org/

$ gem source -a https://gems.ruby-china.com/

2.安裝jekyll & 啟動

安裝

$ gem install jekyll

安裝好好了以後，到這一步我們已經成功一大半了。

我們這時候就要建立一個部落格看一看了，這裡有兩種方式

1.方法一

在當前目錄建立一個部落格目錄,並進入到目錄

$ jekyll new myblog
$ cd myblog

啟動我們的部落格

$ jekyll serve --host 0.0.0.0

如果不出意外, 啟動是失敗的, 錯誤資訊應該類似於:

/usr/local/rvm/rubies/ruby-2.1.10/lib/ruby/site_ruby/2.1.0/rubygems/core_ext/kernel_require.rb:55:in `require': cannot load such file -- bundler (LoadError)
from /usr/local/rvm/rubies/ruby-2.1.10/lib/ruby/site_ruby/2.1.0/rubygems/core_ext/kernel_require.rb:55:in `require'
from /usr/local/rvm/gems/ruby-2.1.10/gems/jekyll-3.6.2/lib/jekyll/plugin_manager.rb:48:in `require_from_bundler'
from /usr/local/rvm/gems/ruby-2.1.10/gems/jekyll-3.6.2/exe/jekyll:11:in `<top (required)>'
from /usr/local/rvm/gems/ruby-2.1.10/bin/jekyll:23:in `load'
from /usr/local/rvm/gems/ruby-2.1.10/bin/jekyll:23:in `<main>'
from /usr/local/rvm/gems/ruby-2.1.10/bin/ruby_executable_hooks:15:in `eval'
from /usr/local/rvm/gems/ruby-2.1.10/bin/ruby_executable_hooks:15:in `<main>'

解決辦法如下:
安裝bundle
```
$ gem install bundle
```

再次執行

$jekyll serve --host 0.0.0.0

輸出

Configuration file: /usr/local/test/myblog/_config.yml
Source: /usr/local/test/myblog
Destination: /usr/local/test/myblog/_site
 Incremental build: disabled. Enable with --incremental
Generating... 
done in 0.427 seconds.
 Auto-regeneration: enabled for '/usr/local/test/myblog'
Server address: http://0.0.0.0:4000/
Server running... press ctrl-c to stop.

OK這樣我們就起了一個Jekyll

server的部落格，但是這種是系統預設的主題，既然我說這是方法一那肯定就還有方法二對吧

方法2:自定義主題

在 Jekyll主題上，我們可以選擇自己喜歡的主題，我自己隨便選一個給大家演示一下

下載，解壓到linux

CD到我們解壓的資料夾

執行命令

jekyll server --host 0.0.0.0

這時候不出意外會報錯

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

但是提示也很明顯，直接

bundle install

OK,再來執行

jekyll server --host 0.0.0.0

訪問地址

這裡貼一下啟動時候的一些命令引數請猛擊這裡

好了，這樣我們就可以實現定製我們自己的部落格主題了。

3.繫結Github主頁，關鍵的一步

這裡就需要一點Git基礎了，若有不會的也不打緊，因為這裡都是些簡單的操作。

1.先註冊Github賬號，這個我就不貼圖了

2.建立一個倉庫

倉庫名必須是:你的github賬號名.github.io

3.然後在回到我們linux上，我們在Jekyll上下載的那個主題資料夾下，進行git操作

如果Linux上沒有git的請安裝Git

yum install git

然後CD到我們之前下載的資料夾下

git init
git add .
git commit -m '第一次'
git remote add origin https://github.com/你的賬號/剛剛新建的倉庫名.git
git push origin master

這樣操作成功之後，我們就可以訪問

h ttps://你的賬號.github.io就可以看到我們之前的畫面了，好了一個Jekyll+Github的部落格算是搭起來了。

4.寫部落格

有了部落格網站，就到了最後“最難”的一部分了——寫部落格。。

推薦先將部落格專案從github上clone到windows環境，然後再慢慢寫，然後再push到Github上看效果，除錯。這樣雖然麻煩點，但是絕對比你在Linux上除錯要方便的多，之所以前面讓大家搭建Linux環境，只是想讓大家知道如何去自定義一個原生的Jekyll server 版的部落格。如果在push後出現構建Github Pages錯誤的問題，GitHub 會向你的賬戶傳送郵件。

或者直接開啟自己的github的倉庫主頁檢視settings選項，會有顯示那個頁面報錯，具體哪一行，這個功能大家一定要記得，因為後面的除錯會經常遇到。

那麼我們還是先看目錄說明

這裡特意強調一下這個_post目錄，和_config.yml檔案

_posts目錄就是專門存放部落格檔案的，你可以使用markdown或者Textile格式的檔案來寫部落格，我個人是用markdown格式寫的。但是不管是哪種格式的檔案都需要包含 YAML 頭資訊， Jekyll 才會把它當做一個特殊的檔案來處理。

在_posts目錄下新建一個markdown檔案，頭資訊必須在檔案的開始部分，並且需要按照 YAML 的格式寫在兩行三虛線之間。如下所示：

**_config.yml檔案**

Jekyll 有這非常靈活和強大的配置功能，既可以在網站根目錄下的 _config.yml 檔案中進行配置，也可以作為命令列引數來配置。預設配置大致如下：

title: Your awesome title
 email: [email protected] description: >- # this means to ignore newlines until "baseurl:"

 baseurl: "" # the subpath of your site, e.g. /blog
 url: "" # the base hostname & protocol for your site, e.g. http://example.com
 twitter_username: jekyllrb
 github_username:jekyll

 # Build settings
 markdown: kramdown
 theme: minima
 plugins:
- jekyll-feed

yml檔案使用了YAML語法，如果想更好的理解Jekyll就需要了解一下YAML語法的內容，這裡引用一下阮一峰老師寫的一篇 YAML語法教程

一般來說_config.yml的預設內容不需要太大改動，只需要往裡面新增你需要的自定義屬性，然後你就可以在頁面模板中使用site.屬性名來取得對應的值，例如site.title的值就是Your awesome title。

一般主題中也會自動幫你寫好這些自定義屬性，搭建你自己的部落格時你只需要將這些自定義屬性改為你想要的值即可。

若是上面的知識不足以讓你寫出滿意的部落格，所以這裡我強烈推薦 Jekyll中文文件，這個文件寫的很好，並且還是中文的可以說是非常友好了，我相信你讀了文件之後，對Jekyll語法，目錄結構肯定都有了一個很好的理解。

5.終極絕招

要放大招了。哈哈哈哈

我既然說是全網最全的Jekyll搭建部落格教程，萬一上面的你都不會，Linux環境也搭建不起來，那該如何是好，別急，這就告訴你絕招！！！

首先你還是得有Giuhub賬號

直接到github上去Fork別人已經搭建好的程式碼(友情提示，Fork記得給Star，也算是尊重原創)，我是Fork的黃玄大佬的，程式碼倉庫在這裡。fork到自己的程式碼倉庫之後，把倉庫名字按照我上面的教程改過來，然後訪問 h ttps://你的賬號.github.io ，就可以看到和大佬一模一樣的部落格，就問你激不激動。~~~接下來你要做的就是修改配置檔案，然後後把_POST資料夾的檔案都刪掉，把自己寫的Markdown檔案放進去。但是刪之前請看下別人的模板，這樣有助於更好的理解語法。詳細的說明還是看他的倉庫的README吧，寫的很清楚，並且也有中文版的。以後若是再遇到好看的模板如法炮製即可！

這種方法，既不需要上面Linux環境，直接一個Fork搞定，是不是很爽。哈哈

但是會萬一哪天你想自己搭建，那不會Linux環境下的操作可是不行的，所以會Linux環境下的原生Jekyll還是有用的老鐵。

教程就寫到這裡，若是覺得寫得好請記得點贊。如果有不懂的地方的歡迎在下面留言，一起討論學習。另外歡迎訪問我的個人網站一起交流學習。

作者:袁勇

出處:http://blog.pythoner.world

轉載請註明出處