5分鐘教你使用 github pages 搭建博客

寫在前面

使用 github 也快有3年了,的確覺得 github 的方便,易用,而且不僅僅在版本控制方面[版本控制方面?zhèn)€人感覺比 svn 好用了太多太多],而且還提供了一個平臺,讓你隨時跟進(jìn)最近技術(shù)和趨勢。今天就來說說其中一個比較實(shí)用

ps:

  • 本文對應(yīng)的 github repo 在這里:https://github.com/litaotao/github-blog-template

  • 如果你已經(jīng)看完本文,并且覺得不錯的話,可以來原博客看看,最近兩天原博客有了比較大的改動,全自適應(yīng),排版優(yōu)化,色彩優(yōu)化,主頁優(yōu)化也美觀了很多:litaotao.github.io,歡迎多多提建議。

目前已用本模版搭建的博客[從 cnzz 上看到的,還有很多我不知道的]

1. 最簡單的步驟

  • step 1 : 新建一個 repo,并克隆 repo 到本地

repo 名定為 你的github用戶名 + .github.io,比如說,我的 github 用戶名叫 litaotao, 那新建的 repo 名就叫 litaotao.github.io

github-pages-blog-1.png

使用 git 命令克隆模版:git clone git@github.com:litaotao/github-blog-template.git

taotao@mac007:~/Desktop/tmp$git clone git@github.com:litaotao/github-blog-template.git
Cloning into 'github-blog-template'...
remote: Counting objects: 75, done.
remote: Compressing objects: 100% (68/68), done.
remote: Total 75 (delta 4), reused 72 (delta 4), pack-reused 0
Receiving objects: 100% (75/75), 1.19 MiB | 425.00 KiB/s, done.
Resolving deltas: 100% (4/4), done.
Checking connectivity... done.

  • step 3 : 復(fù)制模版相關(guān)文件到你的本地repo中

首先,先刪掉模版里的一個文件夾 .git

taotao@mac007:~/Desktop/tmp/github-blog-template$ll
...
...
...
drwxr-xr-x  13 taotao  staff   442B May 10 10:32 .git
taotao@mac007:~/Desktop/tmp/github-blog-template$sudo rm -rf .git

然后,復(fù)制模版下所有文件到你的本地repo中,使用命令 cp -r github-blog-template/ your_local_repo/*

taotao@mac007:~/Desktop/tmp$cp -r github-blog-template/* your_local_repo/

  • step 4 : 本地運(yùn)行

進(jìn)入到 your_local_repo 目錄,使用 jekyll server --watch 命令啟動本地博客。

taotao@mac007:~/Desktop/tmp/your_local_repo$jekyll server --watch
Configuration file: /Users/chenshan/Desktop/tmp/your_local_repo/_config.yml
            Source: /Users/chenshan/Desktop/tmp/your_local_repo
       Destination: /Users/chenshan/Desktop/tmp/your_local_repo/_site
 Incremental build: disabled. Enable with --incremental
      Generating...
                    done in 0.588 seconds.
 Auto-regeneration: enabled for '/Users/chenshan/Desktop/tmp/your_local_repo'
Configuration file: /Users/chenshan/Desktop/tmp/your_local_repo/_config.yml
    Server address: http://127.0.0.1:4000/
  Server running... press ctrl-c to stop.

如果一切順利,在瀏覽器訪問:localhost:4000 即可看到你的博客了,我已經(jīng)在模版里放了兩篇文章,截圖如下。

github-pages-blog-2.png

2. 自定義配置

如果你已經(jīng)成功完成了第一步,那恭喜,你馬上就能擁有一個自己的博客了,在此之前,你只需要改一個配置文件即可:github-blog-template/_config.yml,你需要改的地方我用中文標(biāo)注出來了,可以參考注釋說明和我的博客來配置:https://github.com/litaotao/litaotao.github.io

markdown: kramdown
highlight paginate: 8
permalink: /:title
encoding: UTF-8
gems: [jekyll-paginate]

title: 你的博客名稱
url: 你的博客地址,就叫 http://github用戶名+.github.io
feed: /atom.xml
author_info: <a >你的名字</a>

myblog:
  gavatar: 你的頭像地址
  gpname: 你的名字
  linkedin: 你的 linkedin 地址
  github: 你的 github 地址
  email: mailto:你的 email 地址
  coverimgs: []
  postbgimg: []

categories: [你的博客目錄名稱,對應(yīng)到 your_local_repo/_posts/ 下的文件夾名]

ok,如果你已經(jīng)更改好配置文件了,并且本地運(yùn)行正常的話,可以上傳到 github 了。

3. 深度閱讀之目錄文件說明

taotao@mac007:~/Desktop/github/github-blog-template$tree
### 404 頁面,你可以自定義
├── 404.html
├── README.md
### 博客配置文件,基本上是最重要的一個文件之一了
├── _config.yml
### 博客頁面模版目錄
├── _layouts
│   ├── default.html
│   ├── home.html
│   ├── page.html
│   └── post.html
### 博客文章目錄,下面可以按文件夾進(jìn)行博文分類
### 注意,博文文件格式必須是:時間-博文標(biāo)題.md,參考下面的格式
├── _posts
│   ├── books
│   │   └── 2016-04-29-books-recommend-and-summarize-on-apr-2016.md
│   └── python
│       └── 2016-04-01-spark-in-finance-and-investing.md
### 這個是你的站點(diǎn)地圖了,用戶可以訪問這個文件夾下面的所有文件
### 比如說,用戶可以直接訪問我的 litaotao.github.io/404.html; litaotao.github.io/images/2.jpg
### 比如說,當(dāng)你訪問 litaotao.github.io/spark-in-finance-and-investing  
###        實(shí)際上是訪問了 litaotao.github.io/spark-in-finance-and-investing.html
### 你會發(fā)現(xiàn)這下面有很多在博客更目錄下重復(fù)的文件夾,比如說 css,js,images等文件夾,不要納悶,這是正常的
### 因?yàn)槟愕牟┛透夸浵碌奈募?,?jekyll 用來渲染一個 html 文件的,html 文件及其所需要的任何文件,都會放到 _site 這個
### 專用的目錄下面
├── _site
│   ├── 404.html
│   ├── README.md
│   ├── atom.xml
│   ├── books-recommend-and-summarize-on-apr-2016.html
│   ├── css
│   │   ...
│   │   ...
│   │   ...
│   ├── images
│   │   ├── 2.jpg
│   │   ├── spark-in-finance-1.jpg
│   │   ├── spark-in-finance-2.jpg
│   │   └── spark-in-finance-3.jpg
│   ├── index.html
│   ├── js
│   │   ...
│   │   ...
│   │   ...
│   └── spark-in-finance-and-investing.html
├── atom.xml
├── css
│   │   ...
│   │   ...
│   │   ...
├── images
│   │   ...
│   │   ...
│   │   ...
├── index.html
└── js
    │   │   ...
    │   ...
    │   ...

4. 總結(jié)

總的來說,利用 github 搭建博客的步驟為:

  • 創(chuàng)建一個 github用戶名 + '.github.io' 的新 repo,并克隆到本地
  • 把模版,除去 '.git' 的所有文件 copy 到你的repo 中
  • 更改 '_config.yml' 配置文件
  • 本地試運(yùn)行,上傳到github

5. 其他話題

一個簡單,但基本夠用的博客就這樣搭建完成了。其他還有一些擴(kuò)展話題,感興趣的同學(xué)可以 google 或者聯(lián)系我,比如說:

  • 如何給你的博客加上 評論功能
github-pages-blog-3.png
  • 如何給你的博客加上 cnzz 統(tǒng)計(jì)功能
github-pages-blog-4.png
  • 如何給你的博客加上 growingio 統(tǒng)計(jì)功能
github-pages-blog-5.png
  • 如何給你的博客加上 百度分享功能
github-pages-blog-6.png
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 230,106評論 6 542
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 99,441評論 3 429
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事?!?“怎么了?”我有些...
    開封第一講書人閱讀 178,211評論 0 383
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經(jīng)常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,736評論 1 317
  • 正文 為了忘掉前任,我火速辦了婚禮,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 72,475評論 6 412
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 55,834評論 1 328
  • 那天,我揣著相機(jī)與錄音,去河邊找鬼。 笑死,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,829評論 3 446
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 43,009評論 0 290
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 49,559評論 1 335
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 41,306評論 3 358
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 43,516評論 1 374
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 39,038評論 5 363
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 44,728評論 3 348
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,132評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,443評論 1 295
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,249評論 3 399
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 48,484評論 2 379

推薦閱讀更多精彩內(nèi)容