如何快速給自己構建一個溫馨的”家”——用Jekyll搭建靜態部落格

一縷殤流化隱半邊冰霜發表於2019-02-23

前言

我相信，每個程式設計師都有一個願望，都想有一個屬於自己的”家”——屬於自己的部落格，專屬的網站。在自己的“家”中，可以和志同道合的兄弟一起分享和討論任何技術，談天說地。更重要的是可以當做自己的技術積累，提升自己實力。那麼接下來就來說說我部落格搭建過程。

目錄：

  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環境，日後的維護也都需要自己一個人去完成。有興趣的同學一樣可以去試試！

相關文章