免費(fèi)使用Jekyll+Github Page搭建博客入門攻略
<small>因?yàn)樽约簮蹞v（zhuang）鼓（bi）搁料，從博客百度空間到后來輕博客： Posterous燕偶、Tumblr伤靠、點(diǎn)點(diǎn)范咨、推他、Lofter...再到自己搭建wordpress燥撞，寫一些簡(jiǎn)單的靜態(tài)html頁面...我可真是在“玩”博客座柱，而非寫博客迷帜。直到有一天認(rèn)識(shí)了Jekyll，被其極簡(jiǎn)寫作理念所拯救......</small>
閱前說明
<p>此文主要記錄了我自己在建此站點(diǎn)過程中遇見的一些問題和解決方案色洞，完全是在自身能力層級(jí)范圍內(nèi)進(jìn)行描述戏锹，有誤之處望請(qǐng)包涵指正。</p>
本教程適用對(duì)象包括但不限于：
- <p>對(duì)建站火诸、HTML锦针、CSS等詞匯完全免疫的人
- <p>會(huì)修改網(wǎng)頁圖片鏈接的入門小白設(shè)計(jì)師
工具準(zhǔn)備
- 網(wǎng)頁代碼編輯器：Dreamweaver/Sublime Text
- Markdown 編輯器（本人用的Typed）
- Github客戶端
- 本文涉及到本地安裝Jekyll進(jìn)行預(yù)覽，所以使用到OS X系統(tǒng)的終端:Terminal(終端)
- VPN工具置蜀，便于搜索更多資料（本人使用魚擺擺)
- TXT/印象筆記奈搜，用于記錄相關(guān)代碼或者教程
第0步：買域名
懂的同學(xué)自行跳過此步，買域名為什么要放到前面來做掉盯荤？是為了防止有的同學(xué)弄到一半嫌麻煩馋吗，就沒精神再搗鼓下去，而買了域名秋秤，錢都往里砸了宏粤，極有可能幫助劇情往下繼續(xù)發(fā)展，有助于個(gè)人身心健康....
域名可在Go Daddy上使用支付寶購買灼卢，至于價(jià)格绍哎，相信我，你買的越貴你就越接近建站成功的時(shí)刻鞋真。
英文不好崇堰？那就萬網(wǎng)、美聯(lián)互橙灿巧、新網(wǎng)隨便挑一個(gè)國(guó)內(nèi)域名服務(wù)商買吧赶袄。
關(guān)于域名這塊，還需要域名解析的預(yù)備知識(shí)抠藕，你可先收藏這個(gè)
那么接下來，讓我們拿起工具開始吧蒋困！
— 圖片來自@jonrohan
第1步：注冊(cè)github并搭建Page
<p>1,注冊(cè)Github
2,新建一個(gè)"Repository-中文叫做版本庫或者倉庫盾似，相當(dāng)于是一個(gè)目錄，這個(gè)目錄里面的每個(gè)文件的修改雪标、刪除零院，Github都能進(jìn)行管理、跟蹤以及復(fù)原":Repository(倉庫)
<small>如圖村刨，點(diǎn)擊+ New Repository</small>
http://7d9kkp.com1.z0.glb.clouddn.com/$}`Q(}T)8K_HL4CADIP4$~9.jpg
3,輸入相關(guān)配置告抄，注意，在網(wǎng)址欄一定要輸入username.github.io嵌牺，username指的是你注冊(cè)時(shí)的用戶名
4,新建好后打洼，進(jìn)入項(xiàng)目龄糊，點(diǎn)擊右下角
Settings（設(shè)置）
5,點(diǎn)擊
Automatic page generator（頁面自動(dòng)生成器）
6,選擇一個(gè)你喜歡的模板，點(diǎn)擊生成...其實(shí)到這一步募疮，我們的網(wǎng)站已經(jīng)生成了炫惩，你可以通過自己的域名
username.github.io進(jìn)行訪問，只是目前阿浓，我們還沒有學(xué)會(huì)對(duì)網(wǎng)站上的內(nèi)容進(jìn)行管理他嚷。
第2步：解析自己的域名到username.github.io
參考我們?cè)跍?zhǔn)備階段收藏的網(wǎng)頁，在域名服務(wù)商那里將域名使用CNAME解析到自己的此處填寫你的用戶名.github.io芭毙。
接著筋蓖，我們要進(jìn)行g(shù)ithub端的配置，進(jìn)入我們所建的Page倉庫主頁退敦，找到右下角的Clone in Desktop扭勉，將項(xiàng)目克隆到本地。對(duì)了苛聘，你下好了github的客戶端了么涂炎？還沒有？那趕緊下了设哗，然后登陸唱捣，這就要用到它的同步功能了（其實(shí)用github客戶端同步文檔對(duì)Geek而言是一件不太光彩的事，但暫時(shí)我們先忍忍吧网梢，先讓自己看到一點(diǎn)效果震缭，得到一點(diǎn)成就感，鼓舞著自己走下去）
我們新建一個(gè)文檔战虏，隨便什么格式拣宰，然后在里面寫入自己買的域名（注意：如果是CNAME解析，此處域名前需加上“www.”）烦感，然后將文檔重命名成CNAME,不要加任何文件格式后綴巡社。
然后此CNAME文檔拖到我們克隆到本地的倉庫文件夾，使用github客戶端進(jìn)行同步上傳手趣。過不了多久晌该，你就可以在瀏覽器中打進(jìn)你的域名，你會(huì)驚奇地發(fā)現(xiàn)绿渣，它已經(jīng)自動(dòng)跳轉(zhuǎn)到你在github上設(shè)置的默認(rèn)網(wǎng)頁了朝群！
第3步：本地安裝git，并配置SSH
Git是什么中符？它是最先進(jìn)的分布式版本控制系統(tǒng)姜胖，什么？聽不懂淀散？那我舉個(gè)糖炒栗子甜蜜蜜地告訴你：假設(shè)你是個(gè)苦逼的設(shè)計(jì)師右莱，那么下圖應(yīng)該是你常有的遭遇：
這時(shí)候蚜锨，git就出現(xiàn)了，他不但能幫你自動(dòng)記錄每次文檔的改動(dòng)隧出，還能讓其他人協(xié)作編輯踏志，這樣的話，你就不需要手動(dòng)管理這么多文檔胀瞪，也不用U盤來U盤去的了针余，想看其他同學(xué)改了什么，直接瞄一眼修改記錄解決了凄诞。簡(jiǎn)直是IT屆的“暖男欲女”圆雁，趕緊用它“裝逼”用它“飛！”....
Windows
- <p>去git-scm下載與你系統(tǒng)對(duì)應(yīng)的安裝包帆谍，然后安裝伪朽。
- <p>安裝完成后，在開始菜單找到“Git”->“Git Bash”進(jìn)行打開操作汛蝙。
MAC OS X
- <p>先安裝個(gè)Xcode烈涮，在AppStore搜索安裝即可；(安裝包大窖剑，下載有些時(shí)間)
- <p>運(yùn)行Xcode坚洽，找到“Xcode”菜單->“Preferences”，再“Downloads”標(biāo)簽西土，點(diǎn)擊“Command Line Tools”讶舰，進(jìn)行Install。因?yàn)閄code其實(shí)默認(rèn)集成了Git需了，只是沒有安裝跳昼。
關(guān)于git安裝的更多知識(shí)可參考《mac安裝最新版本的git》和《安裝git》
要是你想學(xué)習(xí)更多關(guān)于git的知識(shí)，那就去看大而全的Git教程
<b>一些基本的git命令：</b>
//創(chuàng)建一個(gè)倉庫
$ mkdir cellier
$ cd cellier
$ pwd
/Users/cellier/username.github.io
//通過git init命令把這個(gè)目錄變成Git可以管理的倉庫
$ git init
Initialized empty Git repository in/Users/cellier/username.github.io /.git
//要更新你的本地倉庫至最新改動(dòng)肋乍，執(zhí)行:
git pull
我們?cè)炔皇菍ithub上的庫clone到本地了嗎鹅颊，這個(gè)時(shí)候就需要使用<code>git init</code>命令將這個(gè)文件夾目錄設(shè)置為本地git可以管理的倉庫。
關(guān)于ssh鏈接github可參考使用SSH密鑰連接Github【圖文教程】
第4步：在本地安裝Jekyll進(jìn)行項(xiàng)目預(yù)覽
可參考下面兩篇
特殊問題及解決方案
<dl>
<dt><p>解決gem install jekyll 運(yùn)行無法知道的問題</dt>
<dd><p><b>在代碼 gem install jekyll 前加 sudo住拭，在代碼后加-V可看到安裝詳情過程（mac x os）</b></dd>
<dt><p>解決gem ruby install 很慢的問題</dt>
<dd><p><b>換成淘寶鏡像源</b></dd>
<dt><p>解決報(bào)錯(cuò)：Agreeing to the Xcode/iOS license requires admin privileges, please re-run as root via sudo.</dt>
<dd><p><b>打開 Xcode 會(huì)彈出更新說明挪略，點(diǎn)擊同意，安裝完就可以了</b></dd>
<dt><p>測(cè)試SSH是否正常工作</dt>
<dd><p><b>參考測(cè)試SSH</b></dd>
</dl>
添加ReadMore功能（文章摘要功能）
參考JavaChen's Blog和Tr??ng TX blog
最終我的代碼綜合以上兩位的方法,在index.html添加了如下圖代碼：
給文章頁面添加多說評(píng)論
<p>1,注冊(cè)多說賬號(hào)滔岳，得到short_name （如圖，cellier-me就是我的shortname）
2,將生成的多說代碼復(fù)制挽牢，找到倉庫的_layouts文件夾下的post.html文檔谱煤，使用代碼編輯器打開，將多說代碼粘貼到{ { content } },</div>的下面禽拔，對(duì)了刘离，請(qǐng)養(yǎng)成隨時(shí)Ctrl+S進(jìn)行文檔編輯保存的習(xí)慣
3,找到倉庫里的_config.yml文檔室叉，代碼編輯器打開，貼入如下代碼
<code>
comments :
provider : duoshuo
duoshuo :
short_name : 你的short_name
</code>
- 更多關(guān)于多說設(shè)置的內(nèi)容可參考beeder同學(xué)寫的以及havee同學(xué)寫的
- 而關(guān)于多說的CSS樣式設(shè)置可參考多說評(píng)論框css樣式表自定義
- 樣式代碼貼入多說官網(wǎng)-個(gè)人-網(wǎng)站設(shè)置-基本設(shè)置里即可（下圖位置）
常用HTML代碼：
<code>
// 新建標(biāo)簽頁打開鏈接
<a href="此處填寫要跳轉(zhuǎn)的網(wǎng)址" target="_blank">鏈接文字</a>
</code>
<code>
// 插入圖片：width 設(shè)置圖片寬度硫惕；height 設(shè)置圖片高度
<img src="圖片路徑地址" width="165" height="60" />
</code>
<code>
// 插入圖片并居中
<div align=center><img src="圖片網(wǎng)址" width="500" /></div>
</code>
常用HTML標(biāo)簽
- <p>加粗字體, 使用
<strong> - <p>斜體, 使用
<em> - <p>標(biāo)注, 像 <abbr title="一種超文本標(biāo)記語言">HTML</abbr> 使用的是標(biāo)簽
<abbr>, 加上標(biāo)注標(biāo)題來闡述被標(biāo)注對(duì)象 - <p>引文, 像 <cite>— 魯迅</cite>, 使用
<cite> - <p><del>刪除線</del> 使用標(biāo)簽
<del>而<ins>下滑線</ins> 則使用<ins> - <p>上標(biāo)字 2B 使用
<sup>而下標(biāo)字 還是2B則用<sub> - <p><tt>打字機(jī)體</tt>使用
<tt> - <p><u>下劃線</u>還可使用
<u> - <p>特殊符號(hào)
表示 空格 - <p><big>大字體</big>使用
<big>茧痕，<small>小字體</small>使用<small>
<b>最后，我想說的是：</b>
“沒有十全十美的教程恼除，如同不存在徹頭徹尾的絕望”（改自村上春樹語）
重要的是保持住一顆搗騰不安的心以及對(duì)知識(shí)的渴望與翻墻找尋.....
轉(zhuǎn)載請(qǐng)注明：From cellier
