2024年Windows下安装Jekyll环境并部署到Vercel
Windows 下安装 Jekyll 环境,将博客部署到 Vercel。

前言

Hexo 的博客虽然外观精美,主题和插件都比较多,但实在是太复杂,更换主题或者更新插件都容易出现错误,所以决定将博客更换为其他框架,最开始决定使用 Hugo,毕竟之前使用过,文档齐全并且速度也够快,但是想用的 Stack 主题没有返回顶部按钮,一些细节不喜欢,文章 Feature 图还得重新做,所以决定使用 Jekyll Chirpy,也图个新鲜。

基础环境安装

  1. 首先根据官网教程安装基础环境,就像 Hugo 下载可执行文件一样,链接在此:RubyInstaller

  2. 下载后使用默认设置安装即可,完成后在终端输入 ruby -vgem -v,出现版本号就代表环境安装成功了。

  3. 接下来安装 Jekyll,终端输入 gem install jekyll,等待安装完成。

  4. 输入 jekyll -v 检查是否安装成功。

新建站点

这里直接使用的是 Chirpy 主题的方法,文档链接:点此

首先使用 chirpy-starter 的模板新建一个仓库,我不使用 GitHub Pages 所以仓库名称就随便填写了。

将仓库拉到本地,然后在仓库跟目录执行下面的命令安装依赖:

1bundle

然后可以使用命令预览一下是否成功:

1bundle exec jekyll s

修改配置

_config.yml 中修改对应的配置,社交媒体配置对应的文件为 _data/contact.yml

依赖错误:tzinfo

Windows 下部署时,使用 bundle 安装依赖后不会安装 tzinfo,如果设置了时区,会报错,因此手动安装下面两个依赖:

1gem install tzinfo
2gem install tzinfo-data

然后在 Gemfile 文件中添加下面两行:

1gem 'tzinfo'
2gem "tzinfo-data", platforms: [:mingw, :mswin, :x64_mingw, :jruby]

修改 favicon

~/assets/img 下新建 favicons 文件夹,放入自己的 favicons 文件,可以在 favicon.io

创建自己的图标,下载解压后将所有文件放入对应文件夹,删除下面两个文件:

1about.txt
2site.webmanifest

新建文章

文章的 Front Matter 信息如下,详细的设置可以参考 Jekyll

1---
2title: TITLE
3date: YYYY-MM-DD HH:MM:SS +/-TTTT
4categories: [TOP_CATEGORIE, SUB_CATEGORIE]
5tags: [TAG]     # TAG names should always be lowercase
6permalink: 
7---

新建文章需要将其命名为 YYYY-MM-DD-TITLE.mdYYYY-MM-DD-TITLE.markdown 格式,如果想方便地新建,可以使用插件 Jekyll-Compose

Gemfile 文件添加一行内容:

1gem 'jekyll-compose', group: [:jekyll_plugins]

然后执行:

1bundle

输入 bundle exec jekyll help 可以查看帮助,一些常用命令:

1  draft      # Creates a new draft post with the given NAME
2  post       # Creates a new post with the given NAME
3  publish    # Moves a draft into the _posts directory and sets the date
4  unpublish  # Moves a post back into the _drafts directory
5  page       # Creates a new page with the given NAME
6  rename     # Moves a draft to a given NAME and sets the title
7  compose    # Creates a new file with the given NAME

这些是二级命令,具体的命令格式为 jekyll post 第一篇博客 ,这样就会在 _post/ 文件夹下新建一个名为 第一篇博客.md 的文件。

如果想自定义 Front Matter,可以在 _config.yml 中添加配置:

 1jekyll_compose:
 2  default_front_matter:
 3    drafts:
 4      description:
 5      image:
 6      category:
 7      tags:
 8      permalink:
 9    posts:
10      description:
11      image:
12      category:
13      tags:
14      permalink:

这个配置同样会添加 timetitle 行,具体可以自己设置。

迁移文章

Jekyll 要求文章名字中要有日期,但是 HexoHugo 不要求,这给迁移造成了一定的困难,因此使用 Python.md 文件重命名,选择 Front Matter 信息中 date 值前 10 个字符和 title 值作为新的名字,并将二者用 - 拼接,下面是代码:

 1import os
 2import re
 3import yaml
 4
 5def extract_frontmatter(content):
 6    """从文件内容中提取 YAML frontmatter"""
 7    match = re.search(r'(?s)^---.*?---', content)
 8    if match:
 9        frontmatter_str = match.group()
10        return yaml.safe_load(frontmatter_str[3:-3])
11    return {}
12
13def rename_files_based_on_frontmatter(folder_path):
14    for root, dirs, files in os.walk(folder_path):
15        for file in files:
16            if file.endswith('.md'):
17                file_path = os.path.join(root, file)
18                
19                with open(file_path, 'r', encoding='utf8') as f:
20                    content = f.read()
21                
22                frontmatter = extract_frontmatter(content)
23                
24                # 提取 date 和 title 字段
25                date = str(frontmatter.get('date', ''))  # 确保 date 是字符串
26                title = str(frontmatter.get('title', 'untitled')).replace('/', '-').replace('\\', '-')
27                
28                # 处理 date 字段
29                date = date.replace(':', '-')[:10]  # 用 - 替换 : 并截取前 10 个字符
30                
31                if date and title:
32                    new_file_name = f"{date}-{title}.md"
33                    new_file_path = os.path.join(root, new_file_name)
34                    
35                    if file_path != new_file_path:
36                        os.rename(file_path, new_file_path)
37                        print(f"Renamed: {file_path} -> {new_file_path}")
38                else:
39                    print(f"Skipping file {file_path}: Invalid date or title")
40
41# 修改文件夹路径
42folder_path = r"D:\GitHub\hexo-blog\source\_posts"
43rename_files_based_on_frontmatter(folder_path)

而文件中 Front MatterName 的修改可以参考之前的文章:Hugo 文章转 Hexo

部署网站

接下来可以将站点部署到 Vercel,直接新建项目导入仓库即可完成部署。

总结

虽然 Jekyll 相比 Hexo 依赖的耦合低一点,但是仍比不上 Hugo 只需要安装一个二进制文件简单,建议用 Hugo

Jekyll 会把部分代码块内的代码解析,导致出现问题,所以放弃使用。

卸载

1gem install jekyll

完成后软件里卸载 Ruby 即可

参考


最后修改于 2024-08-08