简述:

本文描述的是，使用Jekyll框架，搭配Chirpy主题，在自建腾讯云服务器上进行的博客搭建全流程。

搭建流程中省略的前提:

1. 自备一台服务器，且已开启ssh登录。
2. 服务器中已经搭建好nginx。
3. 本地安装好jekyll框架。

初始化Jekyll博客项目和Chirpy主题

1. 安装Jekyll

可以参照Jekyll官网和中文翻译文档进行搭建。

2. 新建Jekyll项目

使用命令行工具，运行新建项目命令:

1

   $ jekyll new BlogDemo

运行成功后，会在当前文件夹中生成名字为BlogDemo的文件夹，该文件夹即为项目的文件夹。

当前命令和下文的Chirpy安装等过程中，可能会由于网络原因安装过慢，或者安装失败，需要添加代理后重新运行。

3. 使用Chirpy主题

1. 安装并使用Chirpy

   ① 参照Chirpy文档，使用RubyGems的方式安装主题。

   首先在项目文件夹下找到Gemfile文件，并将gem "jekyll-theme-chirpy"添加到文件中。

   ② 打开项目中的_config.yml文件，并将其中默认的minima主题改为jekyll-theme-chirpy。

   ③ 执行安装程序

   1

   $ bundle

   ④ 打开Chirpy主题所在文件夹，并将其中的内容复制到项目目录下。

   打开主题文件夹:

   1	$ cd "$(bundle info --path jekyll-theme-chirpy)"

   根据Chirpy文档，需要复制的文件目录包括:

   1 2 3 4 5 6

   . ├── _data ├── _plugins ├── _tabs ├── _config.yml └── index.html

   但是，为了可以自定义页面样式等内容，我还将_sass、_layouts、_incloudes等文件复制了进来。

   注意，Chirpy文档提到，_config.yml会跟项目原本的配置文件冲突，需要将两个文件内容进行合并，以下是文档原文:

   ⚠️ 留意重叠的文件！

   如果您的网站是通过命令 jekyll new 创建的，那么站点的根目录会存在文件 index.markdown 和 about.markdown。 请务必删除它们, 否则在网站构建后将覆盖主题的 index.html 和 _tabs/about.html，引起空白或错乱的页面出现。

   操作完成后，整个项目的项目目录会变为:

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

   . ├── 404.html ├── Gemfile ├── Gemfile.lock ├── _config.yml ├── _data ├── _includes ├── _layouts ├── _plugins ├── _posts ├── _sass ├── _site ├── _tabs ├── assets └── index.html

   其中，_site文件夹为打包好的静态网站，会在jekyll build或者jekyll serve后生成。

2. 运行程序并预览

   主题安装完毕后，运行jekyll开发服务器，预览结果。

   1	$ jekyll serve

根据需要，修改主题内容和样式

默认的网页样式往往满足不了我们的需求，需要进行一定程度的修改，下面是一些常用的修改内容。

1. 修改_config.yml以修改网页内容

我们可以通过修改_config.yml，来对网站进行一些内容设置。如: 修改网站名称、修改网站描述、修改联系邮箱等。对于_config.yml的修改可以参考官方文档及文件_config.yml中的注释。

2. 修改侧边栏背景颜色

如果需要修改某一部分的颜色，我们可以先在网页结构中，找到该颜色对应的变量名称，然后在代码中搜索并进行修改。以侧边栏背景颜色为例:

1. 首先找到该颜色对应的变量名:--sidebar-bg

2. 在项目中搜索该名字，会发现有两个样式文件中，出现了对该颜色的定义，分别是light-typography.scss和dark-typography.scss，其中一个是黑暗模式下的样式，一个是明亮模式下的样式。我们修改明亮模式下的颜色如下:

   刷新页面，查看修改后的效果:

3. 修改页面语言

Chirpy自带多语言，打开_data/_locals文件夹发现，里面包含zh-CH.yml和en.yml文件，说明支持中文和英文两种本地化语言。

打开_config.yml文件，找到lang，将其值改为zh-CN。

修改保存后，重启开发服务器，查看效果。

启动开发服务器后，修改_config.yml不会自动更新网页，需要我们重启服务器查看效果。

4. 修改favicon

favicon由用户自己制作并上传。推荐一个网站，可以在这里制作favicon。Favicon Generator for perfect icons on all browsers (realfavicongenerator.net)

制作完成后，需要将文件拖到assets/img/favicons/文件夹下。无需更改其他配置，重启服务器查看效果。

正式开始写文章

编写的博客需要存放在_posts文件夹中，jekyll支持多种格式的博文，本文以markdown文章为例。具体内容请参考中文文档。

1. 创建文章文件，并对文件命名

文件命名必须遵守年-月-日-标题.MARKUP的格式，其中MARKUP为文件格式后缀，markdown格式的后缀为md。我们创建一个名为2021-09-19-hello-world.md的文件。

2. YAML标记

每个文章的开头需要使用YAML进行信息的标注，详情参考中文文档。

下面是简单示例：

1
2
3
4
5
6
7

   ---
   title:  Blog搭建
   date:   2021-09-29 12:00:00 +0800
   categories: [blog, jekyll]
   tags: [blog, jekyll]
   author: ponng
   ---

3. 图片/文件引用

图片/文件的引用可以参考中文文档。

我们可以在项目的assets文件夹下，为每篇blog创建一个资源文件夹。如: 创建文件夹assets/img/blog_img/helloworld，用来存放第一篇文章内的图片。

在文章内，我们可以通过site.url获取到项目根目录，那么获取该示例图片的路径为: {{ site.url }}/assets/img/blog_img/helloworld/hello_world.png 。

最终，markdown文件内容为:

1
2
3
4
5
6
7
8
9
10
11
12

   ---
   title:  Blog搭建
   date:   2021-09-29 12:00:00 +0800
   categories: [blog, jekyll]
   tags: [blog, jekyll]
   author: ponng
   ---
   
   # hello world
   
   ![示例图片]({{ site.url }}/assets/img/blog_img/helloworld/hello_world.png)
   

重启服务器，预览文章效果。

上线

Jekyll项目可以发布到Github pages，也可以发布到独立服务器。本文最终发布到云服务器，并通过域名进行访问。

前提:

如果发布到云服务器并通过域名进行访问，需要您拥有一台云服务器，并且成功设置了域名解析。

此外，以下内容省略了搭建Nginx的具体流程，并简化了配置文件的规则。

1. 打包网站

本地预览结束后，运行打包命令完成静态网站的打包。打包命令为:

1

   $ JEKYLL_ENV=production bundle exec jekyll

最终得到的网站文件夹为_site。

2. 上传到服务器

将打包好的_site文件夹上传到服务器中。可以通过FTP或者其他命令进行上传。本文以SCP为例:

1

   $ scp -r ./_site username@ip:/home/blog

其中，username 、ip、 路径等根据自身需要设置。

3. 设置Nginx代理

本文设置了简单的代理规则，如下:

1
2
3
4
5
6
7

   server {
     listen 80;
     server_name your_url;
   
     root /home/blog;
     index index.html;
   }

其中，server_name填写为您的域名，root设置为您存放的地址。

通过$ nginx -s reload重新加载Nginx规则，访问域名查看网站内容。