這篇文章主要介紹了我在搭建這個博客中使用的框架和搭建過程祭务,以及其中踩到的一些坑。我的電腦環(huán)境是Win10。
這篇文章分為以下幾個部分文兢。
- 為什么選擇了Jekyll + GitHub page的組合
- 基于windows的環(huán)境安裝
- 建立自己的第一個博客
- 使用Jekyll模板快速建立博客
- 將博客放在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)境
- Ruby
- Ruby dev
- Jekyll
- 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停止
控制臺返回如下:
根據返回的本地端口顿天,在瀏覽器中打開堂氯,得到如下界面。
使用 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.html and other HTML, Markdown, Textile files |
如果這些文件中包含 YAML 頭信息 部分,Jekyll 就會自動將它們進行轉換束铭。當然廓块,其他的如 .html , .markdown 契沫, .md 带猴,或者 .textile 等在你的站點根目錄下或者不是以上提到的目錄中的文件也會被轉換。 |
Other Files/Folders | 其他一些未被提及的目錄和文件如 css 還有 images 文件夾懈万,favicon.ico 等文件都將被完全拷貝到生成的 site 中拴清。 這里有一些使用 Jekyll 的站點靶病,如果你感興趣就來看看吧。 |
不過隨著Jekyll的更新口予,新版的主題中沒有_drafts
嫡秕,_data
,jekyll-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
以上安裝過程參考: