跳转到内容
搜索文档

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。要开始使用其他框架,请参阅框架指南列表

这篇文档对您有帮助吗?