使用jekyll和Github搭建個人博客


一.使用jekyllGithub三步搭建個人博客

  1. Github 上建一個庫,庫的名字是xxx.github.com,其中的xxx是你的github的賬號名(圖中標注的不要勾選)

:如果沒有Github賬號,需要注冊一個,進入Github官網

 

  1. 在Jekyll模板中選擇自己喜歡的模板clone到本地(這里選Bef做實例)

 

  1. 對模板中的信息進行修改(注釋掉_config.yml文件里:baseurl:“/bef”),將模板push到自己的庫中,然后訪問xxx.github.io,可訪問到自己的博客,so easy!

:由於此模板圖片較多,所以加載較慢,視覺效果還是不錯的。

 

二.So cool發生了什么?

為什么只是簡單的三步操作,就完成了個人博客的搭建呢?

搭建網站的整體思路就是:先在本地編寫符合Jekyll規范的網站源碼(在模板基礎上更改),然后上傳到github,這種上傳並不是單純的上傳,而是會經過Jekyll程序的再處理。由github生成並托管整個網站。

1.Jekyll是什么?

Jekyll是一個簡單的靜態站點生成器,它會根據網頁源碼生成靜態文件。是兩大靜態博客主流框架(jekyllhexo)之一。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上的靜態網頁。

3.優劣分析

優勢:簡單,免費,文章保存在github上,並且使用git的版本管理功能,不用擔心文章遺失,可以在任何時間地點寫文章push到gitHub發布,而且支持markdown語法,可以把主要精力放在寫文章上。

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

但是,總的來說,搭建中小型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賬號登陸初始化,就可以使用評論功能了。效果如下圖。

 

五.給個人博客加統計功能

相信很多人對自己的博客訪問量還是很感興趣的,好的關注度和大的訪問量能給自己寫博客很大信心,下面我就介紹一下如何給自己的博哥添加統計功能(以百度統計為例)

1.在百度統計上注冊賬號並登陸,然后新增網站

2._includes下創建baidu-anaylysis.html,內容是百度統計生成的代碼,

3.head.html文件中添加{% include  baidu-anaylysis.html %},Push后可以檢查是否成功。

4.代碼正確安裝,可以查看報告了

 

六.給個人博客綁定域名

首先需要有域名,如果沒有域名,可以通過很多渠道注冊域名,有了域名之后,新建一個CNAME文件(無后綴名),然后用文本編輯器打開,在首行添加你的網站域名,如http://xxxx.com,注意前面沒有http://example.com或者xxx.example.com。

 

在域名解析提供商,下面以百度雲為例。
1)先添加一個CNAME,主機記錄寫@,后面記錄值寫上你的http://xxxx.github.io


2)再添加一個CNAME,主機記錄寫www,后面記錄值也是http://xxxx.github.io


這樣別人用www和不用www都能訪問你的網站(其實www的方式,會先解析成http://xxxx.github.io,然后根據CNAME再變成http://xxx.com,中間是經過一次轉換的)。

:上面,我們用的是CNAME別名記錄,也有人使用A記錄,后面的記錄值是寫github page里面的ip地址,但有時候IP地址會更改,導致最后解析不正確,所以還是推薦用CNAME別名記錄要好些,不建議用IP。等十分鍾左右,刷新瀏覽器,用你自己域名訪問下試試

 

結束語

按照本篇文章搭建起個人博客應該不成問題,並且應該不會花費多少時間就能完成,但是要博客個性化,搭建一個自己喜歡的博客,可能就需要下一番功夫了,我建議還是模板上改,先找一個自己喜歡的模板,在改的過程中會有一些自己的想法,慢慢搭建一個自己喜歡的具有個人風格的博客。歡迎大家和我在交流,


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM