jekyll.png

原創精選來自我的博客文章

目錄

說在前面的話

作為一個和電腦、代碼打交道的我，一直都想擁有自己的博客，一切都顯得那么高(zhuang)大(bi)上(yong)，在下定決心之后就在網上到處查找資料，最終發現一般用的就三種：WordPress、Hexo、Jekyll，最終權衡利弊選定了jekyll來實現博客搭建。

這個過程前前后后遇到很多坑，雖然有相關文檔，畢竟總不夠全面，在自己這里也有時候會出現一些他們沒碰到的問題，總體比較艱辛，所以也要記錄下自己搭建的過程，同時一直更新遇到的新問題，在使用過程中出現問題，可直接跳到末尾的Q&A進行查看是否有類似問題。

jekyll介紹

jekyll是一個簡單的免費的Blog生成工具，一個生成靜態網頁的工具，不需要數據庫支持，只用 Markdown (或 Textile)、Liquid、HTML & CSS 就可以構建可部署的靜態網站，最關鍵的是jekyll可以免費部署在Github上，而且可以綁定自己的域名。

至于更多詳細信息可以直接查看相關文檔：jekyll中文文檔、jekyll英文文檔

jekyll安裝

1、事先準備

安裝 Jekyll 相當簡單，但是你得先做好一些準備工作 開始前你需要確保你在系統里已經有如下配置

Git環境(部署到遠端以及代碼管理)

Ruby環境(jekyll基于Ruby開發)

Linux, Unix, or Mac OS X(官方文檔并不建議在Windows平臺安裝)

Mac用戶需要安裝Xcode和Command-Line Tools，下載方式Preferences → Downloads → Components

2、RubyGems 安裝 Jekyll并啟動

安裝 jekyll

$ gem install jekyll

創建博客

$ jekyll new myBlog

進入博客目錄

$ cd myBlog

啟動本地服務

$ jekyll serve

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

初版博客

1、目錄結構

基本jekyll網站啟動后，本地目錄結構如下，至于目錄結構意義，可以參考官方文檔目錄結構

.

├── _config.yml

├── _includes

| ├── footer.html

| └── header.html

├── _layouts

| ├── default.html

| ├── post.html

| └── page.html

├── _posts

| └── 2016-01-01-welcome-to-jekyll.markdown

├── _sass

| ├── _base.scss

| ├── _layout.scss

| └── _syntax-highlighting.scss

├── about.md

├── css

| └── main.scss

├── feed.xml

└── index.html

看能力去自行修改對應文件，重新 jekyll serve 就可以看到效果，有些修改并不需要重新運行這個命令，具體的可嘗試下就知道。

2、編寫博客文章

這里所有的博客文章都是放在 _post 目錄下面

文章命名格式：yyyy-mm-dd-title.md，后綴可以是.md 或者 .markdown，如：2016-01-02-firstBlog.md

文章內容格式如下，其中每篇文章頭部都是固定的

---

layout: post

title: "firstBlog"

date: 2016-01-02

categories: blog

---

正文...

title：文章內部標題；這里的標題和.md文章命名有一定區別，這里的標題是查看文章的時候顯示在頂部，而.md文章名是顯示在網址中，也就是該文章的URL

date：日期

categories：標簽；目前只能有一個標簽

如果對markdown不熟悉，可參考另一篇文章 markdown基本語法學習

注意：模板是支持markdown語法，但不是支持全部語法，所以這個方面是有待改進。

3、部署到遠端

這里是部署到GitHub Page，除了這個也可以部署到 Gitlab、Coding等，主要就是當做一個免費的服務器使用。

github 上創建一個倉庫，命名為 username.github.io，例如我的倉庫就是 honeycao.github.io，這個是一個命名規范。

本地創建好的博客用git管理，然后推送到GitHub上(遠程倉庫中不需要README.md文件，本地需要新建一個README.md文件用于推送到遠端)

$ cd myBlog

$ git init

$ git add README.md

$ git commit -m "first commit"

$ git remote add origin git@github.com:honeycao/test.git

$ git push -u origin master

檢測是否同步成功，成功之后再瀏覽器中輸入 username.github.io 就可以訪問該博客

博客模板

畢竟不是所有人都會css、js和html，所以有一個模板就顯得很關鍵了，jekyll官方也提供了 jekyll主題，基于模板只需簡單修改就可以使用了。

如果對于我博客模板有興趣的，可以到我的 GitHub博客 進行查看，或者下載下來運行看看，終端進入目錄下，運行 jekyll serve，然后在瀏覽器里輸入： http://127.0.0.1:4000，就可以看到我的博客效果了。

注意：由于我的博客使用了自定義的域名，所以第一次下載使用，需要修改域名，具體做法： 到目錄下打開CNAME文件，清空我的域名信息即可，如果你有自己的域名，也可以將其修改為你的域名。

如果想在我的博客基礎上修改成你的博客，那么需要修改下面幾個地方

把 _posts/ 目錄下的文章都去掉。

把 images/ 目錄下圖片替換，把 images/posts/目錄下 博客相關圖片去掉

修改 _config.yml 文件里面的內容為你自己的。

拓展工具

在我自己的博客中，除了模板自有功能之外，也添加了許多拓展的工具，如：評論、分享等，這里就介紹下我自己的經驗，這些拓展工具并不統一，只是作為一個參考而已，仁者見仁智者見智，另外小伙伴們如果有更好的拓展工具也可以介紹給我，不勝感激。。。

1、域名

如果沒有自己的域名，那么博客網址就是 username.github.io，看起來總不是那么好，所以有興趣就可以購買一個自己的域名玩玩，至于購買哪樣的那看你自己的經濟了；

購買途徑網上也有很多，這里也不多作介紹，主要說下域名解析的問題，一般購買域名的地方都可以免費解析，比如我是在 百度云 買的，同時可以免費解析，如果沒有地方解析，那么介紹一個可以免費解析的地方——DNSPOD，不管在哪解析，解析步驟都是一樣的，我自己在解析的時候就碰到一個問題，耽擱好久才解決，所以下面就貼出正確解析的方法

域名解析

主要注意記錄值填寫自己博客倉庫名就行

2、數據統計

百度統計：統計網站訪問詳情，不過由于才疏學淺并不能導出統計數據，所以只是用來作為一個流量頁面展示

不蒜子：和百度統計相輔相成，這個只能用于獲取統計數據，而并沒有展示頁面

3、評論

由于多說6月初就停用了，所以也不考慮它

暢言：一開始想的是這個，但是由于自己的域名并沒有備案，所以這個沒法用

網易云跟帖：這個是目前自己用的，效果也很好，主要是并不需要備案。

4、分享

百度分享：是目前所用的，目前自己用尚存在一個問題并沒有解決：安裝并成功分享之后，百度分享后臺并沒有獲取到數據。。。

5、404公益頁面

一般的404頁面沒什么特色，偶然看到別人網站上404頁面顯示的是騰訊尋找丟失兒童的公益廣告，感覺這個挺不錯的，就借鑒過來用了；

至于用法就是把下面代碼復制到博客目錄下 404.html 文件中。可自行修改主頁信息和鏈接。

Q&A(持續更新)

錯誤是無法避免，我們能做的就是正視它。

使用過程中遇到任何問題，可以聯系我，或者在下面留言，我會盡力去解決，并在下面記錄，或者你遇到了問題你自己已經解決也可以告訴我，目的就是為了讓更多的人少走彎路。

1、gem install jekyll 命令出錯

$ sudo gem install jekyll

ERROR: While executing gem ... (OpenSSL::SSL::SSLError)

hostname "upyun.gems.ruby-china.org" does not match the server certificate

原因：可能是證書錯誤或者需要更新Ruby環境(ruby版本必須是2.2以上)

解決證書錯誤

$ sudo curl -O http://curl.haxx.se/ca/cacert.pem

$ sudo mv cacert.pem cert.pem

更新Ruby環境

0.安裝homebrew，已經有了就可以跳過這一步

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

1.安裝rvm$ curl -L get.rvm.io | bash -s stable

2.裝載rvm$ source ~/.rvm/scripts/rvm

3.安裝2.3.0版本ruby$ rvm install 2.3.0

4.將2.3.0設為默認$ rvm use 2.3.0 --default

2、本地推送到GitHub出錯

$ git push -u origin master

error: src refspec master does not match any.

error: failed to push some refs to 'git@github.com:honeycao/username.github.io.git'

原因：創建遠端倉庫的時候，添加了一個README.md，本地推送到遠端的時候沒有README.md，那么需要先 pull 遠端代碼再進行推送

再或者遠端也沒有README.md，所以本地需要先新建一個，再進行推送

3、使用我的博客，如果你本機沒有任何jekyll環境，可能會報錯

/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 `'

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 `'

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 `'

原因：可能就是沒有安裝 bundler，執行安裝bundler 命名

$ gem install bundler

成功之后再次執行jekyll serve，有一個新的錯誤提示

Could not find proper version of jekyll (3.1.1) in any of the sources

Run `bundle install` to install missing gems.

根據提示進行操作即可

$ bundle install

總結

以上是生活随笔為你收集整理的jekyll网站上传服务器,jekyll 高效搭建个人博客之完整流程的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。