引
既然本博客使用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为文件后缀,可以为md
、markdown
或者textile
。
2、只支持两种文件格式markdown
和textile
,我比较喜欢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/)找到自己满意的主题。
直接下载解压,目录结果如下:
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”,创建一个新的代码仓库。
这里需要注意,代码仓库的名字的格式必须是
用户名或组织名.github.io
,格式不对也能发布,但是博文的访问地址、博文里面的图片等的访问路径都会很麻烦,有兴趣的可以试试。
有了仓库就赶紧把你的博客系统提交上去吧。
部署到Pages
这里需要讲一下Pages的部署,Pages部署有两种方式:默认的方式是从分支部署;新的方式是使用Actions,目前处于Beta
阶段,这个方式网上资料少了些,也是我选择的方式。
从分支部署
使用分支部署其实就是直接把某个分支下的一个指定目录下的文件直接部署到Pages服务器上,所以需要指定分支和目录。
目录只能选择/root
或者docs
目录。如果选择/root
只需要提交_site
下的文件;如果选择/docs
就需要将Jekyll
生成站点文件的目标位置从_site
改成docs
,方法很简单,在_config.yml
文件最后加上:
1
destination: docs
该方法需要提交生成后的站点文件,这也是我没有采用的原因。
使用Actions部署
该方法其实和使用Jenkins
部署是一个道理,他会通过一个脚本,生成要部署的文件。因为是生成的,自然也就不需要生成好提交上去。只需要提供生成脚本即可。而且脚本也不用自己编写,当选择使用Actions部署,下面就有提供现成的适用Jenkins
的脚本。
这时候你的代码中就会增加一个叫 .github/workflows/jekyll.yml
文件,里面就是脚本,不需要任何修改即可使用,这个文件是直接在GitHub上添加的,为避免提交冲突,先拉取到本地,然后赶紧发布一篇博文看看吧。这个Actions部署需要时间,而且你还可以查看进度。
设置自己的域名
剩下的就是设置域名了,这下面设置好域名,然后解析域名就可以了。
总结
好了,现在一个博客就搭建好了。我们总结一下:
1、选择一个喜欢的静态网站生成工具,如:Jekyll
。
2、创建GitHub仓库,仓库名字格式为:用户名或组织名.github.io
。
3、设置Pages部署方式。
4、设置自己的域名(可选,如果不设置你的域名就是用户名或组织名.github.io
)。