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

寫在前面

使用 github 也快有3年了，的確以爲 github 的方便，易用，並且不單單在版本控制方面［版本控制方面我的感受比 svn 好用了太多太多］，並且還提供了一個平臺，讓你隨時跟進最近技術和趨勢。今天就來講說其中一個比較實用

ps: 本文對應的 github repo 在這裏：https://github.com/litaotao/github-blog-template

1. 最簡單的步驟

• step 1 : 新建一個 repo，並克隆 repo 到本地

repo 名定爲 你的github用戶名 + .github.io，好比說，個人 github 用戶名叫 litaotao, 那新建的 repo 名就叫 litaotao.github.io

• step 2 : 克隆模版

使用 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 : 複製模版相關文件到你的本地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

而後，複製模版下全部文件到你的本地repo中，使用命令 cp -r github-blog-template/ your_local_repo/*

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

• step 4 : 本地運行

進入到 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 便可看到你的博客了，我已經在模版裏放了兩篇文章，截圖以下。

2. 自定義配置

若是你已經成功完成了第一步，那恭喜，你立刻就能擁有一個本身的博客了，在此以前，你只須要改一個配置文件便可：github-blog-template/_config.yml，你須要改的地方我用中文標註出來了，能夠參考註釋說明和個人博客來配置：https://github.com/litaotao/litaotao.github.io

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

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

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

categories: [你的博客目錄名稱，對應到 your_local_repo/_posts/ 下的文件夾名]

ok,若是你已經更改好配置文件了，而且本地運行正常的話，能夠上傳到 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
### 博客文章目錄，下面能夠按文件夾進行博文分類
### 注意，博文文件格式必須是：時間-博文標題.md，參考下面的格式
├── _posts
│   ├── books
│   │   └── 2016-04-29-books-recommend-and-summarize-on-apr-2016.md
│   └── python
│       └── 2016-04-01-spark-in-finance-and-investing.md
### 這個是你的站點地圖了，用戶能夠訪問這個文件夾下面的全部文件
### 好比說，用戶能夠直接訪問個人 litaotao.github.io/404.html; litaotao.github.io/images/2.jpg
### 好比說，當你訪問 litaotao.github.io/spark-in-finance-and-investing  
###        其實是訪問了 litaotao.github.io/spark-in-finance-and-investing.html
### 你會發現這下面有不少在博客更目錄下重複的文件夾，好比說 css，js，images等文件夾，不要納悶，這是正常的
### 由於你的博客更目錄下的文件，是 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. 總結

總的來講，利用 github 搭建博客的步驟爲：

• 建立一個 github用戶名 + '.github.io' 的新 repo，並克隆到本地

• 把模版，除去 '.git' 的全部文件 copy 到你的repo 中

• 更改 '_config.yml' 配置文件

• 本地試運行，上傳到github

5. 其餘話題

一個簡單，但基本夠用的博客就這樣搭建完成了。其餘還有一些擴展話題，感興趣的同窗能夠 google 或者聯繫我，好比說：

• 如何給你的博客加上 評論功能

• 如何給你的博客加上 cnzz 統計功能

• 如何給你的博客加上 growingio 統計功能

• 如何給你的博客加上 百度分享功能

6. 打開微信，掃一掃，點一點，棒棒的，^_^

7. 用本模版搭建的博客

• http://yuanlaishiai.com/

• http://way1989.github.io/

• http://taotaomami.github.io/

• http://ljdomain.github.io/