Question to say "I can!"

搭建一個免費的,無限流量的Blog

2012-08-29

這是個很折衷的辦法,把維護脫離出來,自己只關注內容。

參考于:阮一峰——搭建一個免費的,無限流量的Blog----github Pages和Jekyll入門

 

喜歡寫Blog的人,會經歷三個階段。

  第一階段,剛接觸Blog,覺得很新鮮,試著選擇一個免費空間來寫。

第二階段,發現免費空間限制太多,就自己購買域名和空間,搭建獨立博客。

第三階段,覺得獨立博客的管理太麻煩,最好在保留控制權的前提下,讓別人來管,自己只負責寫文章。

大多數Blog作者,都停留在第一和第二階段,因為第三階段不太容易到達:你很難找到俯首聽命、愿意為你管理服務器的人。

但是兩年前,情況出現變化,一些程序員開始在github網站上搭建blog。他們既擁有絕對管理權,又享受github帶來的便利----不管何時何地,只要向主機提交commit,就能發布新文章。更妙的是,這一切還是免費的,github提供無限流量,世界各地都有理想的訪問速度。

今天,我就來示范如何在github上搭建Blog,你可以從中掌握github的Pages功能,以及Jekyll軟件的基本用法。更重要的是,你會體會到一種建立網站的全新思路。

一、Github Pages 是什么?

如果你對編程有所了解,就一定聽說過github。它號稱程序員的Facebook,有著極高的人氣,許多重要的項目都托管在上面。

簡單說,它是一個具有版本管理功能的代碼倉庫,每個項目都有一個主頁,列出項目的源文件。

但是對于一個新手來說,看到一大堆源碼,只會讓人頭暈腦漲,不知何處入手。他希望看到的是,一個簡明易懂的網頁,說明每一步應該怎么做。因此,github就設計了Pages功能,允許用戶自定義項目首頁,用來替代默認的源碼列表。所以,github Pages可以被認為是用戶編寫的、托管在github上的靜態網頁。

github提供模板,允許站內生成網頁,但也允許用戶自己編寫網頁,然后上傳。有意思的是,這種上傳并不是單純的上傳,而是會經過Jekyll程序的再處理。

二、Jekyll是什么?

Jekyll(發音/'d?i?k ?l/,"杰克爾")是一個靜態站點生成器,它會根據網頁源碼生成靜態文件。它提供了模板、變量、插件等功能,所以實際上可以用來編寫整個網站。

整個思路到這里就很明顯了。你先在本地編寫符合Jekyll規范的網站源碼,然后上傳到github,由github生成并托管整個網站。

這種做法的好處是:

  * 免費,無限流量。

* 享受git的版本管理功能,不用擔心文章遺失。

* 你只要用自己喜歡的編輯器寫文章就可以了,其他事情一概不用操心,都由github處理。

它的缺點是:

  * 有一定技術門檻,你必須要懂一點git和網頁開發。

* 它生成的是靜態網頁,添加動態功能必須使用外部服務,比如評論功能就只能用disqus

* 它不適合大型網站,因為沒有用到數據庫,每運行一次都必須遍歷全部的文本文件,網站越大,生成時間越長。

但是,綜合來看,它不失為搭建中小型Blog或項目主頁的最佳選項之一。

三、一個實例

下面,我舉一個實例,演示如何在github上搭建blog,你可以跟著一步步做。為了便于理解,這個blog只有最基本的功能。

在搭建之前,你必須已經安裝了git,并且有github賬戶。

第一步,創建項目。

在你的電腦上,建立一個目錄,作為項目的主目錄。我們假定,它的名稱為jekyll_demo。

  $ mkdir jekyll_demo

對該目錄進行git初始化。

  $ cd jekyll_demo

$ git init

然后,創建一個沒有父節點的分支gh-pages。因為github規定,只有該分支中的頁面,才會生成網頁文件。

  $ git checkout --orphan gh-pages

以下所有動作,都在該分支下完成。

第二步,創建設置文件。

在項目根目錄下,建立一個名為_config.yml的文本文件。它是jekyll的設置文件,我們在里面填入如下內容,其他設置都可以用默認選項,具體解釋參見官方網頁

  baseurl: /jekyll_demo

目錄結構變成:

  /jekyll_demo
|-- _config.yml

第三步,創建模板文件。

在項目根目錄下,創建一個_layouts目錄,用于存放模板文件。

  $ mkdir _layouts

進入該目錄,創建一個default.html文件,作為Blog的默認模板。并在該文件中填入以下內容。

  <!DOCTYPE html>

<html>

<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<title>{{ page.title }}</title>

</head>

<body>

{{ content }}

</body>

</html>

Jekyll使用Liquid模板語言,{{ page.title }}表示文章標題,{{ content }}表示文章內容,更多模板變量請參考官方文檔

目錄結構變成:

  /jekyll_demo
|-- _config.yml
|-- _layouts
|   |-- default.html

第四步,創建文章。

回到項目根目錄,創建一個_posts目錄,用于存放blog文章。

  $ mkdir _posts

進入該目錄,創建第一篇文章。文章就是普通的文本文件,文件名假定為2012-08-25-hello-world.html。(注意,文件名必須為"年-月-日-文章標題.后綴名"的格式。如果網頁代碼采用html格式,后綴名為html;如果采用markdown格式,后綴名為md。)

在該文件中,填入以下內容:

  ---
layout: default
title: 你好,世界
---

<h2>{{ page.title }}</h2>

<p>我的第一篇文章</p>

<p>{{ page.date | date_to_string }}</p>

每篇文章的頭部,必須有一個yaml文件頭, 用來設置一些元數據。它用三根短劃線"---",標記開始和結束,里面每一行設置一種元數據。"layout:default",表示該文章的模板使用 _layouts目錄下的default.html文件;"title: 你好,世界",表示該文章的標題是"你好,世界",如果不設置這個值,默認使用嵌入文件名的標題,即"hello world"。

在yaml文件頭后面,就是文章的正式內容,里面可以使用模板變量。{{ page.title }}就是文件頭中設置的"你好,世界",{{ page.date }}則是嵌入文件名的日期(也可以在文件頭重新定義date變量),"| date_to_string"表示將page.date變量轉化成人類可讀的格式。

目錄結構變成:

  /jekyll_demo
|-- _config.yml
|-- _layouts
|   |-- default.html
|-- _posts
|   |-- 2012-08-25-hello-world.html

第五步,創建首頁。

有了文章以后,還需要有一個首頁。

回到根目錄,創建一個index.html文件,填入以下內容。

  ---
layout: default
title: 我的Blog
---

<h2>{{ page.title }}</h2>

<p>最新文章</p>

<ul>

{% for post in site.posts %}

<li>{{ post.date | date_to_string }} <a href="{{ site.baseurl }}{{ post.url }}">{{ post.title }}</a></li>

{% endfor %}

</ul>

它的Yaml文件頭表示,首頁使用default模板,標題為"我的Blog"。然后,首頁使用了{% for post in site.posts %},表示對所有帖子進行一個遍歷。這里要注意的是,Liquid模板語言規定,輸出內容使用兩層大括號,單純的命令使用一層大括號。至于 {{site.baseurl}}就是_config.yml中設置的baseurl變量。

目錄結構變成:

  /jekyll_demo
|-- _config.yml
|-- _layouts
|   |-- default.html
|-- _posts
|   |-- 2012-08-25-hello-world.html
|-- index.html

第六步,發布內容。

現在,這個簡單的Blog就可以發布了。先把所有內容加入本地git庫。

  $ git add .

$ git commit -m "first post"

然后,前往github的網站,在網站上創建一個名為jekyll_demo的庫。接著,再將本地內容推送到github上你剛創建的庫。注意,下面命令中的username,要替換成你的username。

  $ git remote add origin https://github.com/username/jekyll_demo.git

$ git push origin gh-pages

上傳成功之后,等10分鐘左右,訪問http://username.github.com/jekyll_demo/就可以看到Blog已經生成了(將username換成你的用戶名)。

首頁:

文章頁面:

第七步,綁定域名。

如果你不想用http://username.github.com/jekyll_demo/這個域名,可以換成自己的域名。

具體方法是在repo的根目錄下面,新建一個名為CNAME的文本文件,里面寫入你要綁定的域名,比如example.com或者xxx.example.com。

如果綁定的是頂級域名,則DNS要新建一條A記錄,指向204.232.175.78。如果綁定的是二級域名,則DNS要新建一條CNAME記錄, 指向username.github.com(請將username換成你的用戶名)。此外,別忘了將_config.yml文件中的baseurl改成 根目錄"/"。

至此,最簡單的Blog就算搭建完成了。進一步的完善,請參考Jekyll創始人的示例庫,以及其他用Jekyll搭建的blog

(完)

作者:admin | Categories:互聯網問題 | Tags:

2條評論

  1. 互聯網寶藏說道:

    看到一個實例下面那些代碼就開始懵了

  2. 常陽小站說道:

    哇~看起來好復雜~~~

發表評論

電子郵件地址不會被公開。 必填項已用*標注

*

澳洲f1赛车b盘开奖套路 3d图库字谜 怎样通过理财让钱生钱 南昌麻将口诀 山西11选5开奖结 山西11选5开奖时 天海翼在线电影无码 波克城市麻将外挂 快乐双彩 江苏十一选五今天开 欢乐全民麻将最新手机版 原千岁手机版在播放 股票融资融券是什么意思 甘肃十一选五前三 76人老烩面 西北轴承股吧 河北十一选五最高遗