“授人以漁”般教你搭建個人獨立博客
——使用jekyll在GitHub Pages上搭建個人博客
網上有不少資源蜂筹，但大多是“授人以魚”，文中一步一步的告訴你怎么做芦倒，卻沒有解釋為什么，以及他是如何知道的不翩。他們默認著你知道種種專業(yè)名詞的含義兵扬，默認著你掌握著特定技能。你折騰半天口蝠，查資料器钟，看教程，一步步下來妙蔗，有進行不下去的地方傲霸，再去查其他人的做法，最終也建立起了自己的獨立博客眉反。但卻昙啄，恍然不知，你用到的技術是什么含義寸五。
我認為梳凛，初學者，要想在一個項目中梳杏，切實提高自己韧拒，需要活用活學。遇到一個專業(yè)名詞十性，就去搞懂它叛溢，而不是馬馬虎虎混過去。一個技能點劲适、一個技能點的攻破楷掉，然后將點系統(tǒng)的連起來，形成自己的知識網絡减响，不斷去細化和擴充靖诗。所以，這篇文中支示，盡力的在“授人以漁”刊橘。讀者邊看邊實踐之后，一方面颂鸿，可以搭建好自己的獨立博客促绵；另一方面，會學到涉及的知識。前者是實際應用败晴，是至頂向下的過程浓冒；后者是基礎知識，是自底向上的過程尖坤。至底向上與至頂向下相結合稳懒，才能融會貫通。我希望在文中表達的,或者說希望讀者接收到的慢味，也就是融會貫通的學習能力场梆。
目錄
引子
Step 1. 選地
注冊Github，新建倉庫纯路，新建GitHub Pages或油，克隆到本地。
1.1. 什么是Git和GitHub? 分布式版本控制系統(tǒng)驰唬，代碼托管顶岸，開源項目。
1.2. 什么是GitHub Pages叫编？
介紹用的Blog
1.3. 如何使用辖佣？
Step 2. 建造
安裝Jekyll環(huán)境，運行本地服務器宵溅。
2.1. 什么是Jekyll凌简？ 靜態(tài)網站生成器
2.2. Jekyll文件目錄
2.3. 如何發(fā)表文章？
Step 3. 裝修
選擇模板恃逻，下載雏搂，安裝。
3.1. 如何選擇和修改主題寇损？
Step 4. 定制
4.1. 如何使用獨立域名凸郑？
4.2. 如何添加評論功能？
最后
不要忘記初衷矛市，在折騰之后芙沥，表達寫作，才是最重要的事情浊吏。
參考
正文
引子
在互聯(lián)網的世界里而昨，建自己的博客就像是在搭建房子。當然找田，你可以直接用別人為你建好的房子歌憨，比如Tumblr、簡書墩衙、新浪博客务嫡、Lofter甲抖、博客大巴等等。
Tumblr和Lofter都是自己比較喜歡的心铃，房子建得美麗又實用准谚。在同一個平臺下，就感覺你們在同一個社區(qū)去扣。當然不是這個社區(qū)居住的人們柱衔，也是可以進來逛一逛的。簡書厅篓，也是如此秀存。順便提一句，選擇簡書羽氮，是喜歡它的寫作體驗。
不過惫恼，有時候档押，你想從頭到尾自己建房子，就是搭建個自己的獨立博客祈纯。如果你不知道如何選擇令宿，可以讀一讀《What are the best solutions for a personal blog?》（需翻墻），文章分析了不同博客平臺的優(yōu)缺點和針對人群腕窥。當然粒没，我的選擇是 Jekyll+Github Pages。
開辟土地簇爆、搭建癞松、裝修、到注冊門牌號等入蛆，都是需要動手的响蓉。土地就是你的服務器，房子是你的網站哨毁，裝修是網站主題枫甲，布局和色彩等等，當然門牌號就是你的域名了扼褪。別忘了你還要寫文章想幻，這才是關鍵，你房間里放的不是家具话浇，而是你的思考成果脏毯。
話不多說了，我們開始建房子的美妙旅途吧 凳枝；）
Step 1. 選地
互聯(lián)網上有免費的地抄沮，也有收費的地跋核。Github Pages就是一個免費好用的地。
具體步驟：
- 首先叛买，注冊 Github
GitHub.jpg -
然后砂代，建立一個倉庫
NewRespsitory.png
Repository name(倉庫名)必須是 your_user_name.github.io
比如，我的用戶名是Yogayu率挣，那么倉庫名就取為 Yogayu.github.io刻伊。這一點很重要，不要弄錯椒功。
-
最后捶箱，按照提示步驟操作
QuickStep.png
一種簡單的方式是，下載GitHub的桌面客戶端动漾，安裝完成后丁屎，粘貼
http://github.com/your_user_name/your_user_name.github.io.git 克隆到本地。
- 之后旱眯，新建一個index.html文件晨川，push到對應的master
分支（推薦官網教程）。等一段時間之后（可以聽首歌）删豺，網站生效共虑，訪問your_user_name.github.io，就能看見完整的網頁了呀页。
firstIndex.png
到此妈拌，我們的地就選好了，也就是在用GitHub的服務器蓬蝶。
若這一過程中有問題尘分，可以參照官網文檔
1.1. 什么是 GitHub？
在說GitHub之前疾党，必須要提到Git音诫。Git是分布式版本控制系統(tǒng)。GitHub可以托管各種Git版本庫雪位，并提供一個web界面竭钝。
Github 就像是程序員們的Facebook，程序員們雹洗，寫代碼香罐，做項目，在此和全世界的人們分享时肿。
會使用GitHub的資源庇茫，比會搭建個人博客的價值大得多。
1.2.那么GitHub Pages是什么呢螃成？
Website for you and your project.
GitHub Pages有兩種旦签。一種是為個人或者組織的博客查坪。一種是為項目的博客。前者一個賬號只能建一個宁炫，后者偿曙，可以建很多個。
這樣的博客羔巢，免費望忆、獨立、安全竿秆。
1.3. Git和Github如何使用启摄？
可選擇終端或圖形化界面操作。怎么順手怎么來吧幽钢。
Step 2. 搭建
環(huán)境搭建歉备。
- 安裝Ruby，Mac一般默認安裝了Ruby匪燕，這一步可以忽略威创。官網安裝
- 安裝Bundler，在Terminal中輸入：
gem install bundler - 安裝Jekyll谎懦，同理輸入：
gem source 'https://rubygems.org'
gem 'github-pages'
*當然，如果你在墻內溃斋，很容易出問題界拦，無法安裝，推薦修改鏡像源（淘寶鏡像源）梗劫。 - 安裝Jekyll
gem install jekyll
在你希望存放的目錄下享甸，輸入：
jekyll new your-site-name
進入：
cd your-site-name
運行本地服務：
jekyll s
在瀏覽器中輸入：
http://localhost:4000
就可以在本地進行查看和調試你的網站了。
2.1. 什么是Jekyll梳侨？
Jekyll is a simple, blog-aware, static site generator.
Jekyll 是一個簡單的博客形態(tài)的靜態(tài)站點生產機器蛉威。
解釋一下，Jekyll可以將純文本轉換為靜態(tài)博客網站走哺。你整個網站的頁面都是它生成的蚯嫌，從主頁index到文章post。
比如丙躏，文章怎么寫择示？標準網頁格式是擴展標記語言HTML。純手寫晒旅？未免太麻煩栅盲。大家，多偏愛Markdown废恋。所以谈秫，就用它寫扒寄。不過，你需要有一個能把你用Markdown格式寫的文章拟烫，轉化為HTML網頁的東西该编，這里使用的就是靜態(tài)網頁生成器。
靜態(tài)網頁是相對于動態(tài)網頁而言的构灸，如果感興趣可以自己學習上渴。
2.2. Jekyll目錄
解釋一下整個jekyll的目錄(官方文檔):
為了之后不至于完全茫然，很值得先看一看喜颁，第一次看不懂沒關系稠氮，用著用著就知道什么意思了。就像練習吉他和弦的轉換半开，開始很難隔披，可換著換著你就會了。
這個很奇怪的結構是寂拆，文件目錄樹奢米，_config.yml這樣的代表一個文件，_drafts這樣的代表一個文件夾纠永，與它連接的文件鬓长，比如begin-with-the-crazy-ideas.textile，就在文件夾中尝江。一開始涉波，我沒怎么看官方文檔，嫌麻煩炭序，不如直接開始干啤覆。結果是繞了不少彎路，修改主題的時候惭聂，找半天各個部分窗声。
先說需要了解的，其余以后依個人需求學習辜纲。
- _config.yml 是配置文件笨觅，你可以在里面配置你博客會用到的常量，比如博客名侨歉，郵件
- _includes：就是你文章各個部分的html文件屋摇，可以在布局中包含這些文件
- _layouts：存放模板。就是你網頁的布局幽邓，主頁布局炮温，文章布局。當然不是指CSS那樣的布局牵舵，是指柒啤，你包含哪些基本的內容到頁面上倦挂。包含的內容就是includes里面的文件。
- _posts: 存放博客文章
- index：博客主頁
- CNAME文件：域名地址
- CSS：存放博客所用CSS
- JS: 存放博客所用JavaScript
可以設置每個html文件的title(標題)和layout(布局)担巩。比如index的layout一般是default方援。你也可以添加其他的頁面，加上不同的layout涛癌。
當你想定制博客的時候犯戏，以上目錄就很有用了。
2.3. 如何發(fā)表文章拳话？
文章的寫法先匪，在Markdown開頭加上一段：
---
layout: posttitle: "Welcome to Jekyll!"
date: 2014-01-27 21:57:11
categories: Blog
---
文件命名格式: 時間加標題
比如：2015-08-15-HowToBuildBlog.md
ok，你可以寫文章了弃衍，放入_post文件夾即可呀非。
Step 3. 裝修
3.1. 如何選擇和修改主題？
- 一種方式是使用程序員們寫好的镜盯，免費開源岸裙。
推薦兩個超級豐富的資源
- 另一種是，你也可以自己寫或修改速缆，需要懂一些前端的知識降允。
之前，我在Codecademy上學了兩艺糜、三天拟糕，進行入門。正好用自己的博客倦踢，來做練習。
其實前端還蠻好玩的侠草，特別滿足強迫癥的強迫意愿辱挥。
推薦資源：
- 基礎學習：Codecademy
- 框架: Bootstrap
雖然下了dreamweaver, 沒怎么用，不過官網上的教程不錯边涕。 推薦使用 Sublime Text, 多么好用的代碼編輯器啊晤碘，還有一個不錯的教程。再配上Jekyll的本地服務器功蜓，在Chrome上調試园爷。那感覺~
自己寫是好，也要看看別人是如何做的式撼，優(yōu)秀的網站是如何設計的童社。文章可以注重注重排版，字體選擇著隆，屏幕適配調整等扰楼。不過說實在的呀癣，個人博客最重要的還是你的文章內容。
Step 4. 定制
如果你已經做到了這一步弦赖，那么恭喜你项栏，你的個人博客已經搭建完成。不過要享受折騰的快樂蹬竖，或想要更好的獨特性沼沈，就繼續(xù)進行吧。
4.1. 如何使用獨立域名币厕？
- 購買域名 著名的有 Godaddy列另，支持支付寶。在網上可以搜到優(yōu)惠碼劈榨。
在你本地網站文件夾中添加一個文件 CNAME访递，寫入你的域名即可。
考慮到我國網絡特殊情況同辣，進行域名解析拷姿，可以選擇Dnspod
添加兩條A記錄(教程)，對旱函，就是計算機網絡課上學的A紀錄响巢。在你的Godaddy上看你買的域名，就能找到棒妨，兩條A記錄踪古。
買域名這事，我自己還有點經歷券腔。一開始我買了個azureyu.cn的域名伏穆，cn是國內的，然后讓提交身份證信息纷纫，輸入各種資料枕扫。又要進行網站備份，一大推看不懂的備份名詞辱魁，最后放棄了烟瞧。買了個國外的域名azureyu.com，沒有了以上復雜環(huán)節(jié)染簇，馬上就可以用了参滴。 （現(xiàn)在換成data2art.com啦。）
4.2. 添加評論
這些平時習以為常的東西锻弓，到這都是純手工制造砾赔。
我使用的是Disqus
- 注冊Disqus
-
在博客中添加，就會自動獲得它為你生成的一段代碼，復制它
add.png
- 新建一個名為Comments的html文件过蹂，復制進去這段代碼十绑，保存到文件夾_includes里去。然后在_layouts的post文件里加入：
其實酷勺，就是在你的網頁中加入一段代碼本橙，加載之后在網頁中加入Disqus，就會自動獲得它為你生成的一段代碼脆诉。
要還想添加一些feature就去折騰吧甚亭。比如分享、文章目錄击胜、代碼高亮亏狰、標簽云、搜索等等偶摔。我想到現(xiàn)在暇唾，學習這些內容，對你已經很簡單了辰斋。
最后
個人建議：
- 多看官方文檔策州，系統(tǒng)清晰很多
- 利用好而不是濫用搜索引擎
- 遇見問題，先看看他人如何解決
用一句作為結束：
不要忘記初衷宫仗，在折騰之后够挂，表達寫作，才是最重要的事情藕夫。
參考：
- http://www.ruanyifeng.com/blog/2012/08/blogging_with_jekyll.html
- http://beiyuu.com/github-pages/
- http://daringfireball.net/projects/markdown/
- http://stevelosh.com/
- http://jekyllbootstrap.com/
- http://gaohaoyang.github.io
- http://segmentfault.com/a/1190000000406013
- http://tom.preston-werner.com/2008/11/17/blogging-like-a-hacker.html
- http://jekyllbootstrap.com/usage/jekyll-quick-start.html#toc_0
作者「[AzureYu]」
文章聲明：自由轉載-非商用-非衍生-保持署名 | BY-NC-SA
