首页 使用Jekyll搭建博客系统
文章
取消

使用Jekyll搭建博客系统

  既然本博客使用Jekyll搭建,那么这篇博客就记录一下使用Jekyll搭建博客的过程。

在这里需要说明一下,虽然这个过程很简单,但是对于没有任何编程基础的同学来说还是建议找个平台注册一个博客账号,这样更方便。

Jekyll

  Jekyll是一个静态网站生成器,可以认为是一个简单的“内容管理工具”,使用markdown作为编辑器,生成静态网站,支持选择主题模版。

  Jekyll使用Ruby开发,需要安装Ruby运行环境,不熟悉Ruby语言的不要紧,官网安装文档(https://jekyllrb.com/docs/installation/)给出了包括macOS/Windows/Linux下的Ruby安装方法,找到对应系统进行安装就可以了,这里不再赘述。

安装

  Jekyll安装也是很简单

1
2
gem install jekyll bundler

  Jekyll安装好后,按照官网方法快速开始一个自己的博客。

1
2
3
jekyll new myblog
cd myblog
bundle exec jekyll serve

  浏览器访问 http://localhost:4000,对的,这就是你的博客网站。

博客网站

  是不是很丑?其实也没有,发几篇文章后把页面撑起来就会发现还可以,但是还是太简单些,之后我们选择一个主题就可以了。

目录

  现在先了解一下这个新创建的博客系统的目录,总要知道如何编写博文吧。

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
.
├── 404.html
├── Gemfile
├── Gemfile.lock
├── _config.yml
├── _posts
│   └── 2023-02-17-welcome-to-jekyll.markdown
├── _site
│   ├── 404.html
│   ├── about
│   │   └── index.html
│   ├── assets
│   │   ├── main.css
│   │   ├── main.css.map
│   │   └── minima-social-icons.svg
│   ├── feed.xml
│   ├── index.html
│   └── jekyll
│       └── update
│           └── 2023
│               └── 02
│                   └── 17
│                       └── welcome-to-jekyll.html
├── about.markdown
└── index.markdown

  这就是新建的myblog的目录结构,不用担心,我们不需要修改Ruby代码,这里也没有Ruby代码。这里我们先只关注一个文件和三个文件夹:

  • _config.yml:一个文件,这是博客的配置文件,如:博客名、email、描述、使用主题,使用插件等等都是在这里设置。

  • _posts:这个就是写博客的地方。等我们的博客系统彻底搭建好之后,这里就是我们的主战场。

  • _site:这个是生成的静态网站的目录,是工具自动生成的,如果你没有执行过bundle exec jekyll serve这个目录根本不存在,我们不需要管的,之所以介绍它是因为如果不使用GitHub的Actions部署,可能需要把这个目录改成docs,只需要在_config.yaml文件增加destination: docs即可,直接改这个目录是不会有效的。

  • _drafts:这个文件夹是不存在的,但是却很有用,这个文件夹是草稿箱,你可以自己创建。写在这个里面的博文默认不会被展示,除非你执行bundle exec jekyll serve --drafts

这个草稿箱的博文默认是不展示的,加上--drafts参数才会展示,但是即便加上这个参数,里面其他的文件也不展示,比如图片,还是不能正常显示。

  其他的文件除非你知道自己在做什么,否则就不要动了。

  写博文有几个注意的地方:

1、_posts目录下文件名格式为:年-月-日-标题.MARKUP,这里的年为4位数,月和日为两位数,MARKUP为文件后缀,可以为mdmarkdown或者textile

2、只支持两种文件格式markdowntextile,我比较喜欢markdown

3、博文有头部属性,最好按照要求写,这样博文更完整,如:标题、作者、时间、分类、标签、是否支持数学公式,是否支持绘图、首图等。

1
2
3
4
5
6
7
8
9
10
11
12
13
---
title: Writing a New Post
author: cotes
date: 2019-08-08 14:10:00 +0800
categories: [Blogging, Tutorial]
tags: [writing]
math: true
mermaid: true
image:
  path: /commons/devices-mockup.png
  lqip: data:image/webp;base64,UklGRpoAAABXRUJQVlA4WAoAAAAQAAAADwAABwAAQUxQSDIAAAARL0AmbZurmr57yyIiqE8oiG0bejIYEQTgqiDA9vqnsUSI6H+oAERp2HZ65qP/VIAWAFZQOCBCAAAA8AEAnQEqEAAIAAVAfCWkAALp8sF8rgRgAP7o9FDvMCkMde9PK7euH5M1m6VWoDXf2FkP3BqV0ZYbO6NA/VFIAAAA
  alt: Responsive rendering of Chirpy theme on multiple devices.
---

这里的date尤其注意,如果时间是未来时间,系统将不会显示该博文。

安装主题

  前面已经说过Jekyll可以换主题,换主题也很简单,我们先在官网给的主题库https://jekyllrb.com/docs/themes/里找到自己喜欢的主题,我都是直接把主题下载下来,然后直接在里面写就可以了,拿我喜欢的Chirpy主题来说吧。

  在官网给的主题网站(http://jekyllthemes.org/)上看到的Chirpy(http://jekyllthemes.org/themes/jekyll-theme-chirpy/)找到自己满意的主题。

Chirpy

  直接下载解压,目录结果如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
$ tree -L 1
.
├── CHANGELOG.md
├── Gemfile
├── Gemfile.lock
├── LICENSE
├── README.md
├── _config.yml
├── _data
├── _includes
├── _javascript
├── _layouts
├── _plugins
├── _posts
├── _sass
├── _site
├── _tabs
├── assets
├── gulpfile.js
├── index.html
├── jekyll-theme-chirpy.gemspec
├── package.json
└── tools

  可以看见多了很多的文件和目录,但是其实和上面的一样,除非我们要修改主题否则我们都不用管,只需要在_posts里写博文就可以了。

  直接啥也不用管,运行就可以了。

1
2
3
bundle exec jekyll serve
# 或
./tools/run

展示

  是不是好看多了,里面还有几篇博文,建议看一下,这个可以帮你尽快知道如何写博文,还有一些是markdown语法。

在GitHub创建仓库

  现在系统有了,要把博客部署到GitHub的Pages上。

  首先要有一个GitHub的账号,没有就赶紧注册一个吧。登录之后,点右上角头像旁的“+”,选择“New repository”,创建一个新的代码仓库。

创建代码仓库-01

创建代码仓库-02

这里需要注意,代码仓库的名字的格式必须是用户名或组织名.github.io,格式不对也能发布,但是博文的访问地址、博文里面的图片等的访问路径都会很麻烦,有兴趣的可以试试。

  有了仓库就赶紧把你的博客系统提交上去吧。

部署到Pages

设置

Pages

  这里需要讲一下Pages的部署,Pages部署有两种方式:默认的方式是从分支部署;新的方式是使用Actions,目前处于Beta阶段,这个方式网上资料少了些,也是我选择的方式。

部署方式选择

从分支部署

选择使用分支部署

  使用分支部署其实就是直接把某个分支下的一个指定目录下的文件直接部署到Pages服务器上,所以需要指定分支和目录。

指定分支

指定目录

  目录只能选择/root或者docs目录。如果选择/root只需要提交_site下的文件;如果选择/docs就需要将Jekyll生成站点文件的目标位置从_site改成docs,方法很简单,在_config.yml文件最后加上:

1
destination: docs

该方法需要提交生成后的站点文件,这也是我没有采用的原因。

使用Actions部署

选择Actions

  该方法其实和使用Jenkins部署是一个道理,他会通过一个脚本,生成要部署的文件。因为是生成的,自然也就不需要生成好提交上去。只需要提供生成脚本即可。而且脚本也不用自己编写,当选择使用Actions部署,下面就有提供现成的适用Jenkins的脚本。

选择脚本

配置脚本

确认提交脚本

  这时候你的代码中就会增加一个叫 .github/workflows/jekyll.yml文件,里面就是脚本,不需要任何修改即可使用,这个文件是直接在GitHub上添加的,为避免提交冲突,先拉取到本地,然后赶紧发布一篇博文看看吧。这个Actions部署需要时间,而且你还可以查看进度。

Actions

设置自己的域名

  剩下的就是设置域名了,这下面设置好域名,然后解析域名就可以了。

设置域名

总结

  好了,现在一个博客就搭建好了。我们总结一下:

1、选择一个喜欢的静态网站生成工具,如:Jekyll

2、创建GitHub仓库,仓库名字格式为:用户名或组织名.github.io

3、设置Pages部署方式。

4、设置自己的域名(可选,如果不设置你的域名就是用户名或组织名.github.io)。

本文由作者按照 CC BY 4.0 进行授权

第一篇博文——独白

git提交规范