如何使用Jekyll + GitHub page搭建個人網站

這篇文章主要介紹了我在搭建這個博客中使用的框架和搭建過程祭务,以及其中踩到的一些坑。我的電腦環(huán)境是Win10。
這篇文章分為以下幾個部分文兢。

  1. 為什么選擇了Jekyll + GitHub page的組合
  2. 基于windows的環(huán)境安裝
  3. 建立自己的第一個博客
  4. 使用Jekyll模板快速建立博客
  5. 將博客放在Github Pages上

為什么是Jekyll + GitHub page的組合

選擇Jekyll的理由

引用自官網
Jekyll 是一個簡單的博客形態(tài)的靜態(tài)站點生產機器。它有一個模版目錄焕檬,其中包含原始文本格式的文檔禽作,通過一個轉換器(如 Markdown)和我們的 Liquid渲染器轉化成一個完整的可發(fā)布的靜態(tài)網站,你可以發(fā)布在任何你喜愛的服務器上揩页。Jekyll 也可以運行在 GitHub Page 上旷偿,也就是說烹俗,你可以使用 GitHub 的服務來搭建你的項目頁面、博客或者網站萍程,而且是完全免費的幢妄。

選擇GitHub page的理由

GitHub Pages是一個免費的靜態(tài)網站托管平臺,由Github提供茫负,它具有以下特點:

  • GitHub Pages 有 300M 免費空間蕉鸳,資料自己管理,保存可靠忍法;
  • 熟悉版本控制潮尝,團隊協(xié)作流程;
  • 可以自定義域名饿序,Github 學生認證享受諸多優(yōu)惠勉失。

基于windows的環(huán)境安裝

Jekyll的安裝

由于Jekyll是基于Ruby開發(fā)的,所以原探,要想在本地構建一個Jekyll的測試環(huán)境乱凿,需要具有Ruby的開發(fā)和運行環(huán)境。下載與本地環(huán)境相符的Ruby和RubyDevKit咽弦。

安裝Jekyll需要以下環(huán)境

  1. Ruby
  2. Ruby dev
  3. Jekyll
  4. Bundler

安裝過程如下:

  • 首先需要從RubyInstaller下載Ruby+Devkit的組合包徒蟆,使用默認的選項進行安裝即可。
  • Win鍵 + R鍵打開CMD命令行型型,通過以下命令下載jekyll和Bundler段审,安裝過程中如果卡了很久按下回車即可,下載大概需要10分鐘闹蒜。
    gem install jekyll bundler
  • 在CMD命令行窗口中檢測jekyll是否安裝成功
    jekyll -v

編碼問題

如果你使用 UTF-8 編碼寺枉,請確保你的問題見中不存在 BOM 字符,否則 Jekyll 將會出現(xiàn)意想不到的情況嫂用。特別是你要在 Windows 上使用 Jekyll型凳,這個問題就需要特別注意。

因此需要將代碼控制臺頁面的編碼修改為 UTF-8嘱函,否則將會出現(xiàn)一個異常:“Liquid Exception: Incompatible character encoding” 甘畅。可以通過在CMD控制臺中輸入以下的命令解決:chcp 65001

建立自己的第一個博客

首先看看你想把你的博客建在哪里往弓,以D盤舉例疏唾,建立一個名字為testblog的博客。新建博客需要等待一定時間函似。命令行中輸入:

cd d:
jekyll new testblog  // testblog 為你的博客文件名,

控制臺返回(創(chuàng)建的地址有所不同)New jekyll site installed in D : /testblog槐脏。

開啟jekyll內置服務器

cd testblog//一定要進入創(chuàng)建的對應blog目錄,否則服務無法開啟
jekyll serve  //開啟服務器撇寞,可以按ctrl+c停止

控制臺返回如下:


image.png

根據返回的本地端口顿天,在瀏覽器中打開堂氯,得到如下界面。


image.png

使用 Jekyll 模版搭建博客

網絡上提供了大量適用于 GitHub Pages 的 Jekyll 模版牌废,下載一個并解壓將文件放到你的代碼庫(repository)根目錄下咽白。這些模板極大的方便了前端知識匱乏的我們建立一個精美的網頁。在這里下載:

我使用的是Voyager主題鸟缕,感謝redVi開源的主題晶框,精致又方便。

下載并解壓后懂从,進入解壓后的文件夾授段,可以看到主要包含幾個文件,其作用分別是:(資料來源:Jekyll 官網文檔

文件 / 目錄 描述
_config.yml 保存配置數(shù)據番甩。很多配置選項都會直接從命令行中進行設置侵贵,但是如果你把那些配置寫在這兒,你就不用非要去記住那些命令了对室。
_drafts drafts 是未發(fā)布的文章模燥。這些文件的格式中都沒有 title.MARKUP 數(shù)據咖祭。學習如何使用 drafts.
_includes 你可以加載這些包含部分到你的布局或者文章中以方便重用掩宜。
_layouts layouts 是包裹在文章外部的模板。布局可以在 YAML 頭信息中根據不同文章進行選擇么翰。 這將在下一個部分進行介紹牺汤。標簽 {{ content }}可以將content插入頁面中。
_posts 這里放的就是你的文章了浩嫌。文件格式很重要檐迟,必須要符合:YEAR-MONTH-DAY-title.MARKUP。 The permalinks 可以在文章中自己定制码耐,但是數(shù)據和標記語言都是根據文件名來確定的追迟。
_site 一旦 Jekyll 完成轉換,就會將生成的頁面放在這里(默認)骚腥。最好將這個目錄放進你的 .gitignore 文件中敦间。
index.htmland other HTML, Markdown, Textile files 如果這些文件中包含 YAML 頭信息 部分,Jekyll 就會自動將它們進行轉換束铭。當然廓块,其他的如 .html.markdown契沫, .md带猴,或者 .textile 等在你的站點根目錄下或者不是以上提到的目錄中的文件也會被轉換。
Other Files/Folders 其他一些未被提及的目錄和文件如 css 還有 images 文件夾懈万,favicon.ico 等文件都將被完全拷貝到生成的 site 中拴清。 這里有一些使用 Jekyll 的站點靶病,如果你感興趣就來看看吧。

不過隨著Jekyll的更新口予,新版的主題中沒有_drafts嫡秕,_datajekyll-metadata等目錄和文件苹威,多了assets等目錄昆咽。下載完成后打開文件夾,_posts/ 目錄下的文章都刪除牙甫,此為模板作者的實例文章掷酗。將 _config.yml文件里面的內容修改為自己的信息。

你可能喜歡markdown來寫文章窟哺,那么我們在文章頭部添加yaml頭信息并且文件的命名要服從下面的規(guī)則:year-month-title.markdown //markup為你的文件格式的后綴名

---
bg: "tools.jpg"
layout: post
title:  "我是如何搭建這個博客的"
crawlertitle: "我是如何搭建這個博客的"
summary: "搭建博客總結"
date:   2019-03-06 20:09:47 +0700
categories: posts
tags: ['個人雜談']
author: Zhanghx
<!--在文章頭部添加的yaml頭信息實例-->
---

寫上自己的博文內容泻轰,按命名規(guī)則將這個文件_posts/目錄里面即可。啟動jekyll內置服務器且轨, jekyll serve浮声,生成頁面。

將博客放在Github Pages上

首先需要有一個Github賬戶旋奢,沒有的注冊一個泳挥,不多說。新建一個 new repository 新的個人倉庫至朗,倉庫的名字為你的github的名字+github+io屉符,即yourname.github.io

接著是將這個新的倉庫拉取到本地锹引,在windows環(huán)境下我使用Github desktop作為Git客戶端矗钟,拉取完成后文件夾下會多出一個yourname的文件,我們把用下載好的主題下的所有文件復制到里面嫌变。然后把里面的所有文件push到剛剛建的遠程倉庫吨艇。

這時,在瀏覽器里面輸入網址:http://yourname.github.io 就可以看你的個人博客網站了腾啥,這就是你的博客網站的地址了东涡。前面所說的yourname指的是你的github賬號名字。

最后在本地把寫好的文章Push到Github上就可以完成網頁的更新了碑宴。至此一個個人博客算是搭建完成软啼。這是我的個人網站 http://zhanghx.me

以上安裝過程參考:

  1. jekyll的windows安裝官方指南
  2. Redchar的博客
  3. 愛博客大伯
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市延柠,隨后出現(xiàn)的幾起案子祸挪,更是在濱河造成了極大的恐慌,老刑警劉巖贞间,帶你破解...
    沈念sama閱讀 222,464評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件贿条,死亡現(xiàn)場離奇詭異雹仿,居然都是意外死亡,警方通過查閱死者的電腦和手機整以,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,033評論 3 399
  • 文/潘曉璐 我一進店門胧辽,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人公黑,你說我怎么就攤上這事邑商。” “怎么了凡蚜?”我有些...
    開封第一講書人閱讀 169,078評論 0 362
  • 文/不壞的土叔 我叫張陵人断,是天一觀的道長。 經常有香客問我朝蜘,道長恶迈,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 59,979評論 1 299
  • 正文 為了忘掉前任谱醇,我火速辦了婚禮暇仲,結果婚禮上,老公的妹妹穿的比我還像新娘副渴。我一直安慰自己奈附,他們只是感情好,可當我...
    茶點故事閱讀 69,001評論 6 398
  • 文/花漫 我一把揭開白布佳晶。 她就那樣靜靜地躺著桅狠,像睡著了一般讼载。 火紅的嫁衣襯著肌膚如雪轿秧。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,584評論 1 312
  • 那天咨堤,我揣著相機與錄音菇篡,去河邊找鬼。 笑死一喘,一個胖子當著我的面吹牛驱还,可吹牛的內容都是我干的。 我是一名探鬼主播凸克,決...
    沈念sama閱讀 41,085評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼议蟆,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了萎战?” 一聲冷哼從身側響起咐容,我...
    開封第一講書人閱讀 40,023評論 0 277
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎蚂维,沒想到半個月后戳粒,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體路狮,經...
    沈念sama閱讀 46,555評論 1 319
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 38,626評論 3 342
  • 正文 我和宋清朗相戀三年蔚约,在試婚紗的時候發(fā)現(xiàn)自己被綠了奄妨。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,769評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡苹祟,死狀恐怖砸抛,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情树枫,我是刑警寧澤锰悼,帶...
    沈念sama閱讀 36,439評論 5 351
  • 正文 年R本政府宣布,位于F島的核電站团赏,受9級特大地震影響箕般,放射性物質發(fā)生泄漏。R本人自食惡果不足惜舔清,卻給世界環(huán)境...
    茶點故事閱讀 42,115評論 3 335
  • 文/蒙蒙 一丝里、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧体谒,春花似錦杯聚、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,601評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至故响,卻和暖如春傀广,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背彩届。 一陣腳步聲響...
    開封第一講書人閱讀 33,702評論 1 274
  • 我被黑心中介騙來泰國打工伪冰, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人樟蠕。 一個月前我還...
    沈念sama閱讀 49,191評論 3 378
  • 正文 我出身青樓贮聂,卻偏偏與公主長得像,于是被迫代替她去往敵國和親寨辩。 傳聞我的和親對象是個殘疾皇子吓懈,可洞房花燭夜當晚...
    茶點故事閱讀 45,781評論 2 361

推薦閱讀更多精彩內容