在Github上搭建Jekyll博客

发表于 | 分类于

创建库

在Github中创建一个名为username.github.io的库

安装Jekyll

1
2
3
$ gem install jekyll
$ jekyll new username.github.io
$ cd username.github.io

目录结构图

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
├── CNAME
├── README.md
├── _config.yml
├── _includes
│   ├── disqus.html
│   ├── footer.html
│   ├── googleanalytics.html
│   ├── header.html
│   └── navside.html
├── _layouts
│   ├── base.html
│   ├── book.html
│   ├── page.html
│   └── post.html
├── _posts
│   ├── Book
│   ├── Life
│   ├── Resource
│   ├── Technology
│   └── Tool
├── index.html
├── pages
│   ├── about.html
│   ├── archive.html
│   └── atom.xml
├── public
│   ├── css
│   ├── fonts
│   ├── img
│   ├── js
│   └── upload
└── sitemap.txt

配置文件

_config.yml里面设置站点主要配置信息

1
2
3
4
5
6
7
8
9
10
11
12
13
permalink: /:year/:month/:day/:title.html   #博文的固定链接
paginate: 10                                #分页时每页博文数量
author:                                     #自定义常亮
  name: username
  email: username@example.com
  link: http://username.org
title: XX的博客                             #自定义常量
locals:                                     #自定义常量
  tags: 标签
  about: 关于
active: 技术                                #自定义常量
subscribe_rss: /pages/atom.xml              #订阅地址
markdown: redcarpet                         #markdown解释器

域名配置

CNAME这个文件写明了这个站点的域名，如果不喜欢username.github.io的话，可以改掉

博客存放

_posts下的所有目录中的所有博客，都会被Jekyll处理成为静态的html文件，然后放在_site下。

所以要把以下目录添加到.gitignore文件。

1
2
3
_site/
_drafts/
.DS_Store

在_posts下的符合YYYY-MM-DD-xxxxxx.md的文件，都会被Jekyll认定为博客内容。我在_posts下又新建了一些文件夹，主要是方便自己本地管理博客。

在上述这些文件中，必须先定义一些配置项，例如这篇博客的md文件中，开头是这样的：

1
2
3
4
5
6
7
layout: post                                   #这个博客的布局文件
title: 在Github上搭建自己的Jekyll博客          #博客标题
category: 工具                                 #博客分类
tags: Jekyll                                   #博客标签
keywords: Jekyll,Github                        #自定义常量
description:                                   #自定义常量

除了自定义常量外的必须包含进去，自定义变量在这个布局中可以访问。

模版文件

剩余的目录，基本都属于模板文件了，我解释一下各自的作用：

  • _includes 可以在模板中随时包含的文件
  • _layouts 布局文件，在博客头配置中可以选择
  • pages 站内固定的页面
  • public 公共资源，包括js,css,img等，还有我博客中调用的图片，我都放这里
  • index.html 站点的首页，整个站的入口文件
  • sitemap.txt 给搜索引擎看的，如何爬取这个站

本地预览及提交

本地预览自己的修改很容易，只要进入username.github.io目录，执行

1
$ jekyll serve -H 0.0.0.0

然后访问http://localhost:4000就OK了，如果想脱离终端在后台运行，加参数--detach

1
$ jekyll serve --detach -H 0.0.0.0

自己预览过没有问题以后，就提交到服务端吧，Git三步走

1
2
3
git add xxx
git commit -m "xxx"
git push

参考

  1. 在Github上搭建Jekyll博客和创建主题