操作系統(tǒng)：Mac OS / Linux
工具集：
1.Pelican——基于Python的靜態(tài)網(wǎng)頁(yè)生成器
2.馬克飛象——Evernote出的Markdown文本編輯器
3.GoDaddy——域名供應(yīng)商
4.DNSPod——提供免費(fèi)域名解析注冊(cè)服務(wù)
5.Github Pages——Github為每個(gè)注冊(cè)用戶提供300M的站點(diǎn)空間
6.Python——Pelican工具需要Python運(yùn)行環(huán)境
7.Google Analytics——谷歌站點(diǎn)數(shù)據(jù)監(jiān)測(cè)分析工具
8.Google Custom Search——谷歌自定義搜索引擎可用作站內(nèi)搜索工具
9.Google Webmasters——谷歌站長(zhǎng)工具
10.Disqus——用來(lái)提供博客評(píng)論功能
11.Sitemap——站點(diǎn)地圖，供谷歌，百度等搜索引擎收錄
12.七牛云存儲(chǔ)——靜態(tài)資源管理，上傳自動(dòng)生成網(wǎng)盤直鏈
最終效果展示：歡迎訪問(wèn)我的博客：https://jiang-hao.com

一、使用Github Pages創(chuàng)建個(gè)人博客頁(yè)面

Git是一個(gè)開(kāi)源的分布式版本控制系統(tǒng)，用以有效、高速的處理從很小到非常大的項(xiàng)目版本管理。GitHub可以托管各種git庫(kù)的站點(diǎn)。通過(guò)GitHub Pages生成的靜態(tài)站點(diǎn)，可以免費(fèi)托管、自定義主題、并且自制網(wǎng)頁(yè)界面。

1.首先到Github進(jìn)行賬號(hào)注冊(cè)：https://github.com/。
2.注冊(cè)后登錄Github，右上角點(diǎn)擊“Creat a new repo”，跳轉(zhuǎn)到新頁(yè)面后填寫相關(guān)內(nèi)容，注意版本庫(kù)名使用'username.github.io'的格式，這里將username替換成自己的用戶名即可。
3.設(shè)置和選擇好頁(yè)面模板后就可以生成然后發(fā)布新網(wǎng)頁(yè)了。
4.創(chuàng)建SSH密鑰并上傳到Github。

*以上內(nèi)容都很簡(jiǎn)單，有問(wèn)題可以參照：
關(guān)于Github注冊(cè)登錄：通過(guò)GitHub創(chuàng)建個(gè)人技術(shù)博客圖文詳解1
關(guān)于Github頁(yè)面生成：通過(guò)GitHub創(chuàng)建個(gè)人技術(shù)博客圖文詳解2
關(guān)于SSH認(rèn)證：Windows/Mac下使用SSH密鑰連接Github
官方文檔：Github官方文檔在這里

二、安裝Python、Pelican和Markdown

Pelican是一套開(kāi)源的使用Python編寫的博客靜態(tài)生成, 可以添加文章和和創(chuàng)建頁(yè)面, 可以使用MarkDown reStructuredText 和 AsiiDoc 的格式來(lái)抒寫, 同時(shí)使用 Disqus評(píng)論系統(tǒng), 支持 RSS和Atom輸出, 插件, 主題, 代碼高亮等功能, 采用Jajin2模板引擎, 可以很容易的更改模板。

1.安裝Python。最新的Mac OS 一般都自帶Python環(huán)境。在終端輸入"python"即可確認(rèn)Python版本。如有需要可以到官網(wǎng)安裝：http://www.python.org/。

2.安裝Pelican?？梢詮膅ithub克隆最新的代碼安裝, 并且建議在virtualenv下使用。首先建立 virtualenv（Python虛擬環(huán)境）:

virtualenv pelican      # 創(chuàng)建
cd pelican
sh bin/activate            # 激活虛擬環(huán)境

從github克隆最新代碼安裝Pelican：

git clone git://github.com/getpelican/pelican.git          # 下載代碼
cd pelican
python setup.py install

3.安裝Markdown:

pip install markdown

三、創(chuàng)建博客骨架

接下來(lái)將通過(guò)初始化Pelican設(shè)置來(lái)生成一個(gè)基本的博客框架。

1.搭建博客目錄：

mkdir blog
cd blog
pelican-quickstart

2.根據(jù)提示一步步輸入相應(yīng)的配置項(xiàng)，不知道如何設(shè)置的接受默認(rèn)即可，后續(xù)可以通過(guò)編輯pelicanconf.py文件更改配置。完成后將會(huì)在根目錄生成以下文件：

.
|-- content                # 所有文章放于此目錄
│   └── (pages)            # 存放手工創(chuàng)建的靜態(tài)頁(yè)面
|-- develop_server.sh      # 用于開(kāi)啟測(cè)試服務(wù)器
|-- Makefile               # 方便管理博客的Makefile
|-- output                 # 靜態(tài)生成文件
|-- pelicanconf.py         # 配置文件
|-- publishconf.py         # 配置文件

3.進(jìn)入output文件夾，把自己剛剛建好的username.github.io版本庫(kù)clone下來(lái)，注意這里以及后文中的username要替換成自己的Github用戶名：

cd output
git clone https://github.com/username/username.github.io.git

4.設(shè)置一鍵上傳部署到Github。打開(kāi)根目錄下的Makefile文件，修改以下三個(gè)地方：

 OUTPUTDIR=$(BASEDIR)/output/username.github.io    
 publish:    
 $(PELICAN) $(INPUTDIR) -o $(OUTPUTDIR) -s $(CONFFILE) $(PELICANOPTS)    
 github: publish    
 cd OUTPUTDIR ; git add . ;  git commit -am 'your comments' ; git push    

5.設(shè)置完后，以后寫完文章就可以通過(guò)在blog根目錄下執(zhí)行“make github”進(jìn)行一鍵部署了。

四、通過(guò)Markdown試寫博文并上傳Github發(fā)布

Markdown是當(dāng)下非常流行的一種文本編輯語(yǔ)法，支持HTML轉(zhuǎn)換，書寫博文排版也方便快捷。

1.寫一篇文章：用馬克飛象編輯器用Markdown語(yǔ)法來(lái)寫一篇文章保存為.md格式放在content目錄下。寫完后，執(zhí)行以下命令，即可在本機(jī)http://127.0.0.1:8000看到效果。

make publish
make serve

2.創(chuàng)建一個(gè)頁(yè)面：這里以創(chuàng)建 About頁(yè)面為例。在content目錄創(chuàng)建pages子目錄：

mkdir content/pages

*然后創(chuàng)建About.md并填入下面內(nèi)容：

title: About Me        
date: 2013-04-18       

About me content

*注意上面title和date是.md文件的重要參數(shù)，需要寫在文檔開(kāi)頭。比如：

Title: Pelican+Github
Date: 2014-10-07 22:20
Modified: 2014-10-07 23:04
Tags: python, pelican
Slug: build-blog-system-by-pelican
Authors: Joey Huang
Summary: blablablablablablablabla...
Status: draft

相關(guān)介紹請(qǐng)參見(jiàn)官方文檔：http://pelican-zh.readthedocs.org/en/latest/zh-cn/ 。完成后同樣可以在本機(jī)http://127.0.0.1:8000看效果。

3.創(chuàng)建導(dǎo)航目錄項(xiàng)：Menu Item設(shè)置。在你的博客中，可設(shè)置相應(yīng)的菜單項(xiàng)，菜單項(xiàng)是通過(guò)pelicanconf.py設(shè)置的，具體如下所示：

MENUITEMS = (("ITEM1","http://github.com"),
             ("ITEM2",URL),
            ......)

五、安裝主題

這里以主題bootstrap2為例，同樣還在blog目錄下：

git clone https://github.com/getpelican/pelican-themes.git
cd pelican-themes
pelican-themes -i bootstrap2

對(duì)應(yīng)在在pelicanconf.py中添加主題選擇條目：

THEME = 'bootstrap2'

六、安裝第三方評(píng)論系統(tǒng)Disqus

在Disqus上申請(qǐng)一個(gè)站點(diǎn)，記住shortname。 在pelicanconf.py添加：

DISQUS_SITENAME = Shortname

七、添加Google Analytics

去Google Analytics申請(qǐng)賬號(hào)并通過(guò)驗(yàn)證，記下跟蹤ID（Track ID）， 在pelicanconf.py添加：

GOOGLE_ANALYTICS = '跟蹤ID'

八、添加Google Webmasters和百度站長(zhǎng)收錄

為了讓博客被Google更好的收錄，比如手動(dòng)讓Googlebot抓取、提交Robots、更新Sitemap等等。

1.在Google Webmasters上注冊(cè)并通過(guò)驗(yàn)證。

2.添加sitemap插件。還是到/blog目錄下執(zhí)行：

cd ~/blog
git clone git://github.com/getpelican/pelican-plugins.git

*然后在pelicanconf.py里配置如下：

PLUGIN_PATH = u"pelican-plugins"
PLUGINS = ["sitemap"]
SITEMAP = {
    "format": "xml",
    "priorities": {
        "articles": 0.7,
        "indexes": 0.5,
        "pages": 0.3,
    },
    "changefreqs": {
        "articles": "monthly",
        "indexes": "daily",
        "pages": "monthly",
    }
}

3.將make github命令后在output目錄下生成的sitemap文件上傳到Google Webmasters。

4.對(duì)于百度。它是宣稱支持sitemap的，但是網(wǎng)上相關(guān)問(wèn)題一大堆，要么格式不對(duì)要么就是抓取失敗，要么突然不開(kāi)放支持。在幾次嘗試失敗以后，我是通過(guò)添加JavaScript代碼來(lái)自動(dòng)推送網(wǎng)站鏈接的。具體是在主題模板（base.html）面最后添加代碼：

<script>
(function(){
    var bp = document.createElement('script');
    bp.src = '//push.zhanzhang.baidu.com/push.js';
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(bp, s);
})();
</script>

*我還是比較推崇這種方法的，因?yàn)楸萻itemap方法被抓取收錄的時(shí)間短很多。谷歌的sitemap是xml格式。

九、添加谷歌／百度站內(nèi)搜索

谷歌站內(nèi)搜索
1.修改主題。找到這個(gè)主題的templates文件夾中的base.html，在<div class="nav-collapse">的最后，添加以下內(nèi)容：

<form class="navbar-search pull-right" action="/search.html">
    <input type="text" class="search-query" placeholder="Search" name="q" id="s">
</form>

2.創(chuàng)建search.html。之后，在output目錄下，新建一個(gè)名為search.html的文件，寫入下面的內(nèi)容，其中需要你自己修改的是google站內(nèi)搜索的ID號(hào)，需要自己在google站內(nèi)搜索的網(wǎng)站上自己申請(qǐng)。

<html lang="zh_CN">
<head>
<meta charset="utf-8">
<title>站內(nèi)搜索</title>
</head>
  <body>
<style>
#search-box {
    position: relative;
    width: 50%;
    margin: 0;
    padding: 1em;
}

#search-form {
    height: 30px;
    border: 1px solid #999;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background-color: #fff;
    overflow: hidden;
}

#search-text {
    font-size: 14px;
    color: #ddd;
    border-width: 0;
    background: transparent;
}

#search-box input[type="text"] {
    width: 90%;
    padding: 4px 0 12px 1em;
    color: #333;
    outline: none;
}
</style>
<div id='search-box'>
  <form action='/search.html' id='search-form' method='get' target='_top'>
    <input id='search-text' name='q' placeholder='Search' type='text'/>
  </form>
</div>
<div id="cse" style="width: 100%;">Loading</div>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript"> 
  google.load('search', '1', {language : 'zh-CN', style : google.loader.themes.V2_DEFAULT});
  google.setOnLoadCallback(function() {
    var customSearchOptions = {};  var customSearchControl = new google.search.CustomSearchControl(
      '012191777864628038963:**********<!寫入你申請(qǐng)的google站內(nèi)搜索的ID號(hào)>）', customSearchOptions);
    customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
    var options = new google.search.DrawOptions();
    options.enableSearchResultsOnly(); 
    customSearchControl.draw('cse', options);
    function parseParamsFromUrl() {
      var params = {};
      var parts = window.location.search.substr(1).split('\x26');
      for (var i = 0; i < parts.length; i++) {
        var keyValuePair = parts[i].split('=');
        var key = decodeURIComponent(keyValuePair[0]);
        params[key] = keyValuePair[1] ?
            decodeURIComponent(keyValuePair[1].replace(/\+/g, ' ')) :
            keyValuePair[1];
      }
      return params;
    }

    var urlParams = parseParamsFromUrl();
    var queryParamName = "q";
    if (urlParams[queryParamName]) {
      customSearchControl.execute(urlParams[queryParamName]);
    }
  }, true);
</script>
</body>
</html>

3.將GOOGLE_CUSTOM_SEARCH_SIDEBAR = "001578481551708017171:axpo6yvtdyg" 添加到pelicanconf.py文件。注意, 引號(hào)里的那一串字符是之前申請(qǐng)的自定義搜索引擎的id。
4.最后發(fā)布后就可以看到搜索框了。

百度站內(nèi)搜索
1.在百度站長(zhǎng)平臺(tái)中注冊(cè)一個(gè)賬號(hào)，之后添加網(wǎng)站，按照提示驗(yàn)證網(wǎng)站。之后左側(cè)其他工具中找到站內(nèi)搜索，按照提示填寫基本信息，選擇搜索框樣式，之后點(diǎn)擊查看代碼，復(fù)制其中內(nèi)容，留用。
2.同樣在base.html的這個(gè)<div class="nav-collapse">的最后，新建一個(gè)div，剛才注冊(cè)最后復(fù)制的代碼粘貼到這個(gè)div中：

<div class="navbar-search pull-right">
    <script>  
        <!略>
    </script>
</div>

3.發(fā)布驗(yàn)證。

十、添加Tags側(cè)邊欄

在其他一些pelican主題中，看到有標(biāo)簽云，想到Tags的鏈接可能比Categories的鏈接更有用，通過(guò)更改主題，添加了側(cè)欄中紅框內(nèi)的Tags鏈接框。

1.還是找到base.html，找到categories部分：

{% if categories %}
<div class="well" style="padding: 8px 0; background-color: #FBFBFB;">
<ul class="nav nav-list">
    <li class="nav-header"> 
    Categories
    </li>

    {% for cat, null in categories %}
    <li><a href="{{ SITEURL }}/{{ cat.url }}">{{ cat }}</a></li>
    {% endfor %}                   
</ul>
</div>
{% endif %}

2.在這段后面添加：

{% if tags %}
<div class="well" style="padding: 8px 0; background-color: #FBFBFB;">
<ul class="nav nav-list">
    <li class="nav-header"> 
    Tags
    </li>

{% for name, tag in tags %}
    <li><a href="{{ SITEURL }}/{{ name.url }}">{{ name }}</a></li>
{% endfor %}
</ul>
</div>
{% endif %}

3.保存，重新發(fā)布網(wǎng)頁(yè)驗(yàn)證。

十一、插入視頻

其實(shí)很簡(jiǎn)單, 只需要把html代碼放進(jìn)markdown源文件就行了! 而視頻的html代碼在視頻網(wǎng)站上一般都會(huì)提供。復(fù)制下來(lái)放進(jìn)源文件即可。

十二、拷貝靜態(tài)文件

如果我們定義靜態(tài)的文件，該如何將它在每次生成的時(shí)候拷貝到 output 目錄呢，我們以網(wǎng)站logo圖片sitelogo.ico為例，在我們的 content/extra 下放置網(wǎng)站的靜態(tài)資源文件：sitelogo.ico，在pelicanconf.py更改或添加 FILES_TO_COPY項(xiàng)：

FILES_TO_COPY = (
    ("extra/sitelogo.ico", "sitelogo.ico"),
)

這樣在每次生成html的時(shí)候都會(huì)把 content/extra下的 sitelogo.ico 拷貝到 output目錄下。

十三、資源目錄管理

使用目錄名作為文章的分類名

USE_FOLDER_AS_CATEGORY = True

使用文件名作為文章或頁(yè)面的slug（url）

FILENAME_METADATA = '(?P<slug>.*)'

頁(yè)面的顯示路徑和保存路徑，推薦下面的方式

ARTICLE_URL = '{category}/{slug}.html'
ARTICLE_SAVE_AS = ARTICLE_URL
PAGE_URL = '{slug}.html'
PAGE_SAVE_AS = PAGE_URL
CATEGORY_URL = '{slug}/index.html'
CATEGORY_SAVE_AS = CATEGORY_URL
TAG_URL = 'tag/{slug}.html'
TAG_SAVE_AS = TAG_URL
TAGS_SAVE_AS = 'tag/index.html'

十四、指定文章或頁(yè)面URL

在需要指定URL的文章或者頁(yè)面中包括兩個(gè)元數(shù)據(jù)url與save_as，例如：

url: pages/url/
save_as: pages/url/index.html

*這個(gè)代碼指定了本篇文章的url為pages/url/index.html

根據(jù)上面很容易推斷如何將一篇文章設(shè)置為網(wǎng)站的主頁(yè)，如下代碼即可實(shí)現(xiàn)將 content/pages/home.md設(shè)為主頁(yè)：

Title: [www.yanyulin.info](http://www.yanyulin.info)
Date: 2014-01-08
URL:
save_as: index.html

*另外還可以通過(guò)template:關(guān)鍵字來(lái)指定要使用的模板。

十五、獨(dú)立域名設(shè)置
詳見(jiàn)：http://www.itdecent.cn/p/252b542b1abf

Godaddy上購(gòu)買專屬域名，用dnspod進(jìn)行動(dòng)態(tài)域名解析，步驟如下:

步驟1：修改Godaddy中的NameServers的兩個(gè)地址為dnspod的DNS地址：

f1g1ns1.dnspod.net
f1g1ns2.dnspod.net

步驟2：在Dnspod中添加一條A記錄，指向Github URL

username.github.io

步驟3：在Pelican主目錄，即上面創(chuàng)建的blog/output/username.github.io目錄，添加CNAME文件，在文件中添加你的獨(dú)立域名。

*注意這里的CNAME建議放在第十二步提到的content目錄下的靜態(tài)子目錄content/extra下，并在配置文件中添加相關(guān)條目。

十六、相關(guān)文章、上下文導(dǎo)航

1.打開(kāi)pelicanconf.py，定義插件目錄和啟用插件：

#加載plugins
PLUGIN_PATH = "plugins"
PLUGINS = ["sitemap","neighbors","related_posts"]
#sitemap
SITEMAP = {
    'format': 'xml',
    'priorities': {
        'articles': 0.7,
        'indexes': 0.8,
        'pages': 0.5
    },
    'changefreqs': {
        'articles': 'monthly',
        'indexes': 'daily',
        'pages': 'monthly'
    }
}
#相關(guān)文章
RELATED_POSTS_MAX = 10

2.鄰居導(dǎo)航，在主題模版中調(diào)用如下代碼，可根據(jù)自己的情況修改：

   <div class="pagination">
      <ul>
      {% if article.prev_article %}
        <li class="prev"><a href="{{ SITEURL }}/{{ article.prev_article.url}}">← Previous</a></li>
        {% else %}
        <li class="prev"><a href="/">← Previous</a></li>
        {% endif %}
        <li><a href="/archives.html">Archive</a></li>
        {% if article.next_article %}
        <li class="next"><a href="{{ SITEURL }}/{{ article.next_article.url}}">Next →</a></li>
        {% else %}
        <li class="next"><a href="/">Next →</a></li>
        {% endif %}
      </ul>
    </div>

3.相關(guān)文章：

{% if article.related_posts %}
    <h4>Related Articles</h4>
    <ul>
    {% for related_post in article.related_posts %}
        <li><a href="{{ SITEURL }}/{{ related_post.url }}">{{ related_post.title }}</a></li>
    {% endfor %}
    </ul>
{% endif %} 

十七、最后，一些比較占空間的資源文件（圖片、媒體等）可以用七牛來(lái)進(jìn)行存儲(chǔ)管理