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

写在前面

使用 github 也快有3年了,的确觉得 github 的方便,易用,而且不仅仅在版本控制方面[版本控制方面个人感觉比 svn 好用了太多太多],而且还提供了一个平台,让你随时跟进最近技术和趋势。今天就来说说其中一个比较实用

ps:

  • 本文对应的 github repo 在这里:https://github.com/litaotao/github-blog-template

  • 如果你已经看完本文,并且觉得不错的话,可以来原博客看看,最近两天原博客有了比较大的改动,全自适应,排版优化,色彩优化,主页优化也美观了很多: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 : 复制模版相关文件到你的本地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 即可看到你的博客了,我已经在模版里放了两篇文章,截图如下。

github-pages-blog-2.png

2. 自定义配置

如果你已经成功完成了第一步,那恭喜,你马上就能拥有一个自己的博客了,在此之前,你只需要改一个配置文件即可:github-blog-template/_config.yml,你需要改的地方我用中文标注出来了,可以参考注释说明和我的博客来配置: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 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 或者联系我,比如说:

  • 如何给你的博客加上 评论功能
github-pages-blog-3.png
  • 如何给你的博客加上 cnzz 统计功能
github-pages-blog-4.png
  • 如何给你的博客加上 growingio 统计功能
github-pages-blog-5.png
  • 如何给你的博客加上 百度分享功能
github-pages-blog-6.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 159,015评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,262评论 1 292
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,727评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,986评论 0 205
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,363评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,610评论 1 219
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,871评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,582评论 0 198
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,297评论 1 242
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,551评论 2 246
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,053评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,385评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,035评论 3 236
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,079评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,841评论 0 195
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,648评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,550评论 2 270

推荐阅读更多精彩内容