原創(chuàng)精選來(lái)自我的博客文章
目錄
- 說(shuō)在前面的話
- jekyll介紹
-
jekyll安裝
- 1碳想、事先準(zhǔn)備
- [2、RubyGems 安裝 Jekyll并啟動(dòng)](#2胸蛛、RubyGems 安裝 Jekyll并啟動(dòng))
- 初版博客
- 博客模板
- 拓展工具
- Q&A(持續(xù)更新)
<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è)也可以部署到 Gitlab
、Coding
等计露,主要就是當(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ì)css
、js
和html
乡数,所以有一個(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