vps搭建jekyll博客

1、關於github搭建個人博客的問題

首先，看下你修改後的模板上傳，提交了嗎
其次，看下樣式的路徑是否正確
然後，看專下是否引入模板的方式不對屬
最後，通過f 12g 看控制台信息，是樣式找不到，還是網路問題，應該是樣式找不到，那就要分析為什麼沒找到，是不是使用模板方式不對

2、用Jekyll 和 Octopress 搭建博客，哪個更合適

1. 假設你熟悉 Git，懂得一點 ruby，至少知道怎麼安裝。那麼可以選擇專 Jekyll（Octopress）來做 Blog。
好處是：屬Hosted 在 Github，省去伺服器，也不怕流量沖跨 Github 的伺服器；
缺點是：

內容別人可以隨時輕易 git clone；
寫 blog 用純 markdown 有時候很多麻煩（比如排版，在預覽的時候是好的，在 Github 不一定可以）；
沒有 GUI 界面，markdown 預覽也總要多餘的操作（比如編輯器插件，裝像 iA 一樣的軟體）;
需要動態內容，而 js 做不到這些，比如生成文件等，這個就別用了
2. 假設你不熟悉 Git，別用
3. 假設你有伺服器，而你不僅僅是寫寫靜態內容。用 Wordpress 等博客程序，從體驗，功能還是任何理由，都比 Jekyll 強。

3、如何使用ruby在github上搭建jekyll博客

1. 打開terminal，任意路徑執行： sudo gem install jekyll
2. 在github上創建項目.github.io
3. 拉取項目到本地
4. 在terminal中，任意路徑執行： jekyll new username.github.io
5. 將生成的文件復制到剛剛拉取的github項目目錄下。
6. 同步代碼，上傳~ 訪問username.github.io，即可看到下圖，博客搭建完成。
7. 本地運行，切換到項目目錄下，執行：jekyll serve
8. 在瀏覽器中執行：，即可看到和username.github.io相同的頁面內容。
9. 想要停止服務，在terminal中關閉其進程即可。屆時terminal中會顯示 「 [1]+ Stopped jekyll serve 」
10. 再次啟動時很可能會出現如下錯誤：
[2016-04-22 22:51:20] WARN TCPServer Error: Address already in use - bind(2) jekyll 3.1.3 | Error: Address already in use - bind(2)
產生原因：
關閉時使用了錯誤的命令，不是command+c，而是control+c。
解決方法：
a. 使用命令：ps aux | grep jekyll 查找到進程號
b. 使用命令：kill -9 28185 殺死進程（其中28185是進程號）
11. 打開 _config.yml 文件，即可修改文件展示的很多內容。

4、用 Jekyll 和 Octopress 搭建博客，哪個更合適？

Markdown的預覽可以抄用markdownPad2。至於Win平台上Jekyll的中文，_site為空或更本不生成，修改convertible.rb文件裡面self.content = File.read(File.join(base, name), :encoding => "utf-8")就可以。

5、到底如何使用jekyll發布博客

新建New Repository

1
用注冊好的賬號登陸github主頁，點擊右上角的「+」符號旁邊的三角標展開二級菜單，選擇「new repository」，如下圖所示：

2
然後我們開始為我們新建的repository命名，命名需要遵循規則：username/username.github.com，如下圖所示：

3
創建完成之後，復制當前資源的git地址，如下圖所示：

END
工程內容託管

1
在本地啟動git-bash,通過"git clone（git地址）"，將github上的工程復制到本地文件目錄下，如下圖所示：

2
查看Git根目錄，可以看到多出了一個文件夾，其名稱與git地址所對應的github上的工程一致，如下圖所示：

3
將jekyll工程下的所有文件都復制到此目錄下，如下圖所示：

4
通過指令「git add .」添加github上沒有的文件，如下圖所示：

5
然後我們需要把這些修改先提交到本地的git中，這是為後面將本地git修改提交到github上做准備，提交本地的指令是「git commit -a -m "修改說明"，如下圖所示：

6
第一次提交本地git時，提示需要設置一些個人github賬戶上的信息，設置完畢後再次提交，如下圖所示：

7
本地提交完成之後，當然是把本地修改提交到github上啦，這一步驟通過指令「git push origin master」,其中最後一個參數標志的就是提交到的指定版本號，與github上的Branch對應，如下圖所示：

8
提交的時候會彈出Git的登陸框，直接輸入github的賬號密碼完成驗證即可完成提交操作，如下圖所示：

9
回到瀏覽器上刷新之前新建的repository,可以看到jekyll工程文件已經順利提交到github上了，如下圖所示：

10
點擊左上角的「commit」也可查看當前github的更新提交日誌，如下圖所示：

11
回到github中的工程界面，點擊右上角的「Setting」選項，在GitHub Pages中可以看到個人博客的訪問地址，如下圖所示：

12
至此我們就完成了將個人博客部署到github上的所有操作了，訪問上述地址，查看效果，如下圖所示：

END
修改和更新

上述的操作完成之後，我們只是完成了github上個人博客的部署工作，後續我們需要不斷地添加修改博客內容，這里就需要用到git的更新操作。
這里我們用修改_config.yml文件為例，假如我們屏蔽掉twitter的屬性，如下圖所示：

我們在git-bash中輸入指令「git status」查詢修改的文件列表，如下圖所示：

按照提示的指令操作，使用「git add .」添加修改，再使用「git commit -a -m "修改說明"」把修改提交到本地git，再用指令「git push origin master」提交修改到github，如下圖所示：

6、jekyll和vps可以一起用嗎

可以
1. 首先安裝ruby環境.
2. 默認會安裝ruby gems包管理工具.(如果官方鏡像不給力請嘗試更換ruby-china的鏡像源)
3. 通過gem包安裝jekyll,命令如:gem install jekyll.
4. 上述方式僅安裝了jekyll,如果你使用Gemfile來管理依賴那麼你還需要安裝bundler.然後使用命令bundle install / jekyll server即可運行網站. (注意埠是否開放)
5. 這種情況下,必然增加許多繁瑣的操作如更新代碼(可以寫個插件自動拉取最新版本代碼),重新編譯,代碼管理,web安全等問題.
ps:自己搭建也有個好處,github禁用了jekyll插件,放到自己vps上那就可以為所欲為了.
如果還有其他問題歡迎追問,如果有所幫助敬請採納.

7、github 怎麼搭建博客

在github pages網站下用jekyll製作博客教程

在我動手用jekyll部署我的博客之前，一直使用godaddy上面的wordpress主頁來部署我的博客kresnik.co。WordPress當然有很多的優點，在我看來我用WordPress主要是為了
方便清晰的文件結構
可以隨意選用的各種模板和插件
相對便宜的部署價格
因為這些優點，所以我想我還會在WordPress官網上繼續保留我的免費博客。
既然這樣，看官想必想問為什麼要換成jekyll來重新部署博客？我簡單的總結了一下：
流行又簡潔的MarkDown寫作語法
輕量級的網站結構，不再有動態網站的沉重
方便的和github pages結合，不僅免費，而且方便
所以對比與WordPress的沉重，jekyll讓你回歸到創作本身，當然如果你喜歡折騰，jekyll也絕對不會讓你失望。推薦下面幾個站點亮一下。
rusty shutter
Rasmus Andersson
安裝流程
要用github pages，首先要在github中建立一個基於你的用戶名的repository: 比如說我，就要建立名為kresnikwang.github.io的repo。在以前的github版本中還需要在後台開啟pages的功能，現在系統檢測到這樣的repo名稱之後，會在setting中自動開啟GitHub Pages的功能，如下圖： 這樣之後你就可以把這個repo克隆到本地隨意進行修改了，在這個裡面上傳的網頁就是你的網站的內容了，可以上傳一個index.html試一試，這就是你的網站主頁了。 關於GiuHub的使用，可以看幾個比較好的入門教程：GitHub
之後我們就要在本地部署jekyll，jekyll的原理很簡單。這是一個已經合成好的靜態html網站結構，你用這個結構在username,http://github.io文件夾裡面粘帖好所有文件。再把更新完的本地repo推送到GitHub的master branch裡面，你的網站就更新建設完畢了。 首先你需要ruby來使用本地jekyll。Mac和Linux可以用Terminal配合yum或者brew這樣的包管理器很方便的安裝ruby。Windows下更是方便，可以直接中集成好的Ruby installer來進行安裝，文章里的就是傳送門。
安裝完ruby，之後就是要安裝RubyGems，gem是一個ruby的包管理系統，可以用gem很方便的在本地安裝ruby應用。
安裝方法

//在RubyGems官網上下載壓縮包，解壓到你的本地任意位置
//在Terminal中
cd yourpath to RubyGems //你解壓的位置
ruby setup.rb

有了gem之後安裝jekyll就很容易了，其實用過nodejs和npm的同學應該很熟悉這樣的包安裝，真是這個世界手殘腦殘們的救星。。。。。（樓主不自覺的摸了摸自己快殘了的手） 安裝jekyll，有了gem，直接在Terminal裡面輸入以下代碼：

$ gem install jekyll

好了，現在你的電腦已經准備完畢了。如果你是想自己搗鼓，可以根據這樣的目錄結構在你的http://username.github.io文件夾下建立以下目錄結構：
├── _config.yml
├── _drafts

| ├── begin-with-the-crazy-ideas.textile
| └── on-simplicity-in-technology.markdown

├── _includes

| ├── footer.html
| └── header.html

├── _layouts

| ├── default.html
| └── post.html

├── _posts

| ├── 2007-10-29-why-every-programmer-should-play-nethack.textile
| └── 2009-04-26-barcamp-boston-4-rounp.textile

├── _site
└── index.html
你可以一個個依次建立起來，然後在自己編寫一個你想要的博客。
如果你只是個普通用戶，只是想要一個模板然後開始寫自己的博客。那就很容易了，有幾個可以簡單開始的模板。
poole/poole · GitHub極簡風格的模板
Jekyll Themes jekyll的模板網站，可以找到各式各樣你喜歡的模板。
下載完了模板，可以吧裡面的內容解壓到你自己的網站目錄底下。這時候你可以測試一下：

$ cd you website path //cd到你的網站目錄下
$ jekyll serve
//一個開發伺服器將會運行在 http://localhost:4000/
//你就能在本地伺服器看到你用模板搭建的網站了

這時候可以看一下jekyll的設置，讓你把模板變成你自己個性化的內容。在網站根目錄下面找到_config.yml,這里會有幾個比較關鍵的設置： 裡面的permalink 就是你博客文章的目錄結構，可以用pretty來簡單的設置成日期+文章標題.html，也可以用自己喜歡的結構來設置。 記得把encoding 設置成utf-8，這樣有利於中英文雙語的寫作和閱讀。
到這里你就可以開始寫博客了，所有的文章直接放在_posts文件夾下面，格式就是我們之前提到的markdown文件，默認的格式是.md和.markdown文件。每篇文章的開始處需要使用yml格式來寫明這篇文章的簡單介紹，格式如下：

---
author: kresnikwang
comments: true
date: 2015-04-28 17:42:32+00:00
layout: post
title: PHP, Angular JS Development|My Export Quote|農產品出口工具開發
categories:
- Works
- Tech
tags:
- bootstrap
- javascript
- php
- AngularJS
---

layout就是post，讓jekyll知道你這是一篇post，很直觀。需要注意的是裡面的date，必須按照yml的語法來寫，否則就會出現編譯錯誤。可以只用YYYY-MM-DD來顯示日期，也可以像我一樣在後面加上 HH:MM:SS+00:00 來表示更具體的時間。
到此為止可以開始盡情的寫博客了，用GitHub軟體同步到你的repository裡面，網站上面就可以進行正常的顯示了。如果說要添加一下有用的extra功能的話，評論和相關文章這兩個功能比較多人會關注。 評論我們可以用Disqus國內應該也有類似的網站，到Disqus注冊一個賬號，選擇添加評論區域到自己的網頁，你將會的得到類似的代碼：

<!-- Add Disqus comments. -->
<div id="disqus_thread"></div>
<script type="text/javascript">
/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
var disqus_shortname = '<USERNAME>'; // required: replace example with your forum shortname
var disqus_identifier = "/works/tech/2016/06/07/%E5%9C%A8github%20pages%E7%BD%91%E7%AB%99%E4%B8%8B%E7%94%A8jekyll%E5%88%B6%E4%BD%9C%E5%8D%9A%E5%AE%A2%E6%95%99%E7%A8%8B.html";

/* * * DON'T EDIT BELOW THIS LINE * * */
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>
<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
<a href="http://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>

根據不同的模板，把代碼添加到_post/post.html或者_include/post.html里你的文章底下，那當這篇文章被訪問時，下方就會有評論區了
相關文章的功能也比較好做，jekyll本來就集成了site.related_posts的功能，自動會尋找相關內容的文章，在你的post代碼下面融入以下代碼：

<aside class="related">
<h2>Related Posts</h2>
<ul class="related-posts">

<li>
<h3>
<a href="http://kresnikwang.github.io///journey/2015/06/05/kresnik.co-%E5%8D%9A%E5%AE%A2%E6%90%AC%E5%AE%B6%E5%91%8A%E7%A4%BA.html">
kresnik.co博客搬家告示
<small><time datetime="2015-06-05T00:00:00+00:00">05 Jun 2015</time></small>
</a>
</h3>
</li>

<li>
<h3>
<a href="http://kresnikwang.github.io///tech/2015/06/02/javascript-include-html-page-by-jquery.html">
Javascript Include Html Page By Jquery
<small><time datetime="2015-06-02T18:45:42+00:00">02 Jun 2015</time></small>
</a>
</h3>
</li>

<li>
<h3>
<a href="http://kresnikwang.github.io///tech/2015/05/31/Github-use-http-instead-of-git.html">
Github設置，強制使用"https://" 來代替 "git://"
<small><time datetime="2015-05-31T05:03:36+00:00">31 May 2015</time></small>
</a>
</h3>
</li>

</ul>
</aside>

你每篇文章下面就會有三個相關文章的鏈接了。
這篇教程就到這里，有機會我想再寫寫liquid語法製作jekyll模板的內容和從wordpress導入文章到jekyll來的方法。喜歡能有些用處，感謝。

附上出處鏈接：https://www.hu.com/question/23934523

8、如何在github上搭建個人博客

一、為什麼在GitHub上託管個人博客

為什麼在GitHub上託管博客，這個問題可以分兩步來問：

首先，為什麼 可以 在GitHub上託管博客？

GitHub是一個基於git的版本託管服務網站，上面聚集著幾乎全世界的程序大牛，還有著大量的牛逼開源項目。而項目一旦成長壯大，一個簡單的名稱和一段描述很可能就無法滿足作者與讀者的需要。此時，GitHub Pages 就應運而生，它允許用戶用更具描述性的自定義頁面代替源碼列表。同時，用戶也可以利用其作為個人或組織主頁，將 靜態 網頁託管其上。

那麼，在有著WordPress等等大量的開源博客系統的情況下，為什麼選擇在GitHub上託管博客呢？

對程序猿來說無比親切，光是看起來感覺就很牛逼的"Git驅動式博客開發與發布流程"。

超級容易，5分鍾包學包會的發布方式。

靜態頁面，建立簡單，幾乎沒有安全性隱患，當然這也是缺點之一，靜態頁面無法做到太過復雜的交互設計和網站結構。不過作為一個簡單的個人博客，也不太會有這樣的需求

免費而可靠

更加詳細的內容可以參見這里 todo: Jekyll + GitHub Pages 的優點與缺點

話不多說，現在就來試試看。

<p id="002"></p>

二、10分鍾快速搭建一個博客原型

首先確認：

擁有一個GitHub賬號

已經安裝 Git ，（在Windows下，個人推薦直接安裝 GitExtensions ，有中文界面，並且集成了git + putty + kDiff ，比較省心一點啦）

1.建立一個項目

先在GitHub創建一個項目，名字隨意，盡量全部小寫字母，避免隨後會碰到的URL沖突問題

本地運行Git，隨意選個目錄，將剛才創建的項目clone下來
<!-- lang: bash -->
cd /d/
git clone https://github.com/narcotics726/blogdemo.git
cd blogdemo

<br/>
<br/>

2.建立配置文件_config.yml

注意：之後建立的所有文檔務必使用UTF-8 無 BOM 的編碼保存

在項目的根目錄下新建文件 _config.yml ，填寫 baseurl: /blogdemo ， blogdemo是你的項目名稱，這一行內容規定了整個網站的根路徑，稍後會詳細解釋這樣做的意義。
<br/>
<br/>

3.建立主頁

在根目錄下新建文件 index.html ， 內容像這樣：
<!-- lang: html -->

---
title: Hello, My Blog
---

{{ page.title }}

先不用急著奇怪為什麼一個html文件會出現"{}"這樣的標簽，這里使用的是 Liquid 模板語言 ，{{ page.title }} 表示「本頁面的標題」，更詳細的介紹我們以後再講，不妨這樣理解：
<!-- lang: python -->

#--- begin of page's head
title = "Hello, My Blog"
#--- end of page's head

print(page.title)

OK，那麼博客主頁設計完畢！（別吵...我答應過你要10分鍾內搭建完成的...先弄個毛胚房意思意思，美化啊功能啊什麼的晚點再說）
<br/>
<br/>

4.發布到GitHub

回到git bash, 檢查一下 git status ，確認 _config.yml 與 index.html 無誤後 add，commit，保持使用Git的良好習慣，記得添加提交描述

然後推送到GitHub，這里注意，因為我們使用的是GitHub Pages中的 Project Pages, GitHub僅會將分支 gh-pages 下的內容進行自動生成操作， 所以本地的 master 分支應推送到遠端的 gh-pages 分支
<!-- lang: bash -->

git push origin master:gh-pages

稍微等待一下，最多10分鍾（通常不用那麼久啦），訪問 yourname.github.com/blogdemo
，（其中 yourname
是你的GitHub帳戶名，blogdemo則是你的項目名）就會看見你的博客主頁（確實很醜...而且完全不像一個博客的樣子，不過別急，慢慢來比較
快~）

另外，如果不幸發現你的中文頁面出現了亂碼的情況，別著急，還是該死的UTF-8問題，後面我們會一勞永逸的解決他的，暫時先手動調整一下瀏覽器的編碼。

<br/>
<br/>

5.在_posts內撰寫文章，並在首頁加入文章列表

在這段時間里，我們繼續為你的博客添磚加瓦，讓他擁有最基本的文章閱讀功能，另外不斷F5頁面的同時也可以關注一下自己在GitHub注冊時所用的郵箱，如果之前推送的內容有誤的話，GitHub將以郵件形式提醒你生成失敗。

回到項目根目錄， mkdir _posts 新建一個目錄，看名字也知道啦，這里存放你所有的文章。

進入_posts目錄，新建一篇文章。注意默認的文件名格式是 year-month-day-postTitle 這樣。比如 2013-03-23-my_first_article.md，盡量避免空格或者其他亂七八糟的字元，這個文件名將作為URL的生成依據。文件名的格式可以通過修改 _config.yml 中的 permalink 屬性而改變，默認值為 date ，也就是我們剛剛創建的文件的樣子，具體的規則可以看這里，後面我們也會講到。

如果你發現了我剛才創建的文件後綴名是 .md ，熟悉GitHub或者StackOverFlow的朋友應該知道Markdown 格式，推薦使用GitHub託管博客的原因之一也正是如此，我們可以在大部分時候避開惱人的HTML，轉而使用更加直觀的Markdown語法。如果不熟悉也沒關系，可以參見這份Markdown 語法說明，應該說是相當易學，並且在熟悉之後非常易用的。

回到主題，打開剛才創建的文件，輸入如下內容：
<!-- lang: html -->

---
title: 我的第一篇文章
---

# {{ page.title }}

## 目錄
+ [第一部分](#partI)
+ [第二部分](#partII)
+ [第三部分](#partIII)

----------------------------------

## 第一部分 <p id="partI"></p>
這里是第一部分的內容

----------------------------------

## 第二部分 <p id="partII"></p>
這里是第二部分的內容

----------------------------------

## 第三部分 <p id="partIII"></p>
這里是第三部分的內容

{{ page.date|date_to_string }}

這段內容中使用了最常用的幾種Markdown語法，比如使用 # ，## 表示 HTML 中的 <h1></h1> , <h2></h2>。使用[text](link)創建超鏈接，使用 連續多個 - 創建水平線（注意：不包括最上端包圍title所使用的橫線，那裡表示一個頁面的「頭屬性」），等等。更多詳細的語法可以在之前提到的頁面查詢，這里不再贅述，總之，這是一種更加貼近真實寫作的語法，推薦大家嘗試。

啊對了，最後面的那個 {{ page.date|date_to_string }} 是指顯示本頁的日期屬性，並且轉換為可讀的字元串形式。同樣也是Liquid語法。

OK，那麼第一篇文章也寫好了，再把最新的repo推送到github，稍等片刻，就可以...等下，忘記給文章加上入口的鏈接了。

Sorry啦，重新打開我們的 index.html 文件，添加內容，變成下面這樣：
<!-- lang: html -->

---
title: My Blog
---

{{ page.title }}

{% for post in site.posts %}

{{ post.date|date_to_string }} <a href='{{ site.baseurl }}{{ post.url }}'>{{ post.title }}</a>

{% endfor %}

唔...都是Liquid的內容，簡單解釋一下，Liquid標記最主要分為兩種，一種是直接輸出變數內容，像這樣：

{{ page.title }}

另一種則是邏輯命令形式的，像這樣：

{% for x in y %} ... {% endfor %}

而剛才寫進主頁的內容，就是遍歷所有post文件，然後逐一顯示在頁面上，這里需要注意的一點就是在創建文章的超鏈接時，除了 post.url 之外，也要注意在前面加上site.url
，原因前面也有提到過，我們正在創建的是 Project Pages
類型的網站，其最終生成的網址根目錄是：username.github.com/projectname，而 post.url
生成的超鏈接僅僅會自動加上 username.github.com/ 這樣的前綴。

現在檢查一下更改的所有內容，確認不要犯下愚蠢的錯誤，比如把 "." 打成 "。"或者單詞拼錯之類的，提交並推送！

當當！如果一切順利，就能看到你的首頁外加文章列表閃亮登場。

<br/>
<br/>

6.增加模板套裝_layouts

文章進行到這里，或許開頭承諾的10分鍾已經超過不少了...很抱歉我欺騙了你，不過至少我們進展很快～接下來——如果你仍有興趣的話，讓我們為網站增加一些統一性的風格設置。

回到項目根目錄，新建文件夾 _layouts，顧名思義，「布局」是也。在 _layouts 中新建一個最基本的布局文件，姑且命名為default.html好了：
<!-- lang: html -->

<!DOCTYPE html>

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>{{ page.title }}</title>
</head>
<body>

{{ content }}

</body>
</html>

諾，首先解決了UTF-8的編碼問題，隨後指定了正文內容的位置，當然在這里只是一個最簡單的內容，在body內僅有一個 {{ content }} 標簽，你可以根據自己的喜好對頁面進行任何改動，只要記得保留這個內容標簽在你想要的位置就好。

然後我們修改index.html和剛寫完的那篇文章，只要在頭屬性上加一句就好：
<!-- lang: html -->

---
title: xxoo
layout: default.html
---

我們當然還可以把這個結構變得更靈活一些，比如繼續新增兩個模板分別叫做l_post.html與
l_index.html，他們首先引用default.html，但在其基礎上做出一定的修改。然後首頁使用l_index模板，而所有的post文件
則使用l_post模板，等等等等，請隨意發揮。但始終記得加上 {{ content }} 標簽

再次推送到服務端，查看效果。

至少這一點我沒騙你，要發布最新的更改實在是太簡單了，只需要一次push而已。

那麼，基本的項目結構如下：
.
|-- _config.yml
|-- _includes
|-- _layouts
| |-- default.html
| `-- post.html
|-- _posts
| |-- 2007-10-29-why-every-programmer-should-play-nethack.textile
| `-- 2009-04-26-barcamp-boston-4-rounp.textile
|-- _site
`-- index.html

這幅圖來自於：Yes We Jekyll，原諒我的懶惰，我實在不擅長排版...

9、我在使用jekyll建立個人博客，為什麼我的jekyll2.5.3裡面的_config.yml文件打開是這樣子啊？

~本來就是給高手用的（其實也就是入門），普通人就別折騰

10、如何在github上搭建自己的博客

一、為什麼在GitHub上託管個人博客

為什麼在GitHub上託管博客，這個問題可以分兩步來問：

首先，為什麼 可以 在GitHub上託管博客看

GitHub是一個基於git的版本託管服務網站，上面聚集著幾乎全世界的程序大牛，還有著大量的牛逼開源項目。而項目一旦成長壯大，一個簡單的名稱和一段描述很可能就無法滿足作者與讀者的需要。此時，GitHub Pages 就應運而生，它允許用戶用更具描述性的自定義頁面代替源碼列表。同時，用戶也可以利用其作為個人或組織主頁，將 靜態 網頁託管其上。

那麼，在有著WordPress等等大量的開源博客系統的情況下，為什麼選擇在GitHub上託管博客呢看

對程序猿來說無比親切，光是看起來感覺就很牛逼的"Git驅動式博客開發與發布流程"。

超級容易，5分鍾包學包會的發布方式。

靜態頁面，建立簡單，幾乎沒有安全性隱患，當然這也是缺點之一，靜態頁面無法做到太過復雜的交互設計和網站結構。不過作為一個簡單的個人博客，也不太會有這樣的需求

而可靠

更加詳細的內容可以參見這里 todo: Jekyll + GitHub Pages 的優點與缺點

話不多說，現在就來試試看。

<p id="002"></p>

二、10分鍾快速搭建一個博客原型

首先確認：

擁有一個GitHub賬號

已經安裝 Git ，（在Windows下，個人推薦直接安裝 GitExtensions ，有中文界面，並且集成了git + putty + kDiff ，比較省心一點啦）

1.建立一個項目

先在GitHub創建一個項目，名字隨意，盡量全部小寫字母，避免隨後會碰到的URL沖突問題

本地運行Git，隨意選個目錄，將剛才創建的項目clone下來
<!-- lang: bash -->
cd /d/
git clone
cd blogdemo

<br/>
<br/>

2.建立配置文件_config.yml

注意：之後建立的所有文檔務必使用UTF-8 無 BOM 的編碼保存

在項目的根目錄下新建文件 _config.yml ，填寫 baseurl: /blogdemo ， blogdemo是你的項目名稱，這一行內容規定了整個網站的根路徑，稍後會詳細解釋這樣做的意義。
<br/>
<br/>

3.建立主頁

在根目錄下新建文件 index.html ， 內容像這樣：
<!-- lang: html -->

---
title: Hello, My Blog
---

{{ page.title }}

先不用急著奇怪為什麼一個html文件會出現"{}"這樣的標簽，這里使用的是 Liquid 模板語言 ，{{ page.title }} 表示逗本頁面的標題地，更詳細的介紹我們以後再講，不妨這樣理解：
<!-- lang: python -->

#--- begin of page's head
title = "Hello, My Blog"
#--- end of page's head

print(page.title)

OK，那麼博客主頁設計完畢！（別吵...我答應過你要10分鍾內搭建完成的...先弄個毛胚房意思意思，美化啊功能啊什麼的晚點再說）
<br/>
<br/>

4.發布到GitHub

回到git bash, 檢查一下 git status ，確認 _config.yml 與 index.html 無誤後 add，commit，保持使用Git的良好習慣，記得添加提交描述

然後推送到GitHub，這里注意，因為我們使用的是GitHub Pages中的 Project Pages, GitHub僅會將分支 gh-pages 下的內容進行自動生成操作， 所以本地的 master 分支應推送到遠端的 gh-pages 分支
<!-- lang: bash -->

git push origin master:gh-pages

稍微等待一下，最多10分鍾（通常不用那麼久啦），訪問 yourname.github.com/blogdemo
，（其中 yourname
是你的GitHub帳戶名，blogdemo則是你的項目名）就會看見你的博客主頁（確實很醜...而且完全不像一個博客的樣子，不過別急，慢慢來比較
快~）

另外，如果不幸發現你的中文頁面出現了亂碼的情況，別著急，還是該死的UTF-8問題，後面我們會一勞永逸的解決他的，暫時先手動調整一下瀏覽器的編碼。

<br/>
<br/>

5.在_posts內撰寫文章，並在首頁加入文章列表

在這段時間里，我們繼續為你的博客添磚加瓦，讓他擁有最基本的文章閱讀功能，另外不斷F5頁面的同時也可以關注一下自己在GitHub注冊時所用的郵箱，如果之前推送的內容有誤的話，GitHub將以郵件形式提醒你生成失敗。

回到項目根目錄， mkdir _posts 新建一個目錄，看名字也知道啦，這里存放你所有的文章。

進入_posts目錄，新建一篇文章。注意默認的文件名格式是 year-month-day-postTitle 這樣。比如 2013-03-23-my_first_article.md，盡量避免空格或者其他亂七八糟的字元，這個文件名將作為URL的生成依據。文件名的格式可以通過修改 _config.yml 中的 permalink 屬性而改變，默認值為 date ，也就是我們剛剛創建的文件的樣子，具體的規則可以看這里，後面我們也會講到。

如果你發現了我剛才創建的文件後綴名是 .md ，熟悉GitHub或者StackOverFlow的朋友應該知道Markdown 格式，推薦使用GitHub託管博客的原因之一也正是如此，我們可以在大部分時候避開惱人的HTML，轉而使用更加直觀的Markdown語法。如果不熟悉也沒關系，可以參見這份Markdown 語法說明，應該說是相當易學，並且在熟悉之後非常易用的。

回到主題，打開剛才創建的文件，輸入如下內容：
<!-- lang: html -->

---
title: 我的第一篇文章
---

# {{ page.title }}

## 目錄
+ [第一部分](#partI)
+ [第二部分](#partII)
+ [第三部分](#partIII)

----------------------------------

## 第一部分 <p id="partI"></p>
這里是第一部分的內容

----------------------------------

## 第二部分 <p id="partII"></p>
這里是第二部分的內容

----------------------------------

## 第三部分 <p id="partIII"></p>
這里是第三部分的內容

{{ page.date|date_to_string }}

這段內容中使用了最常用的幾種Markdown語法，比如使用 # ，## 表示 HTML 中的 <h1></h1> , <h2></h2>。使用[text](link)創建超鏈接，使用 連續多個 - 創建水平線（注意：不包括最上端包圍title所使用的橫線，那裡表示一個頁面的逗頭屬性地），等等。更多詳細的語法可以在之前提到的頁面查詢，這里不再贅述，總之，這是一種更加貼近真實寫作的語法，推薦大家嘗試。

啊對了，最後面的那個 {{ page.date|date_to_string }} 是指顯示本頁的日期屬性，並且轉換為可讀的字元串形式。同樣也是Liquid語法。

OK，那麼第一篇文章也寫好了，再把最新的repo推送到github，稍等片刻，就可以...等下，忘記給文章加上入口的鏈接了。

Sorry啦，重新打開我們的 index.html 文件，添加內容，變成下面這樣：
<!-- lang: html -->

---
title: My Blog
---

{{ page.title }}

{% for post in site.posts %}

{{ post.date|date_to_string }} <a href='{{ site.baseurl }}{{ post.url }}'>{{ post.title }}</a>

{% endfor %}

唔...都是Liquid的內容，簡單解釋一下，Liquid標記最主要分為兩種，一種是直接輸出變數內容，像這樣：

{{ page.title }}

另一種則是邏輯命令形式的，像這樣：

{% for x in y %} ... {% endfor %}

而剛才寫進主頁的內容，就是遍歷所有post文件，然後逐一顯示在頁面上，這里需要注意的一點就是在創建文章的超鏈接時，除了 post.url 之外，也要注意在前面加上site.url
，原因前面也有提到過，我們正在創建的是 Project Pages
類型的網站，其最終生成的網址根目錄是：username.github.com/projectname，而 post.url
生成的超鏈接僅僅會自動加上 username.github.com/ 這樣的前綴。

現在檢查一下更改的所有內容，確認不要犯下愚蠢的錯誤，比如把 "." 打成 "。"或者單詞拼錯之類的，提交並推送！

當當！如果一切順利，就能看到你的首頁外加文章列表閃亮登場。

<br/>
<br/>

6.增加模板套裝_layouts

文章進行到這里，或許開頭承諾的10分鍾已經超過不少了...很抱歉我欺騙了你，不過至少我們進展很快～接下來——如果你仍有興趣的話，讓我們為網站增加一些統一性的風格設置。

回到項目根目錄，新建文件夾 _layouts，顧名思義，逗布局地是也。在 _layouts 中新建一個最基本的布局文件，姑且命名為default.html好了：
<!-- lang: html -->

<!DOCTYPE html>

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>{{ page.title }}</title>
</head>
<body>

{{ content }}

</body>
</html>

諾，首先解決了UTF-8的編碼問題，隨後指定了正文內容的位置，當然在這里只是一個最簡單的內容，在body內僅有一個 {{ content }} 標簽，你可以根據自己的喜好對頁面進行任何改動，只要記得保留這個內容標簽在你想要的位置就好。

然後我們修改index.html和剛寫完的那篇文章，只要在頭屬性上加一句就好：
<!-- lang: html -->

---
title: xxoo
layout: default.html
---

我們當然還可以把這個結構變得更靈活一些，比如繼續新增兩個模板分別叫做l_post.html與
l_index.html，他們首先引用default.html，但在其基礎上做出一定的修改。然後首頁使用l_index模板，而所有的post文件
則使用l_post模板，等等等等，請隨意發揮。但始終記得加上 {{ content }} 標簽

再次推送到服務端，查看效果。

至少這一點我沒騙你，要發布最新的更改實在是太簡單了，只需要一次push而已。

那麼，基本的項目結構如下：
.
|-- _config.yml
|-- _includes
|-- _layouts
| |-- default.html
| `-- post.html
|-- _posts
| |-- 2007-10-29-why-every-programmer-should-play-nethack.textile
| `-- 2009-04-26-barcamp-boston-4-rounp.textile
|-- _site
`-- index.html

這幅圖來自於：Yes We Jekyll，原諒我的懶惰，我實在不擅長排版...