技术问题 Jekyll

Jekyll 本地调试博客遇到的问题及解决办法

Posted by YEY on March 1, 2020

引言

在基于 Hux 和 BYQiu 的教程搭建完 gitpages 博客后，为了提高效率，我们可以利用 jekyll 在本地调试博客，过程中遇到了一些问题，在此记录分享解决方案。

1. Jekyll 安装

首先，我们进入 jekyll官网 会发现 jekyll 提供了一段快速上手的实例代码：

1
2
3
4
5
6

~ $ gem install jekyll bundler
~ $ jekyll new my-awesome-site
~ $ cd my-awesome-site
~/my-awesome-site $ bundle install
~/my-awesome-site $ bundle exec jekyll serve
# => 打开浏览器 http://localhost:4000

这段命令在本地创建了一个默认的 jekll 服务器，我们通过浏览器访问本机的 4000 端口即可对网站进行预览。

首先，我们安装 jekyll 和 jekyll bundler：

1
2

$ gem install jekyll
$ gem install jekyll bundler

2. 本地调试

然后，我们进入 gitpages 所在的仓库，创建本地服务器：

1
2

~ $ cd username.github.io
~/username.github.io$ jekyll s

3. 发现问题

发现终端报出一些 Warning 信息：

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46

[andy@12:22:17] Andy-TK.github.io$ jekyll s
Configuration file: /Users/andy/Documents/GitHub/Andy-TK.github.io/_config.yml
       Deprecation: You appear to have pagination turned on, but you haven’t included the `jekyll-paginate` gem. Ensure you have `plugins: [jekyll-paginate]` in your configuration file.
            Source: /Users/andy/Documents/GitHub/Andy-TK.github.io
       Destination: /Users/andy/Documents/GitHub/Andy-TK.github.io/_site
 Incremental build: disabled. Enable with --incremental
      Generating... 
    Liquid Warning: Liquid syntax error (line 145): Unexpected character { in "tag[1].size > {{site.featured-condition-size}}" in /_layouts/post.html
    Liquid Warning: Liquid syntax error (line 145): Unexpected character { in "tag[1].size > {{site.featured-condition-size}}" in /_layouts/post.html
    Liquid Warning: Liquid syntax error (line 145): Unexpected character { in "tag[1].size > {{site.featured-condition-size}}" in /_layouts/post.html
    Liquid Warning: Liquid syntax error (line 145): Unexpected character { in "tag[1].size > {{site.featured-condition-size}}" in /_layouts/post.html
    Liquid Warning: Liquid syntax error (line 145): Unexpected character { in "tag[1].size > {{site.featured-condition-size}}" in /_layouts/post.html
    Liquid Warning: Liquid syntax error (line 145): Unexpected character { in "tag[1].size > {{site.featured-condition-size}}" in /_layouts/post.html
    Liquid Warning: Liquid syntax error (line 145): Unexpected character { in "tag[1].size > {{site.featured-condition-size}}" in /_layouts/post.html
    Liquid Warning: Liquid syntax error (line 145): Unexpected character { in "tag[1].size > {{site.featured-condition-size}}" in /_layouts/post.html
    Liquid Warning: Liquid syntax error (line 145): Unexpected character { in "tag[1].size > {{site.featured-condition-size}}" in /_layouts/post.html
    Liquid Warning: Liquid syntax error (line 145): Unexpected character { in "tag[1].size > {{site.featured-condition-size}}" in /_layouts/post.html
    Liquid Warning: Liquid syntax error (line 145): Unexpected character { in "tag[1].size > {{site.featured-condition-size}}" in /_layouts/post.html
    Liquid Warning: Liquid syntax error (line 145): Unexpected character { in "tag[1].size > {{site.featured-condition-size}}" in /_layouts/post.html
    Liquid Warning: Liquid syntax error (line 145): Unexpected character { in "tag[1].size > {{site.featured-condition-size}}" in /_layouts/post.html
    Liquid Warning: Liquid syntax error (line 145): Unexpected character { in "tag[1].size > {{site.featured-condition-size}}" in /_layouts/post.html
    Liquid Warning: Liquid syntax error (line 145): Unexpected character { in "tag[1].size > {{site.featured-condition-size}}" in /_layouts/post.html
    Liquid Warning: Liquid syntax error (line 145): Unexpected character { in "tag[1].size > {{site.featured-condition-size}}" in /_layouts/post.html
    Liquid Warning: Liquid syntax error (line 145): Unexpected character { in "tag[1].size > {{site.featured-condition-size}}" in /_layouts/post.html
    Liquid Warning: Liquid syntax error (line 145): Unexpected character { in "tag[1].size > {{site.featured-condition-size}}" in /_layouts/post.html
    Liquid Warning: Liquid syntax error (line 145): Unexpected character { in "tag[1].size > {{site.featured-condition-size}}" in /_layouts/post.html
    Liquid Warning: Liquid syntax error (line 145): Unexpected character { in "tag[1].size > {{site.featured-condition-size}}" in /_layouts/post.html
    Liquid Warning: Liquid syntax error (line 145): Unexpected character { in "tag[1].size > {{site.featured-condition-size}}" in /_layouts/post.html
    Liquid Warning: Liquid syntax error (line 145): Unexpected character { in "tag[1].size > {{site.featured-condition-size}}" in /_layouts/post.html
    Liquid Warning: Liquid syntax error (line 145): Unexpected character { in "tag[1].size > {{site.featured-condition-size}}" in /_layouts/post.html
    Liquid Warning: Liquid syntax error (line 145): Unexpected character { in "tag[1].size > {{site.featured-condition-size}}" in /_layouts/post.html
    Liquid Warning: Liquid syntax error (line 145): Unexpected character { in "tag[1].size > {{site.featured-condition-size}}" in /_layouts/post.html
    Liquid Warning: Liquid syntax error (line 145): Unexpected character { in "tag[1].size > {{site.featured-condition-size}}" in /_layouts/post.html
    Liquid Warning: Liquid syntax error (line 145): Unexpected character { in "tag[1].size > {{site.featured-condition-size}}" in /_layouts/post.html
    Liquid Warning: Liquid syntax error (line 145): Unexpected character { in "tag[1].size > {{site.featured-condition-size}}" in /_layouts/post.html
    Liquid Warning: Liquid syntax error (line 145): Unexpected character { in "tag[1].size > {{site.featured-condition-size}}" in /_layouts/post.html
    Liquid Warning: Liquid syntax error (line 145): Unexpected character { in "tag[1].size > {{site.featured-condition-size}}" in /_layouts/post.html
    Liquid Warning: Liquid syntax error (line 145): Unexpected character { in "tag[1].size > {{site.featured-condition-size}}" in /_layouts/post.html
    Liquid Warning: Liquid syntax error (line 38): Unexpected character { in "tag[1].size > {{site.featured-condition-size}}" in /_layouts/page.html
    Liquid Warning: Liquid syntax error (line 87): Unexpected character { in "tag[1].size > {{site.featured-condition-size}}" in /_layouts/page.html
    Liquid Warning: Liquid syntax error (line 38): Unexpected character { in "tag[1].size > {{site.featured-condition-size}}" in /_layouts/page.html
    Liquid Warning: Liquid syntax error (line 87): Unexpected character { in "tag[1].size > {{site.featured-condition-size}}" in /_layouts/page.html
                    done in 0.304 seconds.
 Auto-regeneration: enabled for '/Users/andy/Documents/GitHub/Andy-TK.github.io'
    Server address: http://127.0.0.1:4000/
  Server running... press ctrl-c to stop.

打开浏览器，进入 http://127.0.0.1:4000/ 发现博客主页显示异常，看不到文章列表：

markdown

4. 解决办法

通过查看报错信息，发现主要存在两个问题：

  • 首先是博客仓库根目录下的配置文件 _config.yml 缺少 jekyll-paginate 模块。

  • 另外，_layouts 文件夹下的 post.html 和 page.html 会报类似如下错误信息：

    1
2
3

    Liquid Warning: Liquid syntax error (line 145): 
Unexpected character { in "tag[1].size > {{site.featured-condition-size}}" 
in /_layouts/post.html

4.1 修改 _config.yml

首先，我们需要先安装 jekyll-paginate 模块，打开终端，输入以下命令，按照提示输入系统管理员密码完成安装：

1

~$ sudo gem install jekyll-paginate

然后，我们进入博客仓库的根目录文件夹，找到配置文件 _config.yml：

markdown

打开 _config.yml，在里面添加一行代码：

1

plugins: [jekyll-paginate]

4.2 修改 post.html 和 page.html

然后，我们进入 _layouts 文件夹，找到 post.html 和 page.html：

markdown

根据提示信息，我们定位到 post.html 中的第 145 行，以及 page.html 中的第 38 和 87 行，找到下面的代码，将其中的双层花括号删除：

1

tag[1].size > {{site.featured-condition-size}}

改为：

1

tag[1].size > site.featured-condition-size

5. 最终效果

重新启动 jekyll 服务器，没有发现报错信息：

1
2
3
4
5
6
7
8
9
10

[andy@13:34:19] Andy-TK.github.io$ jekyll s
Configuration file: /Users/andy/Documents/GitHub/Andy-TK.github.io/_config.yml
            Source: /Users/andy/Documents/GitHub/Andy-TK.github.io
       Destination: /Users/andy/Documents/GitHub/Andy-TK.github.io/_site
 Incremental build: disabled. Enable with --incremental
      Generating... 
                    done in 1.611 seconds.
 Auto-regeneration: enabled for '/Users/andy/Documents/GitHub/Andy-TK.github.io'
    Server address: http://127.0.0.1:4000/
  Server running... press ctrl-c to stop.

打开浏览器，进入 http://127.0.0.1:4000/ ，主页文章可以正常显示：

markdown

点击文章，即可查看预览效果：

markdown

后记

另外，在写这篇博客的过程中还碰到了一个问题：gitpages 在解析代码块时无法显示花括号。

原因是 Jekyll 或 Hexo 在解析 {{ }} 时将其当成了变量，所以当类似 {{message}} 这种出现在文章中时，将无法显示。

具体解决方案可以查看 hexo issue 1079，将 {{ }} 以转码后的形式书写，或者使用 raw block。

知识共享许可协议本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。 欢迎转载，并请注明来自：YEY 的博客 同时保持文章内容的完整和以上声明信息！
CATALOG
    FEATURED TAGS
    随笔 课程笔记 统计机器学习 COMP90051 学习笔记 自然语言处理 COMP90042 PyTorch 人工智能伦理 COMP90087 数据科学多元统计学 MAST90138 AI 自动规划 COMP90054 数据分析 计算统计学与数据科学 MAST90083 高级数据库系统 COMP90050 统计建模 MAST90139 读书 📚 MySQL 学习索引 Hive 技术问题 Jekyll Workshop
    FRIENDS