一.使用jekyll和Github三步搭建個人博客
- 在 Github 上建一個庫,庫的名字是xxx.github.com,其中的xxx是你的github的賬號名(圖中標注的不要勾選)
注:如果沒有Github賬號,需要注冊一個,進入Github官網,
- 在Jekyll模板中選擇自己喜歡的模板clone到本地(這里選Bef做實例)
- 對模板中的信息進行修改(注釋掉_config.yml文件里:baseurl:“/bef”),將模板push到自己的庫中,然后訪問xxx.github.io,可訪問到自己的博客,so easy!
注:由於此模板圖片較多,所以加載較慢,視覺效果還是不錯的。
二.So cool發生了什么?
為什么只是簡單的三步操作,就完成了個人博客的搭建呢?
搭建網站的整體思路就是:先在本地編寫符合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上的靜態網頁。
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。等十分鍾左右,刷新瀏覽器,用你自己域名訪問下試試
結束語
按照本篇文章搭建起個人博客應該不成問題,並且應該不會花費多少時間就能完成,但是要博客個性化,搭建一個自己喜歡的博客,可能就需要下一番功夫了,我建議還是模板上改,先找一個自己喜歡的模板,在改的過程中會有一些自己的想法,慢慢搭建一個自己喜歡的具有個人風格的博客。歡迎大家和我在交流,