概述
之前閑著沒事,就利用Github 建了一個(gè)個(gè)人博客網(wǎng)站,效果還不錯(cuò),今天就來分享一下.
開始之前,先大致介紹一下用到的技術(shù)和相關(guān)概念
GitHub是一個(gè)利用Git進(jìn)行版本控制、專門用于存放軟件代碼與內(nèi)容的共享虛擬主機(jī)服務(wù),很多人都把它稱作程序員的同性交友網(wǎng)站,具體為啥這么叫我也不知道
Github Pages設(shè)計(jì)的初衷是為托管在GitHub上的項(xiàng)目提供介紹頁面,開發(fā)者們可以通過GitHub Pages為他們的每一個(gè)項(xiàng)目創(chuàng)建一個(gè)用于介紹該項(xiàng)目的靜態(tài)網(wǎng)站,不過由于他的空間免費(fèi)而且穩(wěn)定,因此用它搭建一個(gè)個(gè)人博客網(wǎng)站是再好不過了.
Git是一個(gè)開源的分布式版本控制系統(tǒng),可以有效、高速的處理從很小到非常大的項(xiàng)目版本管理.它的作用
jekyll是一個(gè)簡單的免費(fèi)的Blog生成工具,將純文本轉(zhuǎn)化為靜態(tài)網(wǎng)站和博客;由于咱們的GitHub Pages生成的是靜態(tài)頁面,每次更新博客都需要手動更改HTML,這就使得每次寫博客都變得很麻煩,而用了這個(gè)工具以后,它會根據(jù)預(yù)先設(shè)置好的格式來生成博客內(nèi)容,你就無需關(guān)心html代碼,只需要把重心放在博客的寫作上.
Liquid是一種模板語言,可以在HTML頁面中使用它;而他的作用就是使用標(biāo)記、對象和過濾器的組合來加載一些動態(tài)內(nèi)容.
廢話不多說,下面來講講大致流程
先登陸你的Github賬號,沒有賬號的自己去注冊一個(gè)(注冊過程這里就不講了),如下圖新建一個(gè)倉庫
好了,經(jīng)過上面的步驟咱們的Github倉庫就算是建好了,下面要來講講本地怎么配置了;需要用到Git這個(gè)工具,請?zhí)崆皽?zhǔn)備好.
1.找一個(gè)目錄來作為你本地的倉庫,比如我的是”F:\Cloud”,那么就在Cloud文件夾下初始化倉庫.
2.初始化倉庫的方式有兩種,一種是用git的圖形化界面來創(chuàng)建,另一種是用git命令來初始化,這里我選用圖形化界面的方式來創(chuàng)建(極(lan)力(ren)推(bi)薦(bei));
3.來到Cloud目錄下右鍵選擇Git GUI Here–>選擇Create New Repository
1.還是用Gui的形式來創(chuàng)建,在help中選擇Show SSH key,點(diǎn)擊Generate Key(期間啥都不用填,只需要下一步)來生成key
2.把生成的key填寫到Github中,在Settings的SSH and GPG keys那里填,title隨便寫,主要是用來注明的,如圖
使用git命令的方式來配置,右鍵選擇Git Bash Here打開命令窗口,作如下配置
git config –global user.name “你的Github用戶名”
<!DOCTYPE html>
<html lang ="en" >
<head >
<meta charset ="UTF-8" >
<title > Document</title >
<style type ="text/css" >
h1 {
text-align : center font-size : 50 px }
</style >
</head >
<body >
<h1 > Hello Github</h1 >
</body >
</html > 1.在本地做一次提交(以命令行的方式)
git add .
2.把項(xiàng)目提交到Github上
git remote add origin 你的遠(yuǎn)程倉庫地址(git@github.com:MarcusKun/io.git)
3.配置Github Pages
4.通過Github Pages那里給的地址訪問自己的網(wǎng)頁
經(jīng)過上面的步驟,相信大家已經(jīng)可以用Github來生成自己的靜態(tài)網(wǎng)站了,可是畢竟咱們是要打造博客網(wǎng)站啊,不可能每次都用html語法來寫博客吧;好了,這個(gè)時(shí)候就要用到Jekyll這個(gè)工具了,有一點(diǎn)要強(qiáng)調(diào)的是,我這里不會講解從頭打造一個(gè)個(gè)人博客網(wǎng)站,而是利用別人提供的Jekyll模板來制作,如果想深入學(xué)習(xí)的同學(xué)可以自行學(xué)習(xí)Jekyll以及Liquid
一個(gè)標(biāo)準(zhǔn)的使用Jekyll工具生成的網(wǎng)站,其目錄結(jié)構(gòu)一般是像這樣的
├── _config. yml
├── _drafts
| ├── begin-with -the -crazy -ideas . textile
| └── on -simplicity -in -technology . markdown
├── _includes
| ├── footer. html
| └── header . html
├── _layouts
| ├── default. html
| └── post. html
├── _posts
| ├── 2007 - 10 - 29 -why -every -programmer -should -play -nethack . textile
| └── 2009 - 04 - 26 -barcamp -boston - 4 -roundup . textile
├── _data
| └── members. yml
├── _site
└── index. html簡單介紹一下每個(gè)目錄和文件的作用
文件 / 目錄 描述 _config.yml 保存配置數(shù)據(jù)。很多配置選項(xiàng)都會直接從命令行中進(jìn)行設(shè)置，但是如果你把那些配置寫在這兒，你就不用非要去記住那些命令了。 _drafts drafts 是未發(fā)布的文章。這些文件的格式中都沒有 title.MARKUP 數(shù)據(jù)。學(xué)習(xí)如何使用 drafts. _includes 你可以加載這些包含部分到你的布局或者文章中以方便重用?？梢杂眠@個(gè)標(biāo)簽 {% include file.ext %} 來把文件 _includes/file.ext 包含進(jìn)來。 _layouts layouts 是包裹在文章外部的模板。布局可以在 YAML 頭信息中根據(jù)不同文章進(jìn)行選擇。 這將在下一個(gè)部分進(jìn)行介紹。標(biāo)簽 {{ content }} 可以將content插入頁面中。 _posts 這里放的就是你的文章了。文件格式很重要，必須要符合: YEAR-MONTH-DAY-title.MARKUP。 The permalinks 可以在文章中自己定制，但是數(shù)據(jù)和標(biāo)記語言都是根據(jù)文件名來確定的。 _data 放一些其他配置文件,必須是.yml或者.yaml格式的,比如有一個(gè)文件叫members.yml,如果想引用這個(gè)文件里的內(nèi)容就通過site.data.membres來引用 _site 一旦 Jekyll 完成轉(zhuǎn)換，就會將生成的頁面放在這里（默認(rèn)）。最好將這個(gè)目錄放進(jìn)你的 .gitignore 文件中。
第一步:去JekyllThemes 下載一個(gè)自己喜歡的模板
Liquid語法:https://help./themes/liquid http:/// https:///
