前言

我相信，每個程序員都有一個愿望，都想有一個屬于自己的"家"——屬于自己的博客，專屬的網站。在自己的“家”中，可以和志同道合的兄弟一起分享和討論任何技術，談天說地。更重要的是可以當做自己的技術積累，提升自己實力。那么接下來就來說說我博客搭建過程。

目錄：

1. 本地搭建Jekyll
2. 開發或者選擇Jekyll主題
3. 使用Github Pages服務
4. 申請個人域名
5. 給博客增加訪客評論功能
6. 申請"小綠鎖"HTTPS
7. 日后維護

一.本地搭建Kekyll

Jekyll是什么？它是一個簡單靜態博客生成工具，相對于動態博客。

1. 簡單。因為它是不需要數據庫的，通過markdown編寫靜態文件，生成Html頁面，它的優點是提升了頁面的響應速度，并且讓博主可以只專注于寫文章，不用再去考慮如何排版。
2. 靜態。Markdown（或 Textile）、Liquid 和 HTML & CSS 構建可發布的靜態網站。
3. 博客支持。支持自定義地址、博客分類、頁面、文章以及自定義的布局設計。

//使用gem安裝Jekyll
gem install jekyll


//使用Jekyll創建你的博客站點
jekyll new blog  #創建你的站點


//開啟Jekyll服務
//進入blog目錄,記得一定要進入創建的目錄，否則服務無法開啟
cd blog      
jekyll serve     #啟動你的http服務 

本地服務開啟后，Jekyll服務默認端口是4000，所以我打開瀏覽器，輸入：http://localhost:4000 即可訪問

到這里一個簡單的博客頁面就會顯示出來了。

關于jekyll其他一些命令的用法如下:

$ jekyll build
# => 當前文件夾中的內容將會生成到 ./_site 文件夾中。

$ jekyll build --destination <destination>
# => 當前文件夾中的內容將會生成到目標文件夾<destination>中。

$ jekyll build --source <source> --destination <destination>
# => 指定源文件夾<source>中的內容將會生成到目標文件夾<destination>中。

$ jekyll build --watch
# => 當前文件夾中的內容將會生成到 ./_site 文件夾中，
#    查看改變，并且自動再生成。

$ jekyll serve
# => 一個開發服務器將會運行在 http://localhost:4000/
# Auto-regeneration（自動再生成文件）: 開啟。使用 `--no-watch` 來關閉。

$ jekyll serve --detach
# => 功能和`jekyll serve`命令相同，但是會脫離終端在后臺運行。
#    如果你想關閉服務器，可以使用`kill -9 1234`命令，"1234" 是進程號（PID）。
#    如果你找不到進程號，那么就用`ps aux | grep jekyll`命令來查看，然后關閉服務器。[更多](http://unixhelp.ed.ac.uk/shell/jobz5.html).

Jekyll 的核心其實是一個文本轉換引擎。它的概念其實就是：你用你最喜歡的標記語言來寫文章，可以是 Markdown, 也可以是 Textile, 或者就是簡單的 HTML, 然后 Jekyll 就會幫你套入一個或一系列的布局中。在整個過程中你可以設置 URL 路徑，你的文本在布局中的顯示樣式等等。這些都可以通過純文本編輯來實現，最終生成的靜態頁面就是你的成品了。

接下來再說說jeykll的目錄結構：

├── _config.yml             (配置文件)
├── _drafts                 (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-roundup.textile
├── _site               (生成的頁面都會生成在這個目錄下)
├── .jekyll-metadata      (該文件幫助 Jekyll 跟蹤哪些文件從上次建立站點開始到現在沒有被修改，哪些文件需要在下一次站點建立時重新生成。該文件不會被包含在生成的站點中。)
└── index.html         (網站的index)

二.開發或者選擇Jekyll主題

再來說說博客的外觀，這可能是很多人很看重的，一個高逼格的博客里面看文章也是一種享受。這里就需要自定義主題了。你可以選擇自己開發一套，也可以直接選擇已有的，然后自己再更改css布局形成自己的。jekyll主題在這里，你可以選擇到你自己喜歡的主題。下載下來，改改css，或者借用一下，就會有很漂亮的blog就出爐了。

三.使用Github Pages服務

1.創建我們自己的倉庫

以下用usename代替自己的用戶名

2.配置我們的倉庫

在Settings里面找到Github Pages

選擇Launch automatic page generator

接下來的界面就直接選擇Continue to layouts

到了這個界面就隨便選擇一個模板，點擊Publish Page即可

接下來我們要做的就是把我們的Jekyll生成的blog部署到Github Pages上去即可

3.部署blog

我們先把剛剛新建的倉庫git clone到本地，然后cd 到倉庫的目錄下，執行jekyll serve -B

cd username.github.com
jekyll serve -B

注意，啟動前確保其他目錄下沒有jekyll服務，可以ps aux|grep jekyll
查看進程,有的話,用kill -9 進程號 殺掉其他進程。

現在我們打開http://localhost:4000,即可看見我們在Github上創建的主頁，理論上和https://username.com/username.github.io/ 訪問的應該是一模一樣的。

接著我們把我們自己做好的blog目錄整個都拷貝到這個倉庫文件夾中，當然，這個倉庫之前的文件可以刪除了，只留下README即可。把整個文件都push到github上去

git add --all                          #添加到暫存區 
git commit -m "提交jekyll默認頁面"       #提交到本地倉庫
git push origin master                 #線上的站點是部署在master下面的

注意，在提交前，請確保_config.yml文件里面下面是這樣配置的，因為這個是Github Pages的規定，如果選擇了其他的模式，會立即收到編譯警告的郵件提醒的。

highlighter: rouge
markdown: kramdown

等待大概1-2分鐘之后，再次刷新username.github.io，就能看到我們的blog了。

四.申請個人域名

現在很多地方都支持個性化域名，比如新浪微博，就可以自己申請一個個性域名，那么以后只要訪問weibo.com/你的名字，這個網址就可以直達你的主頁。同理，我們也希望有一個名字直達我們的博客首頁，那么我們就需要先買一個域名。一般國內用的比較多的應該就是萬網，國外的就是Go Daddy。選擇一個你喜歡的用戶名，如果沒有人先買下那個域名，那就可以恭喜你了，可以去買下來了。

買好域名以后，就是配置的問題了。

1. 我們要綁定的話需要在username.github.com目錄下增加一個CNAME文件。 在里面添加你的域名，假設為example.com，然后推送CNAME文件到遠程倉庫:

git add CNAME
git push origin master

2. 到域名服務商增加你的CNAME記錄。 添加兩條記錄，@和www的主機記錄，記錄類型為CNAME類型，CNAME表示別名記錄，該記錄可以將多個名字映射到同一臺計算機。 記錄值請寫username.github.io.,值得注意的是io
   后面還有一個圓點，切記。

如果是國內的域名，解析會很快，一般10分鐘之內就能解析完成。我們就可以直接通過訪問我們買的個性域名訪問到我們的博客了。

五.給博客增加訪客評論功能

一般靜態博客添加訪客評論功能都是用disqus來集成的。一般都是放在博客的一篇文章的最后，當然這個排版就看你自己怎么設計的了。我這里就貼一下我集成disqus的代碼。大家估計都類似。

<section class="post-comments">
  {% if site.comment.disqus %}
    <div id="disqus_thread"></div>
    <script>
    
    var disqus_config = function () {
        this.page.url = "{{ page.url | prepend: site.baseurl | prepend: site.url }}";
        this.page.identifier = "{{ page.url }}";
    };

    var disqus_shortname = '{{ site.comment.disqus }}';
    
    (function() { // DON'T EDIT BELOW THIS LINE
        var d = document, s = d.createElement('script');
        s.src = '//' + disqus_shortname + '.disqus.com/embed.js';
        s.setAttribute('data-timestamp', +new Date());
            (d.head || d.body).appendChild(s);
        })();
    </script>
    <noscript>要查看<a > Disqus </a>評論，請啟用 JavaScript</noscript>
    
  {% elsif site.comment.duoshuo %}
    <div class="ds-thread" data-thread-key="{{ page.url }}" data-title="{{ page.title }}" data-url="{{ page.url | prepend: site.baseurl | prepend: site.url }}"></div>
    <script type="text/javascript">
        var duoshuoQuery = {short_name:"{{ site.comment.duoshuo }}"};
        (function() {
            var ds = document.createElement('script');
            ds.type = 'text/javascript';ds.async = true;
            ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js';
            ds.charset = 'UTF-8';
            (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(ds);
        })();
    </script>
  {% endif %}
  
  
  
</section>

六.申請"小綠鎖"HTTPS

要想使用HTTPS開頭，目前就2種做法，一是申請HTTPS證書，免費的就用Let’s Encrypt 提供的免費 SSL 證書，二是使用kloudsec提供的服務。申請SSL證書的做法我就不說了，我來說說第二種使用kloudsec提供的服務的做法。

實現原理
看 Kloudsec 的文檔里描述的 HOW DOES IT WORK?，它提供的服務處于我們的網站服務器和我們的網站訪問者之間，其原理是緩存了我們服務器上的頁面，所以實際用戶建立的 HTTPS 連接是用戶的瀏覽器與 Kloudsec 之間的。

首先注冊Kloudsec的賬戶，填寫郵箱和密碼，接下來會讓你填寫倉庫的地址和域名，它會檢測倉庫是否存在。然后最后是激活 Kloudsec 賬號并登錄。

然后最關鍵的一步來了，就是要設置域名解析規則。

按照上面給的，要設置3個A的解析規則。設置完成之后點擊Verify DNS records，如果通過，那么就可以接下來的設置了。

這里會有一些免費和付費的服務，大家看自己需要選取。

這里的SSL Encryption要選上，打開會有如下的設置。

這里如果不上傳自己的SSL，就會用它幫你生成免費的SSL證書。如果要用自己的，點擊ADD CUSTOM CERT按鈕上傳SSL證書。

這里是一些插件。看自己需不需要。

最后，SETTING里面加上這個IP地址。這個IP是GitHub Pages 的可用 IP地址。

使用 Kloudsec 的好處

1. 擺脫了證書不可信存在安全風險的不友好提示。
2. 配置方便，一勞永逸。
3. 訪問速度并未受影響
4. 小綠鎖看著舒心

后來又發現了第三種方法能用HTTPS訪問博客的方法：
使用 GitLab 提供的 Pages 服務，那它直接支持添加自定義域名的 SSL 證書，可以配合免費申請的 SSL 證書一起使用。詳情可見 零成本打造安全博客的簡單辦法。

七.日后維護

至此，個人博客也綁定好域名成功上線了。以后的維護工作其實并沒有多少。

1. 本地編輯文章：

用markdown工具，先寫好博文，注意，每篇博文前面題頭都要帶下面這些格式。

---
layout: post
title: 如何快速給自己搭建一個溫馨的"家"——用Jekyll生成靜態博客
author: 一縷殤流化隱半邊冰霜
date: 2016.06.21 01:57:32 +0800
categories: Blog
tag: Blog
---

文章寫完之后，通過jekyll build生成頁面，jekyll serve -B 通過本地localhost:4000查看文章。

2. 發布線上博客

本地確認文章無誤，可以通過git add,git commit,git push
等git命令推送文章到Github Pages服務器就可以啦。過1，2分鐘，訪問自己的域名就可以看到新的博文啦！

結尾

關于靜態博客的搭建就到這里了，如果大家還有什么不清楚了，請直接給我留言就好。靜態博客還有一個hexo，也是很優秀的靜態博客，如果大家有興趣，想折騰的，也可以去試試它。唐巧就是用這個搭建博客的。當然也有動態博客，ghost搭建的，搭建動態博客就需要自己買一個服務器，然后去安裝node.js環境，日后的維護也都需要自己一個人去完成。有興趣的同學一樣可以去試試！