GitHub Page&Jekyll搭建靜態(tài)博客(一)

很多人都希望有個地方可以把自己的想法、感悟分享給大家。雖然有很多公共網(wǎng)站提供了便利的分享空間,但更希望有個專屬的博客。建立網(wǎng)站,通常我們會想到,需要購買域名,網(wǎng)站存儲的虛擬空間,網(wǎng)站開發(fā)和維護。然而,如果只是需要有個展示自我的地方,也就是說需要一個靜態(tài)網(wǎng)站(由HTML靜態(tài)頁面構(gòu)成,不需要動態(tài)交互,后臺處理),那么完全可以考慮利用github提供的pages,來制作一個靜態(tài)博客。

網(wǎng)上有很多github pages建博客的文章,但大多已過時。這里簡單介紹下目前的方法,以及如何通過jekyll這個工具進行管理、定制網(wǎng)站,并通過域名配置,發(fā)布到萬網(wǎng),可以在互聯(lián)網(wǎng)中自由訪問。

GitHub Page 創(chuàng)建一個簡單網(wǎng)站

  1. 在github新建一個倉庫(github->new repository)。之前會在github賬戶下創(chuàng)建page,但現(xiàn)在需要基于單獨的倉庫來創(chuàng)建。


    new repository
  2. 設置好你喜歡的名稱,創(chuàng)建好一個repository后,進入settings,可以找到'GitHub Pages'對應設置的地方。


    github page setting

    現(xiàn)在無法設置source,因為repository還沒有添加文件,沒有分支。你可以git clone repository到本地,然后添加文件,git comment后git push。但簡單的,你也可以直接選擇一個主題,自動生成。

  3. 點擊'choose a theme',會有幾個供選擇的網(wǎng)站主題,選擇后,會到提交更改界面,點擊Commit changes。就會提交自動生成好網(wǎng)站文件和設置。
  4. 再次回到setting,會發(fā)現(xiàn)'GitHub Pages'處提示'Your site is published at https://username.github.io/repoName/'。點擊該鏈接,跳轉(zhuǎn)進你新建的網(wǎng)站首頁。work done!
    github page setting


    跳轉(zhuǎn):
    your page

自定義設置

source


上面是我們自動生成的網(wǎng)站代碼。

_config.yml # 站點配置文件
index.md # 首頁

從目的上講,我們已經(jīng)完成了靜態(tài)網(wǎng)站的搭建。然并卵,總不能只在一個index.md文件中修改,只展示一個index界面吧。

github page的本質(zhì),實際上提供了代碼托管的空間,利用jekyll這個簡單的博客靜態(tài)站點生成工具來生成、管理。網(wǎng)上有很多jekyll模板,github提供的模板都相對簡單,我們可以去下載更多模板jekyll themes

這里我們簡單使用fresh模板。下載zip,解壓后,將文件copy到我們的本地repo(刪除之前的文件)?,F(xiàn)在的文件:

.
├── LICENSE
├── README.md
├── _config.yml
├── _includes
├── _layouts
├── _pages
├── _posts
├── _site
├── assets
└── index.html
  1. 文件夾_layouts:用于存放模板的文件夾
  2. 文件夾_posts:用于存放博客文章的文件夾,里面是markdown格式的文章
  3. 文件夾css:存放博客所用css的文件夾
  4. _coinfig.yml:jekyll的配置文件,里面可以定義相當多的配置參數(shù),具體配置參數(shù)可以參照其官網(wǎng)
  5. index.html:項目的首頁

選定了一個比較完整的模板。我們只需要添加博客文章即可。在_posts文件夾,參照其他.markdown文件。我們按照相同的命名規(guī)則,添加文件。編輯后push到github。博客網(wǎng)站就可以得到持續(xù)的更新。

目前選定了模板,我們可以實現(xiàn)發(fā)布文章,更新博客這些基本功能。但如何更靈活的優(yōu)化我們的網(wǎng)站,必然需要更深入的了解jekyll這個工具。關(guān)于jekyll相關(guān)內(nèi)容,下篇文章再單獨介紹。

限制

既然是免費的,自然會有一些限制。簡單來說:

  • 網(wǎng)站即一個倉庫的空間小于1G
  • 月流量 100G
  • 每小時更新不超過 10 次

詳見Usage limits

但作為大多數(shù)個人博客來說,是無關(guān)痛癢的。當然,如果你是知名博客,就更不應該貪小便宜用免費了。

另外,作為博客來說,我們希望在互聯(lián)網(wǎng)上被搜到。然而,github屏蔽了百度爬蟲(可能是認為過于牛虻),所以很遺憾,我們在github上的文章并不能被百度爬到。。關(guān)于這點,也有一些方法可以解決。一個簡單的思路,是利用國內(nèi)的coding.net提供的page功能。具體也在后文敘述。


示例網(wǎng)站參照:hot&cool
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容