Elder.js

Elder.js ↗ 是一个以 SEO 为重点的框架，用于通过 SvelteKit 构建静态站点。

在本指南中，你将创建新的 Elder.js 应用并使用 Cloudflare Pages 部署。

设置新项目

使用 npx degit Elderjs/template ↗ 创建新项目，指定项目名称：

npx degit Elderjs/template elderjs-app
cd elderjs-app

Elder.js 模板包含若干页面和示例，展示如何构建静态站点；但仅生成项目后，它就已经可以部署到 Cloudflare Pages。

继续之前

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

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

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

创建 GitHub 仓库

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

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

使用 Cloudflare Pages 部署

要将站点部署到 Pages：

在 Cloudflare 仪表板中，前往 Workers & Pages 页面。
Go to Workers & Pages ↗
选择 Create application（创建应用程序）。
选择 Pages 选项卡。
选择 Import an existing Git repository（导入现有 Git 仓库）。
选择你创建的新 GitHub 仓库，然后选择 Begin setup（开始设置）。
在 Build settings（构建设置） 部分，选择 Elder.js 作为 Framework preset（框架预设）。你的选择将提供以下信息：

Configuration option	Value
Production branch	`main`
Build command	`npm run build`
Build directory	`public`

可选：你可以自定义 **Project name（项目名称）**字段。它默认为 GitHub 仓库名称，但不必一致。Project name（项目名称） 值将分配为你的 *.pages.dev 子域名。

完成设置

完成配置后，点击 **Save and Deploy（保存并部署）**按钮。

你将看到首次部署流水线正在进行。Pages 安装所有依赖并按指定方式构建项目。

每次推送新提交时，Cloudflare Pages 都会自动重新构建并部署项目。

此外，你还可以使用预览部署，对 pull request 重复构建和部署流程。这样可以在部署到生产环境之前，通过真实 URL 预览项目更改。

了解更多

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