如何快速給本身構建一個舒適的"家"——用Jekyll搭建靜態博客

前言

我相信，每一個程序員都有一個願望，都想有一個屬於本身的"家"——屬於本身的博客，專屬的網站。在本身的「家」中，能夠和志同道合的兄弟一塊兒分享和討論任何技術，談天說地。更重要的是能夠當作本身的技術積累，提高本身實力。那麼接下來就來講說我博客搭建過程。

目錄：

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便可

這裏就生成了一個靜態網頁了，直接訪問剛剛的設置的地址https://halfrost.com/username.github.io/，這個地址，就能夠訪問到了。

接下來咱們要作的就是把咱們的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上建立的主頁，理論上和username.com/username.gi… 訪問的應該是如出一轍的。

接着咱們把咱們本身作好的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 後面還有一個圓點，切記。

注意，當添加@的記錄的時候，極可能會提示衝突了，和MX那條衝突了，這裏我就直接刪除了MX的@規則。想知道緣由，其實能夠看這個連接，cn.v2ex.com/t/204489 。結論仍是本身刪除MX的@吧。

若是是國內的域名，解析會很快，通常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 href="http://disqus.com/?ref_noscript"> 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環境，往後的維護也都須要本身一我的去完成。有興趣的同窗同樣能夠去試試！