快速入门指南

页面摘要： 通过 12 个步骤从零开始构建并部署一个 Strapi 项目：使用 create-strapi@latest 创建本地项目，使用内容类型构建器定义集合类型，将项目推送到 GitHub 并从 Cloud 仪表板部署到 Strapi Cloud，然后通过内容管理器添加内容。

Strapi 提供了很大的灵活性。无论你是想快速上手并迅速看到最终结果，还是想更深入地了解产品，我们都能满足你。在本教程中，我们将采用 DIY 方式，从零开始构建一个项目和内容结构，然后将你的项目部署到 Strapi Cloud，以便从中添加数据。

A 部分：使用 Strapi 创建新项目

我们将首先在终端中运行命令在你的机器上创建一个新 Strapi 项目，然后注册我们的第一个本地管理员用户。

点击可切换的内容以阅读更多说明，按以下步骤操作。

步骤 1：运行安装脚本并创建 Strapi Cloud 账户

1. 在终端中运行以下命令：

   NPM

   npx create-strapi@latest my-strapi-project
   

2. 终端会提示你登录或注册。完成后，（Growth 计划） 方案的 30 天试用将自动应用到你的项目。出于本教程的目的，请确保在终端中选择了 Login/Sign up（登录/注册），或使用方向键选择它并按回车。

3. 在打开的新浏览器标签页中，确保确认码与终端中的一致，然后点击 Confirm（确认）。

4. 仍在浏览器标签页中，点击 Continue with GitHub（使用 GitHub 继续）。如果你当前浏览器会话尚未登录 GitHub，可能会被重定向到 GitHub 登录页面。

5. 登录后，浏览器会显示 "Congratulations, you're all set!"（恭喜，一切就绪！）消息，你可以安全地关闭浏览器标签页并返回终端。

   

6. 终端现在会问你几个问题。按 Enter 接受所有问题的默认答案。

   

如你将在终端中看到的，你的项目正在本地构建。

步骤 2：注册第一个本地管理员用户

安装完成后，你需要启动服务器。在终端中，键入或复制粘贴以下内容：

cd my-strapi-project && npm run develop

你的浏览器会自动打开一个新标签页。

通过填写表单，你创建了自己的账户。完成后，你将成为此 Strapi 应用的第一个管理员用户。欢迎加入，指挥官！

你现在可以访问 管理面板：

B 部分：使用内容类型构建器构建内容结构

安装脚本刚刚创建了一个空项目。我们现在将引导你创建一个小型餐厅目录。

本地 Strapi 项目的管理面板运行在 http://localhost:1337/admin。你将在这里花费大部分时间来创建和更新内容。

首先我们将为你的内容构建内容结构。这只能在开发模式下进行，而开发模式是本地创建项目的默认模式。

内容类型构建器帮助你创建内容结构。使用 Strapi 创建空项目时，这里就是派对开始的地方！

你的餐厅目录最终会包含许多餐厅，因此我们需要创建一个 "Restaurant" 集合类型。然后我们可以描述在添加新餐厅条目时要显示的字段：

1. 在管理面板左侧的主导航中，前往 内容类型构建器。
2. 点击 Collection types（集合类型）旁边的 加号图标。
3. 在 Display name（显示名称）中输入 Restaurant，然后点击 Continue（继续）。
4. 点击 Add new field（添加新字段）按钮，并选择 Text（文本）字段。
5. 在 Name（名称）字段中输入 Name。
6. 切换到 Advanced Settings（高级设置）标签页，并勾选 Required field（必填字段）和 Unique field（唯一字段）设置。
7. 点击 Add another field（添加另一个字段）。
8. 在列表中选择 Rich text (Blocks)（富文本（块））字段。
9. 在 Name 字段下输入 Description，然后点击 Finish（完成）。
10. 最后，点击 Save（保存）并等待 Strapi 重启。

Strapi 重启后，"Restaurant" 会列在导航中的 Content Manager（内容管理器）> Collection types（集合类型） 下。哇，你刚刚创建了你的第一个内容类型！太酷了，我们现在再创建一个，只是为了乐趣。

如果我们的餐厅目录有一些分类，会更有条理。让我们创建一个 "Category" 集合类型：

1. 在主导航中前往 内容类型构建器。
2. 点击 Collection types 旁边的 加号图标。
3. 在 Display name 中输入 Category，然后点击 Continue。
4. 点击 Add new field 按钮，并选择 Text 字段。
5. 在 Name 字段中输入 Name。
6. 切换到 Advanced Settings 标签页，并勾选 Required field 和 Unique field 设置。
7. 点击 Add another field。
8. 选择 Relation（关系）字段。
9. 在中间，选择代表 "many-to-many"（多对多）的图标 。
10. 在右侧，点击 Category 下拉菜单并在列表中选择 Restaurant。文本应显示为 Categories has and belongs to many Restaurants（分类与多个餐厅存在多对多关系）。

11. 最后，点击 Finish，然后点击 Save 按钮，并等待 Strapi 重启。

C 部分：部署到 Strapi Cloud

既然你漂亮的第一个 Strapi 项目已在本地运行，是时候让全世界看到它的实时状态了！托管你的项目最直接的方式是使用 Strapi Cloud。

我们建议从 Strapi Cloud 仪表板 部署。本指南将引导你将本地项目推送到 GitHub，然后从仪表板创建并部署 Strapi Cloud 项目。

步骤 5：将你的项目推送到 GitHub

如果你的本地 Strapi 服务器仍在运行，请按 Ctrl-C 停止它。

从仪表板部署需要你的项目托管在 GitHub 仓库上。像对其他任何代码仓库一样，将你的本地 Strapi 项目推送到 GitHub（如有需要，请参阅下面的附加说明）。

将你的 Strapi 项目代码推送到 GitHub 的步骤：

1. 在终端中，确保你位于所创建的 Strapi 项目所在文件夹。
2. 运行 git init 命令为这个文件夹初始化 git。
3. 运行 git add . 命令将所有已修改文件添加到 git 索引。
4. 运行 git commit -m "Initial commit" 命令提交所有更改。
5. 登录你的 GitHub 账户并创建新仓库。为新仓库命名，例如 my-strapi-project，并记住该名称。
6. 回到终端，将本地仓库推送到 GitHub：

a. 运行类似下面的命令：git remote add origin git@github.com:yourname/my-strapi-project.git，请将 yourname 替换为你的 GitHub 个人资料名，将 my-strapi-project 替换为第 5 步中实际使用的名称。

b. 运行 git push --set-upstream origin main 命令，最终将提交推送到你的 GitHub 仓库。

更多关于在命令行使用 git 的信息，请参阅官方 GitHub 文档。

步骤 6：创建并部署你的 Strapi Cloud 项目

既然你的项目已托管在 GitHub 上，让我们从仪表板创建并部署你的 Strapi Cloud 项目：

1. 前往 Strapi Cloud 登录页面，使用 GitHub、Google、GitLab 或一次性密码登录。
2. 在 Projects（项目）页面，点击 Create project（创建项目）。
3. 选择一个方案并连接你刚使用的 GitHub 账户。从列表中选择新创建的仓库。
4. 填写你的项目设置（显示名称、分支、区域）并完成订阅步骤。
5. 确认项目创建。Strapi Cloud 会将你重定向到你的项目仪表板，你可以在那里关注首次部署。

有关详细说明和截图，请参阅 使用 Cloud 仪表板部署项目 指南。

部署完成后，点击右上角的 Visit app（访问应用）按钮以访问你已部署的 Strapi 项目。

D 部分：使用内容管理器向你的 Strapi Cloud 项目添加内容

既然我们已经创建了一个包含 2 个集合类型（"Restaurant" 和 "Category"）的基础内容结构，并将你的项目部署到了 Strapi Cloud，让我们使用 Cloud 通过创建新条目来实际添加内容。

步骤 7：登录你的新 Strapi Cloud 项目的管理面板

既然你的 Strapi Cloud 项目已创建，让我们登录该项目：

1. 从你的 Strapi Cloud 仪表板 中，点击 my-strapi-project 项目。
2. 点击 Visit app 按钮。
3. 在打开的新页面中，填写表单以创建此 Strapi Cloud 项目的第一个管理员用户。

登录我们的第一个 Strapi Cloud 项目后，我们现在将从那里添加数据。

步骤 8：为 "Restaurant" 集合类型创建一个条目

1. 在导航中前往 Content Manager（内容管理器）> Collection types（集合类型）- Restaurant。
2. 点击 Create new entry（创建新条目）。
3. 在 Name 字段中输入你最喜欢的本地餐厅名称。假设是 Biscotte Restaurant。
4. 在 Description 字段中，写几句关于它的描述。如果缺乏灵感，可以使用 Welcome to Biscotte restaurant! Restaurant Biscotte offers a cuisine based on fresh, quality products, often local, organic when possible, and always produced by passionate producers.
5. 点击 Save。

该餐厅现在列在 Content Manager 的 Collection types - Restaurant 视图中。

步骤 9：添加分类

让我们前往 Content Manager > Collection types - Category 并创建 2 个分类：

1. 点击 Create new entry。
2. 在 Name 字段中输入 French Food。
3. 点击 Save。
4. 返回 Collection types - Category，然后再次点击 Create new entry。
5. 在 Name 字段中输入 Brunch，然后点击 Save。

"French Food" 和 "Brunch" 分类现在作为草稿列在 Content Manager 的 Collection types - Category 视图中。

现在，我们将为一个餐厅添加一个分类：

1. 在导航中前往 Content Manager > Collection types - Restaurant，并点击 "Biscotte Restaurant"。
2. 在页面底部的 Categories（分类）下拉列表中，选择 "French Food"。滚动回页面顶部并点击 Save。

步骤 10：设置角色与权限

我们刚刚添加了一个餐厅和 2 个分类。现在我们有足够的内容可供消费（双关语）。但首先，我们需要确保内容可以通过 API 公开访问：

1. 点击主导航底部的 _ Settings（设置）_。
2. 在 Users & Permissions Plugin（用户与权限插件） 下，选择 Roles。
3. 点击 Public（公共）角色。
4. 在 Permissions（权限）下向下滚动。
5. 在 Permissions 标签页中，找到 Restaurant 并点击它。
6. 点击 find 和 findOne 旁边的复选框。
7. 对 Category 重复：点击 find 和 findOne 旁边的复选框。
8. 最后，点击页面顶部的 Save。

步骤 11：发布内容

默认情况下，你创建的任何内容都保存为草稿。让我们发布我们的分类和餐厅。

首先，导航到 Content Manager > Collection types - Category。从那里：

1. 点击 "Brunch" 条目。
2. 在下一个屏幕上，点击 Publish（发布）。

然后，返回分类列表，对 "French Food" 分类重复操作。

最后，要发布你最喜欢的餐厅，请前往 Content Manager > Collection types - Restaurant，点击 "Biscotte Restaurant" 条目，并 Publish 它。

步骤 12：使用 API

好了，亲爱的美食家，我们刚刚完成了内容的创建并使其可通过 API 访问。你可以给自己鼓个掌——但你还未看到你辛勤工作的最终成果。

看这里：餐厅列表应该可以通过访问你的 Strapi Cloud 项目 URL 的 /api/restaurants 路径来访问（例如 https://beautiful-first-strapi-project.strapiapp.com/api/restaurants）。

现在就试试吧！结果应该类似于下面的示例响应 👇。

点击我查看 API 响应示例：

{
  "data": [
    {
      "id": 3,
      "documentId": "wf7m1n3g8g22yr5k50hsryhk",
      "Name": "Biscotte Restaurant",
      "Description": [
        {
          "type": "paragraph",
          "children": [
            {
              "type": "text",
              "text": "Welcome to Biscotte restaurant! Restaurant Biscotte offers a cuisine based on fresh, quality products, often local, organic when possible, and always produced by passionate producers."
            }
          ]
        }
      ],
      "createdAt": "2024-09-10T12:49:32.350Z",
      "updatedAt": "2024-09-10T13:14:18.275Z",
      "publishedAt": "2024-09-10T13:14:18.280Z",
      "locale": null
    }
  ],
  "meta": {
    "pagination": {
      "page": 1,
      "pageSize": 25,
      "pageCount": 1,
      "total": 1
    }
  }
}

接下来呢？

后续步骤

探索管理面板

连接前端

部署到生产环境