1. 程式人生 > >在Github上搭建一個免費的blog

在Github上搭建一個免費的blog

Github Pages

Github,號稱程式設計師的Facebook。簡單說,它是一個具有版本管理功能的程式碼倉庫,每個專案單獨有一個主頁,裡面列出了專案的原始檔。

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

jekyll是什麼?

jekyll是一個靜態站點生成器,它會根據網頁原始碼生成靜態檔案。它提供了模板、變數、外掛等功能,所以實際上可以用來編寫整個網站。

所以我們的思路是這樣的:先在本地編寫符合jekyll規範的網站原始碼,然後上傳到github,由github生成並託管整個網站。

搭建Blog

第一步 建立專案

在電腦上找到一個合適的位置,開啟Git Bash命令列,建立一個目錄,作為專案的主目錄:

$ mkdir jekyll_demo //建立一個名叫jekyll_demo的目錄

對該目錄進行git初始化:

$ cd jekyll_demo //把jekyll_demo資料夾作為當前位置
$ git init //進行git初始化
然後,建立一個沒有父節點的分支gh-pages。(因為github規定,只有該分支中的頁面,才會生成網頁檔案)
$ git checkout --orphan gh-pages

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

第二步 建立設定檔案

在專案根目錄下,建立一個名為_config.yml的文字檔案,這是設定檔案,在裡面填入以下內容:

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_demo
    |-- _config.yml
    |-- _layouts
    |   |-- default.html
第四步 建立文章

回到專案根目錄,建立一個_posts目錄,用於存放Blog文章:

mkdir _posts
進入該目錄,建立第一篇文章。文章就是普通的文字檔案,檔名假定為2018-06-11-hello world.html。(注意,檔名必須為"年-月-日-文章標題.字尾名"的格式。如果網頁程式碼採用html格式,字尾名為html;如果採用markdown格式,字尾名為md)

在該檔案中,填入以下內容:

---              //每篇文章開頭必須有一個yaml檔案頭,用三根短劃線"---"來標記開始和結束,裡面每一行設定一種元素
layout: default  //該文章的模板使用_layouts目錄下的default.html檔案 
title: 你好,世界 //該文章的標題是"你好,世界"(如果不設定這個值,預設使用嵌入檔名的標題,即"hello world")
---
            

<h2>{{ page.title }}</h2> //{{ page.title }}就是檔案頭中設定的"你好,世界"

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

<p>{{ page.date | date_to_string }}</p> //{{ page.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>

目錄結構變為:

/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上你剛建立的庫裡。

$ git remote add origin https://github.com/RFHzhj/blog.git //"RFHzhj"是我的使用者名稱
$ git push origin gh-pages

上傳成功後,訪問https://RFHzhj.github.io/blog/就可以看到Blog已經生成了。


簡單介紹一下每個目錄和檔案的作用:

檔案 / 目錄 描述
_config.yml 儲存配置資料。很多配置選項都會直接從命令列中進行設定,但是如果你把那些配置寫在這兒,你就不用非要去記住那些命令了。
_drafts drafts 是未釋出的文章。這些檔案的格式中都沒有 title.MARKUP 資料。學習如何使用 drafts.
_includes 你可以載入這些包含部分到你的佈局或者文章中以方便重用。可以用這個標籤 {% include file.ext %} 來把檔案 _includes/file.ext 包含進來。
_layouts layouts 是包裹在文章外部的模板。佈局可以在 YAML 頭資訊中根據不同文章進行選擇。 這將在下一個部分進行介紹。標籤 {{ content }} 可以將content插入頁面中。
_posts 這裡放的就是你的文章了。檔案格式很重要,必須要符合: YEAR-MONTH-DAY-title.MARKUP。 The permalinks 可以在文章中自己定製,但是資料和標記語言都是根據檔名來確定的。
_data 放一些其他配置檔案,必須是.yml或者.yaml格式的,比如有一個檔案叫members.yml,如果想引用這個檔案裡的內容就通過site.data.membres來引用
_site 一旦 Jekyll 完成轉換,就會將生成的頁面放在這裡(預設)。最好將這個目錄放進你的 .gitignore 檔案中。