如何快速給自己構建一個溫馨的”家”——用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環境,日後的維護也都需要自己一個人去完成。有興趣的同學一樣可以去試試!

相關文章