Preact

Preact ↗ 是一个流行的开源框架，用于构建现代 Web 应用。由于与 React 共享相同的 API 和组件模型，Preact 也可作为 React 的轻量级替代方案。

在本指南中，你将创建新的 Preact 应用并使用 Cloudflare Pages 部署。你将使用 create-preact ↗，一个轻量级项目脚手架工具，在数秒内设置新的 Preact 应用。

设置新项目

在终端运行 npm init ↗ 命令创建新项目，指定标题：

npm init preact
cd your-project-name

继续之前

所有框架指南都假定你已具备 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（开始设置）。
在 Set up builds and deployments（设置构建和部署） 部分，提供以下信息：

配置选项	值
Production branch（生产分支）	`main`
Build command（构建命令）	`npm run build`
Build directory（构建目录）	`dist`

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

完成配置后，选择 Save and Deploy（保存并部署）。

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

部署站点后，你将在 *.pages.dev 上获得项目的唯一子域名。

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

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

了解更多

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