Github Pages + jekyll 全面介紹極簡搭建個人網(wǎng)站和博客

時間：2023-05-30 04:15:01 | 來源：網(wǎng)站運(yùn)營

時間：2023-05-30 04:15:01 來源：網(wǎng)站運(yùn)營

Github Pages + jekyll 全面介紹極簡搭建個人網(wǎng)站和博客：本文，將會全面介紹一下如何使用Github Pages + jekyll搭建個人站點(diǎn)。所謂極簡的意思，就是不用使用git和本地構(gòu)建jekll服務(wù)，直接在Github網(wǎng)站上編輯設(shè)置即可，但會涉及到j(luò)ekll的一些配置和編程控制。

可以參看我的網(wǎng)站模板：https://scottcgi.github.io 使用了github內(nèi)置的主題修改而成。

主題目錄如下：

• 第一步，建立Github倉庫
• 第二步，設(shè)置倉庫開啟Github Pages
• 第三步，使用Github內(nèi)置主題
• 第四步，jekyll的目錄結(jié)構(gòu)
• 第五步，jekyll的模板編程語言Liquid的使用
• 第六步，使用_config.yml文件設(shè)置jekyll
• 第七步，_layouts模板配置
• 第八步，md和html頁面編寫
• 第九步，博客文章編寫和管理
• 第十步，Github Pages的限制
• 結(jié)語

第一步，建立Github倉庫

首先到這里Github，創(chuàng)建一個倉庫。




倉庫名稱有固定的格式： username.github.io，其中username必須是Github賬戶的用戶名（我的是scottcgi），http://github.io是固定的，這個地址將會成為個人站點(diǎn)的網(wǎng)站地址。另外，我們可以勾選Initialize this repository with a README，讓倉庫自動創(chuàng)建一個README.md文件，我們用它來做站點(diǎn)的首頁（當(dāng)然也可以不創(chuàng)建，后面自行創(chuàng)建，或是建立index.html也行）。

注意： username如果不是Github賬戶名，這個倉庫就會成為username.github.io的子站點(diǎn)，比如訪問地址會是：username.github.io/aaa.github.io?？梢?，username.github.io是Github默認(rèn)分配給你的域名，同名倉庫即代表著默認(rèn)網(wǎng)站內(nèi)容。而username.github.io/倉庫名稱，是用來訪問你的其它倉庫的地址。

第二步，設(shè)置倉庫開啟Github Pages

進(jìn)入倉庫設(shè)置界面，如圖。

這里能夠重新修改倉庫的名稱，比如這個倉庫內(nèi)容是fork別人的，就可以在這里修改成自己的username.github.io名稱。

在Setting頁面下有Github Pages的設(shè)置選項(xiàng)。綠色表示部署成功，每次修改倉庫內(nèi)容，都會出發(fā)Github jekyll重新編譯部署，需要1-2分鐘的時間，更新才能體現(xiàn)。如果有編譯錯誤，包括js，css，html，markdown語法問題，都會顯示紅色以及錯誤頁面和行號，同時會發(fā)郵件通知。其中，Source有以下幾個選項(xiàng)：

• gh-pages branch 是項(xiàng)目新建一個分支命名為這個，使用這個分支來做站點(diǎn)內(nèi)容。
• master branch 是使用主分支也是默認(rèn)的，來作為站點(diǎn)內(nèi)容。
• master branch/docs folder 是使用主分支的docs文件夾來作為站點(diǎn)內(nèi)容。
• None 就是禁用Github Pages。

如果是username.github.io只能使用主分支，其它倉庫項(xiàng)目可以選擇其它兩個。接下來Choose a theme是Github提供的內(nèi)置的網(wǎng)站主題，選擇即可應(yīng)用無需其它設(shè)置。Custom domain是自定義域名，本文暫不討論。

第三步，使用Github內(nèi)置主題

選擇好主題，過一會刷新網(wǎng)站地址就已經(jīng)能看到效果了，而在Code頁面僅有兩個文件。


編輯README.md文件的內(nèi)容，就會默認(rèn)顯示在網(wǎng)站首頁，_config.yml 是jekyll的全局配置文件，現(xiàn)在里面只有一句話，theme: jekyll-theme-modernist。我們可以手動修改這個theme主題配置，網(wǎng)站就會應(yīng)用不同的主題。

Github內(nèi)置支持的幾個主題，官方的倉庫在這里：https://pages.github.com/themes，每個README.md里都有介紹如何設(shè)置。

那么我們現(xiàn)在就有兩種方法來使用這些主題：

• 第一種，就是直接fork一個主題倉庫，然后修改倉庫名稱為我們自己的，然后修改我們需要的部分。

• 第二種，只是簡單的Choose (Change) theme（或在_config.yml設(shè)置theme），然后我們對照著官方倉庫的主題目錄，需要改什么文件就按照同樣的路徑拷貝單獨(dú)一個文件到自己的倉庫來修改（保持路徑一致），這樣就可以保持自己倉庫的簡潔。（如果使用了github內(nèi)置的主題，github就會把你倉庫的內(nèi)容和內(nèi)置主題內(nèi)容合并到一起編譯成靜態(tài)網(wǎng)頁。）

另外，更多主題可以參看這兩個地址（不要挑花眼了）： jekyll themes 和 jekyll wiki site。

第四步，jekyll的目錄結(jié)構(gòu)

我們只需要關(guān)注幾個核心的目錄結(jié)構(gòu)如下（可以自己創(chuàng)建）：

• _layouts （存放頁面模板，md或html文件的內(nèi)容會填充模板）
• _sass（存放樣式表）
• _includes （可以復(fù)用在其它頁面被include的html頁面）
• _posts（博客文章頁面）
• assets（原生的資源文件）
• js
• css
• image
• _config.yml （全局配置文件）
• index.html, index.md, README.md （首頁index.html優(yōu)先級最高，如果沒有index，默認(rèn)啟用README.md文件）
• 自定義文件和目錄

更多更詳細(xì)的目錄結(jié)構(gòu)參看jekyll官網(wǎng)：https://jekyllrb.com/docs/structure

第五步，jekyll的模板編程語言Liquid的使用

• 變量 {{ variable }} 被嵌入在頁面中，會在靜態(tài)頁面生成的時候被替換成具體的數(shù)值。常用的全局變量對象有：site 和 page。這兩個對象有很多默認(rèn)自帶的屬性，比如：{{ site.time }}，{{ page.url }}。更多的默認(rèn)值參看：https://jekyllrb.com/docs/variables。
• site對象對應(yīng)的就是網(wǎng)站范圍，自定義變量放在_config.yml中，比如title:自定義標(biāo)題使用{{ site.title }}訪問。
• page對象對應(yīng)的是單個頁面，自定義變量放在每個頁面的最開頭，比如：

---myNum:100 myStr:我是字符串---使用{{ page.myNum }} 和 {{ page.myStr }} 訪問。

• 條件判斷語句，更多詳見：https://shopify.github.io/liquid/tags/control-flow

{% if site.title == 'Awesome Shoes' %} These shoes are awesome! {% endif %} {% if site.name == 'kevin' %} Hey Kevin! {% elsif site.name == 'anonymous' %} Hey Anonymous! {% else %} Hi Stranger! {% endif %}

• 循環(huán)迭代，更多詳見：https://shopify.github.io/liquid/tags/iteration

{% for product in collection.products %} {{ product.title }} {% endfor %}

• 默認(rèn)函數(shù)，可以對變量進(jìn)行一些處理，比如大小寫轉(zhuǎn)化、數(shù)學(xué)運(yùn)算、格式化、排序等等，在Liquid中叫做Filters。比如{{ "Hello World!" | downcase }}轉(zhuǎn)換字符串為小寫。更多內(nèi)置函數(shù)詳見：https://jekyllrb.com/docs/liquid/filters

第六步，使用_config.yml文件設(shè)置jekyll

如果不是fork別人的倉庫，就需要自己創(chuàng)建一個這個文件。然后，我們就可以配置一些默認(rèn)的屬性來控制jekyll的編譯過程。更多詳細(xì)的內(nèi)置屬性詳見：https://jekyllrb.com/docs/configuration/default

同時我們可以自定變量，會自動綁定到site對象上，比如我們可以把導(dǎo)航配置到_config.yml中：

nav:- name: Home link: /- name: About link: /about.html// 以下嵌入頁面，page.url以 "/" 開頭<nav> {% for item in site.nav %} <a href="{{ item.link }}" {% if page.url == item.link %} style="color: red;" {% endif %} > {{ item.name }} </a> {% endfor %}</nav>當(dāng)然，我們也可以把一些數(shù)據(jù)單獨(dú)放入一個yml文件，然后放在固定的數(shù)據(jù)文件夾_data下，比如_data/navigation.yml，這樣訪問這個文件的數(shù)據(jù)對象就是site.data.navigation。

第七步，_layouts模板配置

_layouts文件夾存放的是頁面模板，默認(rèn)需要一個default.html，什么意思？就是說，layout提供一個頁面的布局框架，這是固定的模式，包括樣式、結(jié)構(gòu)、布局、腳本控制等等。然后，我們在用其它md或html文件去動態(tài)填充這個框架，這樣就形成了一個完整的頁面。比如我的default.html頁面如下：

<!doctype html><html lang="{{ page.lang | default: site.lang }}"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> {% seo %} <link rel="icon" href="https://avatars0.githubusercontent.com/u/1797320" type="image/x-icon" title="scottcgi"> <link rel="stylesheet" href="{{ '/assets/css/style.css?v=' | append: site.github.build_revision | relative_url }}"> <script src="{{ '/assets/js/scale.fix.js' | relative_url }}"></script> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> </head> <body> <div class="wrapper"> <header {% unless site.description or site.github.project_tagline %} class="without-description" {% endunless %}> <h1>{{ site.title | default: site.github.repository_name }}</h1> <p>{{ page.description | default: site.description }}</p> <ul> {% for item in site.nav %} {% if page.url == item.link %} <li style="background-color:#069"> <a href="{{ item.link }}"> <strong>{{ item.name }}</strong> </a> </li> {% else %} <li><a href="{{ item.link }}">{{ item.name }}</a></li> {% endif %} {% endfor %} </ul> </header> <section> {{ content }} </section> </div> <footer> <p>{{ site.copyright | default: "copyright not found in _config.yml" }}</p> </footer> </body></html>

• {% seo %} 是jekyll的一個插件提供的seo優(yōu)化，詳情在這里：https://github.com/jekyll/jekyll-seo-tag
• 核心在于 {{ content }} 這個變量是內(nèi)置的，會用我們的md或html頁面填充這部分內(nèi)容。
• 其它的，我們看到會大量使用變量和流程控制代碼，來填充模板的方方面面。
• 于是，填充模板的內(nèi)容，一方面是來自讀取配置文件的變量，一方面是來自_includes的頁面，還有就是來自 {{ content }} 對應(yīng)的頁面。

當(dāng)然，我們也可以不使用 {{ content }} 來填充模板，而是使用_includes的頁面來代替{{ content }} ，但這樣不夠靈活，因?yàn)槭褂?{{ content }}，我們可以在每個頁面單獨(dú)設(shè)置對應(yīng)的layout模板。

第八步，md和html頁面編寫

站點(diǎn)內(nèi)容頁面，可以使用markdown或html來編寫，但markdown編寫的md文件，在瀏覽器地址訪問的時候依然使用html文件后綴。推薦使用markdown來書寫內(nèi)容，語法參見：Github md 示例和 Github md 教程。比如下面這個About.md頁面：

---layout: defaulttitle: About---# About pageThis page tells you a little bit about me.layout: default 就是告訴jekyll這個頁面使用哪個模板，即這個頁面會放入哪個模板的{{ content }}。當(dāng)然，我們可以在_layouts文件夾下提供多個不同的模板，然后根據(jù)需要不同的頁面使用不同的layout。

頁面可以放在任意位置和目錄，訪問的時候從站點(diǎn)域名開始，帶上目錄名稱，再次注意需要使用html結(jié)尾。如果想要自定義瀏覽器的訪問路徑，可以參看詳細(xì)設(shè)置：permalinks。

md和html頁面的區(qū)別：

• md有自己的語法，可以使用少量的html標(biāo)簽，最終會編譯成html，側(cè)重于內(nèi)容編寫。
• html可以隨意使用html標(biāo)簽，可以使用liquid模板語言，側(cè)重于頁面模板和功能控制。

至此，我們就可以在github上，新建md文件然后編輯提交，等待幾分鐘編譯生成之后，就可以在瀏覽器里看到頁面內(nèi)容了。

第九步，博客文章編寫和管理

我們自然可以新建目錄，提交文章，然后添加一個文章列表頁面。但我們也可以把這些交給jekyll的內(nèi)置機(jī)制來完成，因?yàn)樗峁┝艘恍┓奖愕膬?nèi)置文章管理功能。

_posts文件夾是內(nèi)置的放置文章的目錄，我們可以將固定格式y(tǒng)ear-moth-day-name.md名稱的md文件放到這里。比如新建一篇md的博客文章放到_posts目錄下：

---layout: post--- 這是一篇博客文章。

• 接下來我們需要添加一個post的模板頁面到_layouts文件夾下面。

---layout: default---<h1>{{ page.title }}</h1><p>{{ page.date | date_to_string }} - {{ page.author }}</p>{{ content }}可見，模板頁面本身也可以使用模板，這里post使用了default模板，而這里{{ content }} 就會填充_posts下面編寫的頁面（如果頁面使用了layout: post模板）。

• 最后，我們還需要編寫一個博客文章列表的頁面，用來展示所有的文章。比如在根目錄新建blog.html頁面：

---layout: defaulttitle: Blog---<h1>Latest Posts</h1><ul> {% for post in site.posts %} <li> <h2><a href="{{ post.url }}">{{ post.title }}</a></h2> <p>{{ post.excerpt }}</p> </li> {% endfor %}</ul>

• site.posts jekyll會自動生成_posts目錄的對象。
• post.urljekyll會自動會設(shè)置在_posts目錄下的頁面url。
• post.title 默認(rèn)是md文件名稱，但也可以在文章頁面自定義title: 我的文章自定義名稱。
• post.excerpt 默認(rèn)是文章第一段的摘要文字。

第十步，Github Pages的限制

Github Pages 并不是無限存儲和無限流量的靜態(tài)站點(diǎn)服務(wù)，一些限制如下：

• 內(nèi)容存儲不能超過1GB。
• 每個月100GB流量帶寬。
• 每小時編譯構(gòu)建次數(shù)不超過10次。（在線修改重新編譯并未發(fā)現(xiàn)這個限制）
• 更多參看官方說明：usage-limits。

結(jié)語

在實(shí)際的使用過程中，我發(fā)現(xiàn)完全可以在Github網(wǎng)站上，編寫md和html頁面，修改js和css文件，來完成站點(diǎn)的設(shè)置和搭建。只不過每次修改都要觸發(fā)Github jekyll的編譯行為，有點(diǎn)慢（不知道是不是增量編譯），沒有在本地修改調(diào)試的速度快。

更多jekyll詳細(xì)的設(shè)置和功能，參看官方網(wǎng)站的文檔：https://jekyllrb.com/docs。