Skip to main content

快速入门指南

🌐 Quick Start Guide

Page summary:

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

🌐 Build and deploy a Strapi project from scratch in 12 steps: create a local project with create-strapi@latest, define collection types using the Content-Type Builder, push your project to GitHub and deploy to Strapi Cloud from the Cloud dashboard, and add content via the Content Manager.

Strapi 提供了很大的灵活性。无论你是想快速行动并迅速看到最终结果,还是更愿意深入研究产品,我们都能满足你的需求。在本教程中,我们将采用 DIY 方法,从零开始构建一个项目和内容结构,然后将你的项目部署到 Strapi Cloud,从那里添加数据。

🌐 Strapi offers a lot of flexibility. Whether you want to go fast and quickly see the final result, or would rather dive deeper into the product, we got you covered. For this tutorial, we'll go for the DIY approach and build a project and content structure from scratch, then deploy your project to Strapi Cloud to add data from there.

Track your progress

本指南按照可折叠的步骤组织。点击步骤标题以展开或折叠,完成后点击步骤右侧的圆圈将其标记为已完成。已完成的步骤会变成绿色,页面右下角的进度摘要会跟踪你的进度。

🌐 This guide is organized into collapsible steps. Click a step's title to expand or collapse it, and click the circle on the right of a step to mark it as completed once you're done. Completed steps turn green, and a progress summary at the bottom-right of the page keeps track of how far along you are.

3 options to discover Strapi

有三种方式可以了解 Strapi。选择最适合你的方式:

🌐 There are 3 options to discover Strapi. Choose what best suits you:

  • Strapi 提供了一个托管演示,让你可以快速体验其内容管理器并学习如何编辑内容。在此托管演示中,Strapi 以生产模式运行,因此内容类型构建器根据设计是禁用的
  • 如果你想尝试一个完整的应用,包括 Strapi 后端、Next.js 前端和示例数据,请在本地安装 LaunchPad 应用。
  • 如果你想学习如何从零开始,请遵循本快速入门指南。
Prerequisites

在安装 Strapi 之前,你的计算机上必须安装以下要求:

🌐 Before installing Strapi, the following requirements must be installed on your computer:

  • Node.js:仅支持 Active LTS or Maintenance LTS versions (目前为 v22v24v26)。Node 的奇数版本发布,称为 Node.js 的“当前”版本,不受支持(例如 v23、v25)。
  • 你首选的 Node.js 包管理器:
    • npm (v6及以上)
    • pnpm (在 Strapi Cloud 上, Corepack 与项目的 package.json packageManager 字段中固定的 pnpm 版本匹配,如果没有固定,则使用 Corepack 打包的默认版本)
  • Python (如果使用 SQLite 数据库)
  • 受支持的网络浏览器:管理面板的目标浏览器是匹配默认 Browserslist 查询的浏览器:last 3 major versionsFirefox ESRlast 2 Opera versionsnot dead。请参见 browsersl.ist 了解当前的覆盖矩阵。项目可以在项目根目录下通过 Browserslist 配置覆盖这些默认设置。

你还需要 install git 并且拥有一个 GitHub 账户,以将你的项目部署到 Strapi 云。

A 部分:使用Strapi创建一个新项目

🌐 Part A: Create a new project with Strapi

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

🌐 We will first create a new Strapi project on your machine by running a command in the terminal, and then register our first local administrator user.

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

🌐 Follow the steps below by clicking on the togglable content to read more instructions.

步骤 1:运行安装脚本并创建一个Strapi Cloud账户
  1. 在终端中运行以下命令:

    terminal
    npx create-strapi@latest my-strapi-project
  2. 终端会提示你登录或注册。一旦完成,你的项目将自动获得 GrowthThe CMS Growth plan includes the Live Preview, Releases, and Content History features. 计划的30天试用。为了本教程的目的,请确保在终端中选择了Login/Sign up,或者使用箭头键选择它,然后按回车键。

  3. 在打开的新浏览器标签中,确保确认码与终端中的相同,然后点击 确认

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

  5. 一旦登录,浏览器会显示“恭喜,你已准备就绪!”的消息,你可以安全地关闭浏览器标签页并返回终端。

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

    来自终端的问答

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

🌐 As you will see in the terminal, your project is now building locally.

Info
  • 你项目的文件夹将包含一个 .strapi-cloud.json 文件,用于将你机器上的本地 Strapi 项目链接到 Strapi 服务器。
  • 还有更多安装选项可用。详情请参阅安装文档
步骤 2:注册第一个本地管理员用户

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

🌐 Once the installation is complete, you need to start the server. In the terminal, type or copy and paste the following:

terminal
cd my-strapi-project && npm run develop

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

🌐 Your browser automatically opens a new tab.

Tip

只要你待在 my-strapi-project 文件夹中,每当你想再次启动 Strapi 服务器时,只需运行 npm run develop 就可以了。

🌐 As long as you stay in the my-strapi-project folder, you will just need to run npm run develop any time you want to start the Strapi server again.

通过填写表格,你将创建自己的账户。完成后,你将成为此 Strapi 应用的第一位管理员用户。欢迎加入,命令器!

🌐 By completing the form, you create your own account. Once done, you become the first administrator user of this Strapi application. Welcome aboard, commander!

你现在可以访问 admin panel

Admin panel screenshot: dashboardAdmin panel screenshot: dashboard
Congratulations!

你刚刚创建了一个新的 Strapi 项目!你可以开始使用 Strapi 并自行探索内容管理器,或继续下面的 B 部分。

🌐 You have just created a new Strapi project! You can start playing with Strapi and discover the Content Manager by yourself, or proceed to part B below.

B 部分:使用内容类型构建器构建你的内容结构

🌐 Part B: Build your content structure with the Content-type Builder

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

🌐 The installation script has just created an empty project. We will now guide you through creating a small restaurants directory.

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

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

🌐 First we will build a content structure for your content. This can only be done while in development mode, which is the default mode for projects that are created locally.

Tip

如果服务器尚未运行,在你的终端中,进入 my-strapi-project 文件夹并运行 npm run develop 来启动它。

🌐 If the server is not already running, in your terminal, cd into the my-strapi-project folder and run npm run develop to launch it.

在执行 develop 命令之前,你可能还需要先运行 npm run build,尤其是在构建网站很重要的情况下,例如 TypeScript 项目。

🌐 You might also need to run npm run build prior to the develop command, especially in cases where building the website is important, such as for TypeScript projects for instance.

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

🌐 The Content-Type Builder helps you create your content structure. When creating an empty project with Strapi, this is where to get the party started!

步骤 3:创建一个“餐厅”集合类型

你的餐厅目录最终会包括许多餐厅,所以我们需要创建一个“餐厅”集合类型。然后我们可以描述在添加新餐厅条目时要显示的字段:

🌐 Your restaurants directory will eventually include many restaurants, so we need to create a "Restaurant" collection type. Then we can describe the fields to display when adding a new restaurant entry:

  1. 在管理面板左侧的主导航中,转到 Content-Type Builder
  2. 点击 Collection types 旁边的 加号图标。
  3. 在“显示名称”中输入 Restaurant,然后点击继续
  4. 点击 添加新字段按钮,然后选择文本字段。
  5. 名称 字段中输入 Name
  6. 切换到_高级设置_标签,并检查必填字段唯一字段设置。
  7. 点击 添加另一个字段
  8. 选择列表中的富文本(块)字段。
  9. Name 字段下输入 Description,然后点击 Finish。10. 最后,点击 Save 并等待 Strapi 重启。
GIF: Create Restaurant collection type in Content-type BuilderGIF: Create Restaurant collection type in Content-type Builder

一旦 Strapi 重启,“Restaurant” 就会在导航中的 内容管理器 > 集合类型 下列出。哇,你刚刚创建了你的第一个内容类型!太酷了,我们现在就再创建一个,仅仅为了好玩。

步骤 4:创建一个“分类”集合类型

如果我们的餐厅目录有一些分类,会有助于让我们更加有条理。让我们创建一个“分类”集合类型:

🌐 It would help getting a bit more organized if our restaurants directory had some categories. Let's create a "Category" collection type:

  1. 在主导航中转到 Content-type Builder
  2. 点击 Collection types 旁边的 加号图标。
  3. 在“显示名称”中输入 Category,然后点击继续
  4. 点击 添加新字段按钮,然后选择文本字段。
  5. 名称 字段中输入 Name
  6. 切换到_高级设置_标签,并检查必填字段唯一字段设置。
  7. 点击 添加另一个字段
  8. 选择关系字段。
  9. 在中心,选择表示“多对多”的图标 icon many-to-many。10. 在右侧,点击 Category 下拉菜单,并在列表中选择 Restaurant。文本应显示为 Categories has and belongs to many Restaurants
Admin Panel screenshot: relationsAdmin Panel screenshot: relations
  1. 最后,点击 完成,然后点击 保存 按钮,等待 Strapi 重启。
Congratulations!

你刚刚为你的 Strapi 项目创建了一个基本的内容结构!你可以继续使用 内容类型构建器 进行操作,或者继续下面的 C 部分和 D 部分,以了解 Strapi 云并向你的项目添加实际内容。

🌐 You have just created a basic content structure for your Strapi project! You can keep on playing with the Content-Type Builder, or proceed to parts C and D below to discover Strapi Cloud and add actual content to your project.

Tip

虽然我们在这里展示了如何手动创建内容结构,但你还可以探索其他选项:你可以导入 Figma 原型,从电脑导入一些文件,甚至可以开始用自然语言提示 Strapi AI GrowthThis feature is available with a Growth plan. 来为你创建内容。随意尝试它们吧!

C 部分:部署到 Strapi Cloud

🌐 Part C: Deploy to Strapi Cloud

既然你美丽的第一个 Strapi 项目已经在本地运行,现在是让全世界看到它的时候了!托管你的项目最直接的方法是使用 Strapi Cloud。

🌐 Now that your beautiful first Strapi project is working locally, it's time for the world to see it live! The most straightforward way to host your project is to use Strapi Cloud.

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

🌐 We recommend deploying from the Strapi Cloud dashboard. This guide walks you through pushing your local project to GitHub, then creating and deploying a Strapi Cloud project from the dashboard.

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

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

🌐 If your local Strapi server is still running, press Ctrl-C to stop it.

从仪表板部署需要你的项目托管在 GitHub 仓库上。将本地 Strapi 项目推送到 GitHub,就像你对待任何其他代码仓库一样(如有需要,请参阅下方的额外说明)。

🌐 Deploying from the dashboard requires your project to be hosted on a GitHub repository. Push your local Strapi project to GitHub like you would do it for any other code repository (see additional instructions below if needed).

将你的 Strapi 项目代码推送到 GitHub 所需的步骤:
  1. 在终端中,确保你位于托管你创建的 Strapi 项目的文件夹中。
  2. 运行 git init 命令来初始化此文件夹的 git。
  3. 运行 git add . 命令以将所有已修改的文件添加到 git 索引中。
  4. 运行 git commit -m "Initial commit" 命令以创建包含所有新增更改的提交。
  5. 登录到你的 GitHub 账户并 create a new repository。给新的仓库起一个名字,例如 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 操作的更多信息可以在 official GitHub documentation中找到。


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

既然你的项目已经托管在 GitHub 上,让我们从控制面板创建并部署你的 Strapi Cloud 项目:

🌐 Now that your project is hosted on GitHub, let's create and deploy your Strapi Cloud project from the dashboard:

  1. 导航到 Strapi Cloud 登录页面,并使用 GitHub、Google、GitLab 或一次性密码登录。
  2. 项目 页面,点击 创建项目
  3. 选择一个计划并连接你刚刚使用的 GitHub 账户。从列表中选择新创建的仓库。
  4. 填写你的项目设置(显示名称、分支、地区)并完成订阅步骤。
  5. 确认项目创建。Strapi Cloud 会将你重定向到你的项目仪表板,你可以在这里进行首次部署。

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

🌐 For detailed instructions and screenshots, see the Project deployment with the Cloud dashboard guide.

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

🌐 Once the deployment is complete, click the Visit app button in the top right corner to access your deployed Strapi project.

Visit Strapi Cloud App GIFVisit Strapi Cloud App GIF
Congratulations!

现在你的项目已托管在 Strapi Cloud 上并可在线访问。你可以通过阅读 其专用文档 来了解有关 Strapi Cloud 的更多信息,或者继续到 D 部分登录你的在线 Strapi 项目并从那里添加你的第一个数据。

🌐 Now your project is hosted on Strapi Cloud and accessible online. You can learn more about Strapi Cloud by reading its dedicated documentation or proceed to part D to log in into your online Strapi project and add your first data from there.

Tip

请随意进一步使用内容类型构建器,并向你的内容类型添加更多字段或创建新的内容类型。每当你进行此类更改时,将它们推送到 GitHub 以触发 Strapi Cloud 上的新部署(如果你在创建项目时启用了 推送时部署),或者从 Cloud 仪表板 手动触发部署。你也可以使用 Cloud CLI 从终端进行部署。

🌐 Feel free to play with the Content-Type Builder even further and add more fields to your content-types or create new content-types. Anytime you make such changes, push them to GitHub to trigger a new deployment on Strapi Cloud (if you enabled Deploy on push during project creation), or trigger a deployment manually from the Cloud dashboard. You can also deploy from your terminal with the Cloud CLI.

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

🌐 Part D: Add content to your Strapi Cloud project with the Content Manager

现在我们已经创建了一个包含两个集合类型“Restaurant”和“Category”的基本内容结构,并将你的项目部署到了 Strapi Cloud,我们来使用 Cloud 实际添加内容,通过创建新的条目。

🌐 Now that we have created a basic content structure with 2 collection types, "Restaurant" and "Category", and deployed your project to Strapi Cloud, let's use the Cloud to actually add content by creating new entries.

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

现在你的 Strapi Cloud 项目已创建,让我们登录该项目:

🌐 Now that your Strapi Cloud project is created, let's log in into the project:

  1. 在你的 Strapi Cloud dashboard中,点击 my-strapi-project 项目。
  2. 点击 访问应用 按钮。
  3. 在打开的新页面中,填写表单以创建此 Strapi Cloud 项目的第一个管理员用户。

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

🌐 Logged in into our first Strapi Cloud project, we will now add data from there.

关于用户和 Strapi Cloud 项目的附加信息和提示:
Note: Local users and Strapi Cloud users are different

你的 Strapi Cloud 项目和本地项目的数据库是不同的。这意味着数据不会自动从本地项目传输到 Strapi Cloud。这包括你之前在本地创建的用户。这就是为什么当你第一次登录到 Strapi Cloud 项目时,会被邀请创建一个新的管理员账户的原因。

🌐 The databases for your Strapi Cloud project and your local project are different. This means that data is not automatically transferred from your local project to Strapi Cloud. This includes users that you previously created locally. That's why you are invited to create a new administrator account when logging in to your Strapi Cloud project for the first time.

Tip: Directly accessing the admin panel of your Strapi Cloud project

任何托管在 Strapi Cloud 上的项目都可以通过其自己的网址访问,例如 https://my-strapi-project-name.strapiapp.com。要访问你的在线项目的管理面板,只需在网址后添加 /admin,例如 https://my-strapi-project-name.strapiapp.com/admin。网址可以在你的 Strapi Cloud 仪表板中找到,你也可以直接从那里访问你的 Strapi Cloud 项目,方法是点击项目名称,然后点击 访问应用 按钮。

🌐 Any project hosted on Strapi Cloud is accessible from its own URL, something like https://my-strapi-project-name.strapiapp.com. To access the admin panel of your online project, simply add /admin to the URL, for instance as in https://my-strapi-project-name.strapiapp.com/admin. URLs can be found in your Strapi Cloud dashboard and you can also directly access your Strapi Cloud projects from there by clicking on the name of your project then on the Visit app button.

步骤 8:为“餐厅”集合类型创建一个条目
  1. 在导航中转到 内容管理器 > 集合类型 - 餐厅
  2. 点击 创建新条目
  3. Name 字段中输入你最喜欢的本地餐厅的名字。假设是 Biscotte Restaurant
  4. 在_描述_字段中,写几句话。如果你缺乏一些灵感,你可以使用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. 点击 保存
Screenshot: Biscotte Restaurant in Content ManagerScreenshot: Biscotte Restaurant in Content Manager

该餐厅现在已列在 _内容管理器_的_合集类型 - 餐厅_视图中。


步骤 9:添加类别

让我们去 内容管理器 > 集合类型 - 分类 并创建两个分类:

  1. 点击 创建新条目
  2. 名称 字段中输入 French Food
  3. 点击 保存
  4. 返回到 Collection types - Category,然后再次点击 Create new entry
  5. Name 字段中输入 Brunch,然后点击 保存
GIF: Add CategoriesGIF: Add Categories

“French Food”和“Brunch”类别现在在 _内容管理器_的_集合类型 - 类别_视图中列为草稿。

现在,我们将为餐厅添加一个类别:

🌐 Now, we will add a category to a restaurant:

  1. 在导航中转到 内容管理器 > 集合类型 - 餐厅,然后点击“Biscotte 餐厅”。
  2. 在页面底部的 类别 下拉列表中,选择“法国美食”。然后滚动回页面顶部,点击 保存
步骤 10:设置角色和权限

我们刚刚添加了一家餐厅和两个类别。我们现在有足够的内容可以使用(双关语意在食用)。但首先,我们需要确保这些内容可以通过 API 公开访问:

🌐 We have just added a restaurant and 2 categories. We now have enough content to consume (pun intended). But first, we need to make sure that the content is publicly accessible through the API:

  1. 点击主导航底部的 设置
  2. 用户与权限插件 下,选择 角色
  3. 点击 公开 角色。
  4. 在_权限_下向下滚动。
  5. 在“权限”选项卡中,找到“餐厅”并点击它。
  6. 点击 findfindOne 旁边的复选框。
  7. Category 中重复:点击 findfindOne 旁边的复选框。
  8. 最后,点击页面顶部的 保存
Screenshot: Public Role in Users & Permissions pluginScreenshot: Public Role in Users & Permissions plugin
步骤 11:发布内容

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

🌐 By default, any content you create is saved as a draft. Let's publish our categories and restaurant.

首先,导航到 内容管理器 > 集合类型 - 分类。从那里:

  1. 点击“早午餐”条目。
  2. 在下一个屏幕上,点击 发布

然后,回到类别列表,重复操作“法国食品”类别。

🌐 Then, go back to the Categories list and repeat for the "French Food" category.

最后,要发布你最喜欢的餐厅,请前往 内容管理器 > 集合类型 - 餐厅,点击“Biscotte 餐厅”条目,然后发布它。

GIF: Publish contentGIF: Publish content
步骤 12:使用API

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

🌐 OK dear gourmet, we have just finished creating our content and making it accessible through the API. You can give yourself a pat on the back — but you have yet to see the final result of your hard work.

就在这里:餐厅列表可以通过访问你的 Strapi Cloud 项目 URL 的 /api/restaurants 路径来访问(例如,https://beautiful-first-strapi-project.strapiapp.com/api/restaurants)。

🌐 There you are: the list of restaurants should be accessible by visting the /api/restaurants path of your Strapi Cloud project URL (e.g., https://beautiful-first-strapi-project.strapiapp.com/api/restaurants).

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

🌐 Try it now! The result should be similar to the example response below 👇.

点击我查看 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
}
}
}
Congratulations!

现在你的内容已经创建并发布,并且你有权限通过 API 请求它。继续创作精彩的内容吧!

🌐 Now your content is created, published, and you have permissions to request it through the API. Keep on creating amazing content!

Tip: Transfer data between your local and Strapi Cloud projects

你的 Strapi Cloud 项目和本地项目的数据库是不同的。这意味着数据不会在你的 Strapi Cloud 和本地项目之间自动同步。你可以使用 数据管理系统 在项目之间传输数据。

🌐 The databases for your Strapi Cloud project and your local project are different. This means that data is not automatically synchronized between your Strapi Cloud and local projects. You can use the data management system to transfer data between projects.