使用jekyll和Github搭建我的博客

時間 2020-05-20

標籤使用 jekyll github 搭建我的博客欄目 Git 简体版

原文原文鏈接

一．使用jekyll和Github三步搭建我的博客css

在 Github 上建一個庫，庫的名字是xxx.github.com，其中的xxx是你的github的帳號名（圖中標註的不要勾選）

注:若是沒有Github帳號，須要註冊一個，進入Github官網，html

在Jekyll模板中選擇本身喜歡的模板clone到本地（這裏選Bef作實例）

對模板中的信息進行修改(註釋掉_config.yml文件裏：baseurl：「/bef」)，將模板push到本身的庫中，而後訪問xxx.github.io，可訪問到本身的博客，so easy！

注:因爲此模板圖片較多，因此加載較慢，視覺效果仍是不錯的。git

二．So cool發生了什麼？

爲何只是簡單的三步操做，就完成了我的博客的搭建呢？github

搭建網站的總體思路就是:先在本地編寫符合Jekyll規範的網站源碼(在模板基礎上更改)，而後上傳到github，這種上傳並非單純的上傳，而是會通過Jekyll程序的再處理。由github生成並託管整個網站。數據庫

1.Jekyll是什麼？

Jekyll是一個簡單的靜態站點生成器，它會根據網頁源碼生成靜態文件。是兩大靜態博客主流框架（jekyll和hexo）之一。jekyll有不少模板，能夠結合gitHub用來搭建免費的我的博客，jekyll使用Liquid模板語言(官方文檔),是基於ruby的，因此若是在本地使用jekyll必須先搭建jekyll環境，個人建議是沒必要花時間在本地安裝環境，因爲gitHub page已經安裝好環境，因此直接push到gitHub看實際效果更爲明智.瀏覽器

2.Github Pages是什麼？

Github Pages 是Github 面向用戶、組織和項目開放的公共靜態頁面搭建託管服務，容許站內生成網頁，也容許用戶本身編寫網頁，而後上傳。站點能夠被免費託管在 Github 上，能夠選擇使用 Github Pages 默認提供的域名 github.io 或者自定義域名來發布站點。Github Pages 支持自動利用 Jekyll 生成站點，Github Pages能夠被認爲是用戶編寫的、託管在github上的靜態網頁。ruby

3.優劣分析

優點：簡單，免費，文章保存在github上，而且使用git的版本管理功能，不用擔憂文章遺失，能夠在任什麼時候間地點寫文章push到gitHub發佈，並且支持markdown語法，能夠把主要精力放在寫文章上。markdown

劣勢：有必定技術門檻，你必需要懂一點git和網頁開發。它生成的是靜態網頁，添加動態功能必須使用外部服務，例如評論功能。由於沒有用到數據庫，每運行一次都必須遍歷所有的文本文件，網站越大，生成時間越長。因此它不適合大型網站。hexo

可是，總的來講，搭建中小型Blog，特別是我的博客，確實是個很好的選擇。既擁有絕對管理權，又享受github帶來的便利，更主要的是，這一切是免費的，github提供無限流量。框架

三．刨析實例

1.目錄結構

2._config.yml:這個文件特別重要是保存配置的，標題，描述，評論等；基本上博客的全部配置能夠放在這個文件裏。

3._layouts這裏存放的是模板文件，發佈的文章會根據文章頂部的yaml文件頭來設置一些元數據，如"layout:default"，表示該文章的模板使用_layouts目錄下的post.html文件；"title: "，表示該文章的標題，若是不設置這個值，默認使用嵌入文件名的標題等等。4._includes這裏面的就是能夠重複利用的文件。這個文件能夠被其餘的文件包含，重複利用。{% include head.html %}，就是引用head.html。

5._posts這裏的文件就實際的文章內容了。文件名必須使用「年-月-日-文章標題.後綴名」的格式。在博客上發佈文章的時候，只須要在此文件夾中加入帶有 YAML 頭信息的 markdown 文件，而後 push 到 Github，就會被自動渲染成 HTML。

四．給我的博客加評論功能。

第三方的評論系統有不少，這裏選擇gitalk來進行演示，gitalk是純客戶端組件，無 Server 端，使用 Github 登陸，全部評論數據存儲爲 Github Issue。

1.首先須要註冊GitHub Application，Authorization callback URL 填寫當前使用插件頁面的域名。具體見下圖。

2.建立comments.html，內容以下，添加到about頁面（這裏以about頁面爲例，其它頁面相似）

{% if page.comments != false %}

    {% if site.comments_provider == 'gitalk' %}
        <div id="gitalk-container"></div>
        <script src="/assets/js/gitalk.min.js"></script>
        <script>
        var gitalk = new Gitalk({
            id: '{{ page.url }}',
            clientID: '{{ site.gitalk.clientID }}',
            clientSecret: '{{ site.gitalk.clientSecret }}',
            repo: '{{ site.gitalk.repo }}',
            owner: '{{ site.gitalk.owner }}',
            admin: ['{{ site.gitalk.owner }}'],
            labels: ['gitment'],
            perPage: 50,
        })
        gitalk.render('gitalk-container')
        </script>
    {% endif %}
{% endif %}

3.在gitHub上建立倉庫blog-comments，添加以下代碼到_config.yml

注：clientID和clientSecret是第一步註冊的時候獲得的，owner是本身的用戶名

comments_provider: gitalk
# !!!重要!!! 請修改下面這些信息爲你本身申請的
gitalk:
    owner: jueye3
    repo: blog-comments
    clientID: fa5504fe07f319cba9ee
    clientSecret: 30532bea61e8b63dc5a852e448621a8c89cef99b

4.下載gitalk.min.js（放到assets/js文件夾下）和gitalk.css（放到assets/css文件夾下）， push後訪問，效果以下圖

5.使用gitHub帳號登錄初始化，就可使用評論功能了。效果以下圖。