jekyll 高效搭建個(gè)人博客之完整流程

jekyll.png

原創(chuàng)精選來(lái)自我的博客文章

目錄


<a id="說(shuō)在前面的話"></a>說(shuō)在前面的話

作為一個(gè)和電腦语淘、代碼打交道的我,一直都想擁有自己的博客际歼,一切都顯得那么高(zhuang)大(bi)上(yong)惶翻,在下定決心之后就在網(wǎng)上到處查找資料,最終發(fā)現(xiàn)一般用的就三種:WordPress鹅心、Hexo吕粗、Jekyll,最終權(quán)衡利弊選定了jekyll來(lái)實(shí)現(xiàn)博客搭建旭愧。

這個(gè)過(guò)程前前后后遇到很多坑颅筋,雖然有相關(guān)文檔,畢竟總不夠全面输枯,在自己這里也有時(shí)候會(huì)出現(xiàn)一些他們沒(méi)碰到的問(wèn)題垃沦,總體比較艱辛,所以也要記錄下自己搭建的過(guò)程用押,同時(shí)一直更新遇到的新問(wèn)題,在使用過(guò)程中出現(xiàn)問(wèn)題靶剑,可直接跳到末尾的Q&A進(jìn)行查看是否有類(lèi)似問(wèn)題蜻拨。


<a id="jekyll介紹"></a>jekyll介紹

jekyll是一個(gè)簡(jiǎn)單的免費(fèi)的Blog生成工具,一個(gè)生成靜態(tài)網(wǎng)頁(yè)的工具桩引,不需要數(shù)據(jù)庫(kù)支持缎讼,只用 Markdown (或 Textile)、Liquid坑匠、HTML & CSS 就可以構(gòu)建可部署的靜態(tài)網(wǎng)站血崭,最關(guān)鍵的是jekyll可以免費(fèi)部署在Github上,而且可以綁定自己的域名。

至于更多詳細(xì)信息可以直接查看相關(guān)文檔:jekyll中文文檔夹纫、jekyll英文文檔


<a id="jekyll安裝"></a>jekyll安裝

<a id="1咽瓷、事先準(zhǔn)備"></a>1、事先準(zhǔn)備

安裝 Jekyll 相當(dāng)簡(jiǎn)單舰讹,但是你得先做好一些準(zhǔn)備工作 開(kāi)始前你需要確保你在系統(tǒng)里已經(jīng)有如下配置

  • Git環(huán)境(部署到遠(yuǎn)端以及代碼管理)
  • Ruby環(huán)境(jekyll基于Ruby開(kāi)發(fā))
  • 包管理器RubyGems
  • Linux, Unix, or Mac OS X(官方文檔并不建議在Windows平臺(tái)安裝)
  • Mac用戶需要安裝Xcode和Command-Line Tools茅姜,下載方式Preferences → Downloads → Components

<a id="2、RubyGems 安裝 Jekyll并啟動(dòng)"></a>2月匣、RubyGems 安裝 Jekyll并啟動(dòng)

安裝 jekyll

$ gem install jekyll  

創(chuàng)建博客

$ jekyll new myBlog 

進(jìn)入博客目錄

$ cd myBlog  

啟動(dòng)本地服務(wù)

$ jekyll serve

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


<a id="初版博客"></a>初版博客

<a id="1锄开、目錄結(jié)構(gòu)"></a>1素标、目錄結(jié)構(gòu)

基本jekyll網(wǎng)站啟動(dòng)后,本地目錄結(jié)構(gòu)如下萍悴,至于目錄結(jié)構(gòu)意義头遭,可以參考官方文檔目錄結(jié)構(gòu)

    .
    ├── _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

看能力去自行修改對(duì)應(yīng)文件,重新 jekyll serve 就可以看到效果退腥,有些修改并不需要重新運(yùn)行這個(gè)命令任岸,具體的可嘗試下就知道。

<a id="2狡刘、編寫(xiě)博客文章"></a>2享潜、編寫(xiě)博客文章

這里所有的博客文章都是放在 _post 目錄下面
文章命名格式:yyyy-mm-dd-title.md,后綴可以是.md 或者 .markdown嗅蔬,如:2016-01-02-firstBlog.md
文章內(nèi)容格式如下剑按,其中每篇文章頭部都是固定的

---
layout: post
title:  "firstBlog"
date:   2016-01-02 
categories: blog
---

正文...

title:文章內(nèi)部標(biāo)題;這里的標(biāo)題和.md文章命名有一定區(qū)別澜术,這里的標(biāo)題是查看文章的時(shí)候顯示在頂部艺蝴,而.md文章名是顯示在網(wǎng)址中,也就是該文章的URL
date:日期
categories:標(biāo)簽鸟废;目前只能有一個(gè)標(biāo)簽

如果對(duì)markdown不熟悉猜敢,可參考另一篇文章 markdown基本語(yǔ)法學(xué)習(xí)

注意:模板是支持markdown語(yǔ)法,但不是支持全部語(yǔ)法盒延,所以這個(gè)方面是有待改進(jìn)缩擂。

<a id="3、部署到遠(yuǎn)端"></a>3添寺、部署到遠(yuǎn)端

這里是部署到GitHub Page胯盯,除了這個(gè)也可以部署到 GitlabCoding等计露,主要就是當(dāng)做一個(gè)免費(fèi)的服務(wù)器使用博脑。

  • github 上創(chuàng)建一個(gè)倉(cāng)庫(kù)憎乙,命名為 username.github.io,例如我的倉(cāng)庫(kù)就是 honeycao.github.io叉趣,這個(gè)是一個(gè)命名規(guī)范泞边。
  • 本地創(chuàng)建好的博客用git管理,然后推送到GitHub上(遠(yuǎn)程倉(cāng)庫(kù)中不需要README.md文件君账,本地需要新建一個(gè)README.md文件用于推送到遠(yuǎn)端)
$ 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
  • 檢測(cè)是否同步成功繁堡,成功之后再瀏覽器中輸入 username.github.io 就可以訪問(wèn)該博客

<a id="博客模板"></a>博客模板

畢竟不是所有人都會(huì)cssjshtml乡数,所以有一個(gè)模板就顯得很關(guān)鍵了椭蹄,jekyll官方也提供了 jekyll主題,基于模板只需簡(jiǎn)單修改就可以使用了净赴。
如果對(duì)于我博客模板有興趣的绳矩,可以到我的 GitHub博客 進(jìn)行查看,或者下載下來(lái)運(yùn)行看看玖翅,終端進(jìn)入目錄下翼馆,運(yùn)行 jekyll serve,然后在瀏覽器里輸入: http://127.0.0.1:4000金度,就可以看到我的博客效果了应媚。

注意:由于我的博客使用了自定義的域名,所以第一次下載使用猜极,需要修改域名中姜,具體做法: 到目錄下打開(kāi)CNAME文件,清空我的域名信息即可跟伏,如果你有自己的域名丢胚,也可以將其修改為你的域名。

如果想在我的博客基礎(chǔ)上修改成你的博客受扳,那么需要修改下面幾個(gè)地方

  • _posts/ 目錄下的文章都去掉携龟。
  • images/ 目錄下圖片替換,把 images/posts/目錄下 博客相關(guān)圖片去掉
  • 修改 _config.yml 文件里面的內(nèi)容為你自己的勘高。

<a id="拓展工具"></a>拓展工具

在我自己的博客中峡蟋,除了模板自有功能之外,也添加了許多拓展的工具华望,如:評(píng)論层亿、分享等,這里就介紹下我自己的經(jīng)驗(yàn)立美,這些拓展工具并不統(tǒng)一,只是作為一個(gè)參考而已方灾,仁者見(jiàn)仁智者見(jiàn)智建蹄,另外小伙伴們?nèi)绻懈玫耐卣构ぞ咭部梢越榻B給我碌更,不勝感激。洞慎。痛单。

<a id="1、域名"></a>1劲腿、域名

如果沒(méi)有自己的域名旭绒,那么博客網(wǎng)址就是 username.github.io,看起來(lái)總不是那么好焦人,所以有興趣就可以購(gòu)買(mǎi)一個(gè)自己的域名玩玩挥吵,至于購(gòu)買(mǎi)哪樣的那看你自己的經(jīng)濟(jì)了;
購(gòu)買(mǎi)途徑網(wǎng)上也有很多花椭,這里也不多作介紹忽匈,主要說(shuō)下域名解析的問(wèn)題,一般購(gòu)買(mǎi)域名的地方都可以免費(fèi)解析矿辽,比如我是在 百度云 買(mǎi)的丹允,同時(shí)可以免費(fèi)解析,如果沒(méi)有地方解析袋倔,那么介紹一個(gè)可以免費(fèi)解析的地方——DNSPOD雕蔽,不管在哪解析,解析步驟都是一樣的宾娜,我自己在解析的時(shí)候就碰到一個(gè)問(wèn)題批狐,耽擱好久才解決,所以下面就貼出正確解析的方法

域名解析

主要注意記錄值填寫(xiě)自己博客倉(cāng)庫(kù)名就行

<a id="2碳默、數(shù)據(jù)統(tǒng)計(jì)"></a>2贾陷、數(shù)據(jù)統(tǒng)計(jì)

  • 百度統(tǒng)計(jì):統(tǒng)計(jì)網(wǎng)站訪問(wèn)詳情,不過(guò)由于才疏學(xué)淺并不能導(dǎo)出統(tǒng)計(jì)數(shù)據(jù)嘱根,所以只是用來(lái)作為一個(gè)流量頁(yè)面展示
  • 不蒜子:和百度統(tǒng)計(jì)相輔相成髓废,這個(gè)只能用于獲取統(tǒng)計(jì)數(shù)據(jù),而并沒(méi)有展示頁(yè)面

<a id="3该抒、評(píng)論"></a>3慌洪、評(píng)論

由于多說(shuō)6月初就停用了,所以也不考慮它

  • 暢言:一開(kāi)始想的是這個(gè)凑保,但是由于自己的域名并沒(méi)有備案冈爹,所以這個(gè)沒(méi)法用
  • 網(wǎng)易云跟帖:這個(gè)是目前自己用的,效果也很好欧引,主要是并不需要備案频伤。

<a id="4、分享"></a>4芝此、分享

  • 百度分享:是目前所用的憋肖,目前自己用尚存在一個(gè)問(wèn)題并沒(méi)有解決:安裝并成功分享之后因痛,百度分享后臺(tái)并沒(méi)有獲取到數(shù)據(jù)。岸更。鸵膏。

<a id="5、404公益頁(yè)面"></a>5怎炊、404公益頁(yè)面

一般的404頁(yè)面沒(méi)什么特色谭企,偶然看到別人網(wǎng)站上404頁(yè)面顯示的是騰訊尋找丟失兒童的公益廣告,感覺(jué)這個(gè)挺不錯(cuò)的评肆,就借鑒過(guò)來(lái)用了债查;
至于用法就是把下面代碼復(fù)制到博客目錄下 404.html 文件中≡愀郏可自行修改主頁(yè)信息和鏈接攀操。

<script type="text/javascript" src="http://www.qq.com/404/search_children.js" charset="utf-8" homePageUrl="http://arthurcao.com" homePageName="ArthurCao的個(gè)人博客"></script>

<a id="Q&A(持續(xù)更新)"></a>Q&A(持續(xù)更新)

錯(cuò)誤是無(wú)法避免,我們能做的就是正視它秸抚。
使用過(guò)程中遇到任何問(wèn)題速和,可以聯(lián)系我,或者在下面留言剥汤,我會(huì)盡力去解決颠放,并在下面記錄,或者你遇到了問(wèn)題你自己已經(jīng)解決也可以告訴我吭敢,目的就是為了讓更多的人少走彎路碰凶。

1、gem install jekyll 命令出錯(cuò)

$ sudo gem install jekyll
ERROR:  While executing gem ... (OpenSSL::SSL::SSLError)
hostname "upyun.gems.ruby-china.org" does not match the server certificate

原因:可能是證書(shū)錯(cuò)誤或者需要更新Ruby環(huán)境(ruby版本必須是2.2以上)

  • 解決證書(shū)錯(cuò)誤
$ sudo curl -O http://curl.haxx.se/ca/cacert.pem
$ sudo mv cacert.pem cert.pem
  • 更新Ruby環(huán)境
0.安裝homebrew鹿驼,已經(jīng)有了就可以跳過(guò)這一步
/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設(shè)為默認(rèn)$ rvm use 2.3.0 --default

2欲低、本地推送到GitHub出錯(cuò)

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

原因:創(chuàng)建遠(yuǎn)端倉(cāng)庫(kù)的時(shí)候,添加了一個(gè)README.md畜晰,本地推送到遠(yuǎn)端的時(shí)候沒(méi)有README.md砾莱,那么需要先 pull 遠(yuǎn)端代碼再進(jìn)行推送

再或者遠(yuǎn)端也沒(méi)有README.md,所以本地需要先新建一個(gè)凄鼻,再進(jìn)行推送

3腊瑟、使用我的博客,如果你本機(jī)沒(méi)有任何jekyll環(huán)境块蚌,可能會(huì)報(bào)錯(cuò)

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

原因:可能就是沒(méi)有安裝 bundler闰非,執(zhí)行安裝bundler 命名

$ gem install bundler

成功之后再次執(zhí)行jekyll serve,有一個(gè)新的錯(cuò)誤提示

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

根據(jù)提示進(jìn)行操作即可

$ bundle install

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末峭范,一起剝皮案震驚了整個(gè)濱河市财松,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌纱控,老刑警劉巖辆毡,帶你破解...
    沈念sama閱讀 206,378評(píng)論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件政敢,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡胚迫,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,356評(píng)論 2 382
  • 文/潘曉璐 我一進(jìn)店門(mén)唾那,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)访锻,“玉大人,你說(shuō)我怎么就攤上這事闹获∑谌” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 152,702評(píng)論 0 342
  • 文/不壞的土叔 我叫張陵避诽,是天一觀的道長(zhǎng)龟虎。 經(jīng)常有香客問(wèn)我,道長(zhǎng)沙庐,這世上最難降的妖魔是什么鲤妥? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 55,259評(píng)論 1 279
  • 正文 為了忘掉前任,我火速辦了婚禮拱雏,結(jié)果婚禮上棉安,老公的妹妹穿的比我還像新娘。我一直安慰自己铸抑,他們只是感情好贡耽,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,263評(píng)論 5 371
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著鹊汛,像睡著了一般蒲赂。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上刁憋,一...
    開(kāi)封第一講書(shū)人閱讀 49,036評(píng)論 1 285
  • 那天滥嘴,我揣著相機(jī)與錄音,去河邊找鬼职祷。 笑死氏涩,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的有梆。 我是一名探鬼主播是尖,決...
    沈念sama閱讀 38,349評(píng)論 3 400
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼泥耀!你這毒婦竟也來(lái)了饺汹?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 36,979評(píng)論 0 259
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤痰催,失蹤者是張志新(化名)和其女友劉穎兜辞,沒(méi)想到半個(gè)月后迎瞧,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 43,469評(píng)論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡逸吵,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 35,938評(píng)論 2 323
  • 正文 我和宋清朗相戀三年凶硅,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片扫皱。...
    茶點(diǎn)故事閱讀 38,059評(píng)論 1 333
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡足绅,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出韩脑,到底是詐尸還是另有隱情氢妈,我是刑警寧澤,帶...
    沈念sama閱讀 33,703評(píng)論 4 323
  • 正文 年R本政府宣布段多,位于F島的核電站首量,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏进苍。R本人自食惡果不足惜加缘,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,257評(píng)論 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望琅捏。 院中可真熱鬧生百,春花似錦、人聲如沸柄延。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 30,262評(píng)論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)搜吧。三九已至市俊,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間滤奈,已是汗流浹背摆昧。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 31,485評(píng)論 1 262
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留蜒程,地道東北人绅你。 一個(gè)月前我還...
    沈念sama閱讀 45,501評(píng)論 2 354
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像昭躺,于是被迫代替她去往敵國(guó)和親忌锯。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,792評(píng)論 2 345

推薦閱讀更多精彩內(nèi)容