跳转到内容
搜索文档

Jekyll

最后更新 查看 MarkdownAgent 设置

Jekyll ↗ 是基于 Markdown 和 Liquid 模板的开源网站创建框架。在本指南中,你将创建新的 Jekyll 应用并使用 Cloudflare Pages 部署。你将使用 jekyll CLI 创建新的 Jekyll 站点。

安装 Jekyll

Jekyll 用 Ruby 编写,意味着你需要可用的 Ruby 安装(如 rbenv)来安装 Jekyll。

要在计算机上安装 Ruby,请遵循 rbenv 安装说明 ↗,并在终端运行 rbenv 命令选择较新的 Ruby 版本。安装的 Ruby 版本也将用于配置应用的 Pages 部署。

rbenv install <RUBY_VERSION> # For example, 3.1.3

安装 Ruby 后,可以安装 jekyll Ruby gem:

gem install jekyll

创建新项目

安装 Jekyll 后,可在终端运行 jekyll new 创建新项目:

jekyll new my-jekyll-site

在新创建的文件夹中创建基础 index.html 为站点添加内容:

<!doctype html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Hello from Cloudflare Pages</title>
	</head>
	<body>
		<h1>Hello from Cloudflare Pages</h1>
	</body>
</html>

可选:若希望从出色的样式默认值开始,可为新 Jekyll 站点使用主题。例如,minimal-mistakes ↗ 主题有 「从 jekyll new 开始」 ↗ 部分,帮助你将主题添加到新站点。

继续之前

所有框架指南都假定你已具备 Git ↗ 的基础知识。如果你是 Git 新手,请参阅这份精简 Git 手册 ↗,了解如何在本地设置 Git。

如果你使用 SSH 克隆,则必须在每台用于向 GitHub 推送或拉取的计算机上生成 SSH 密钥 ↗。

更多信息请参阅 GitHub 文档 ↗和 Git 文档 ↗。

创建 GitHub 仓库

访问 repo.new ↗ 创建新的 GitHub 仓库。创建新仓库后,进入新创建的项目目录,在终端中运行以下命令,准备并将本地应用推送到 GitHub:

git remote add origin https://github.com/<your-gh-username>/<repository-name>
git branch -M main
git push -u origin main

若要将现有 Jekyll 项目迁移到 Pages,请确认 Gemfile 已作为代码库的一部分提交。Pages 将查看 Gemfile 并运行 bundle install 安装项目所需依赖,包括 jekyll gem。

使用 Cloudflare Pages 部署

要将站点部署到 Pages:

  1. 在 Cloudflare 仪表板中,前往 Workers & Pages 页面。

    Go to Workers & Pages ↗
  2. 选择 Create application(创建应用程序)。

  3. 选择 Pages 选项卡。

  4. 选择 Import an existing Git repository(导入现有 Git 仓库)。

  5. 选择你创建的新 GitHub 仓库,然后选择 Begin setup(开始设置)。

  6. 在 Set up builds and deployments(设置构建和部署) 部分,提供以下信息:

Configuration optionValue
Production branchmain
Build commandjekyll build
Build directory_site

添加与本地使用的 Ruby 版本匹配的环境变量。在预览和生产部署中将其设为 RUBY_VERSION。以下以 3.1.3 为例:

环境变量 值
RUBY_VERSION 3.1.3

配置站点后,即可开始首次部署。你将看到 Cloudflare Pages 安装 jekyll、项目依赖并构建站点,然后完成部署。

部署站点后,你将在 *.pages.dev 上获得项目的唯一子域名。 每次向 Jekyll 提交新代码时,Cloudflare Pages 都会自动重新构建并部署项目。你还可以在新 pull request 上获得预览部署,在部署到生产环境之前预览更改效果。

了解更多

完成本指南后,你已成功将 Jekyll 站点部署到 Cloudflare Pages。要开始使用其他框架,请参阅框架指南列表。

这篇文档对您有帮助吗?