基于 Headless CMS (Strapi v4) 的网站开发

输入“/”快速插入内容

基于 Headless CMS (Strapi v4) 的网站开发

用户1798

用户770

用户5764

用户670

2023年10月23日创建

113

能够学到什么

1.
用 GitHub 模板仓库和 GitPod.io 在线开发环境一键创建应用项目​

2.
用 GitHub Actions 一键部署应用到 AWS，并提供公网访问​

3.
学习使用 Strapi 后台管理界面维护网站数据​

4.
学习使用 Strapi 后台管理界面修改网站数据库结构，以支撑新业务​

5.
试用 Strapi AI 插件降低运营工作强度​

最终成果展示

https://strapi-starter-local-setup.vercel.app

操作步骤

使用 GitPod 打开项目，推荐使用 GitHub 登陆

1.1

打开链接 https://gitpod.io/#https://github.com/idea2app/strapi-nextjs

https://github.com/idea2app/strapi-nextjs

切换 Node.js 版本到 18

2.1

打开 terminal，输入

代码块

nvm install 18​
nvm use 18​

安装依赖

3.1

运行命令

代码块

yarn setup

运行 Strapi (backend)

4.1

进入目录

代码块

cd backend/

4.2

修改 .env

代码块

cp .env.example .env

打开 backend/.env，修改其中的 tobemodified 为合适的字段，例如：usergroupchengdu​

4.3

运行

代码块

yarn develop

4.4

注册后台管理员帐号

Gitpod 会默认打开新页面，若未打开，可点击右下角弹窗的 Open Browser 或者按住 Ctrl/Command 后点击命令行窗口中的 URL

common.docs_name - LarkCCM_Docs_Menu_Image

进入注册界面，填写相关信息后进入后台

4.5
导入数据​

在 terminal 中 Ctrl + C 停止正在运行的 Strapi（后端）服务，输入以下命令导入数据​

代码块

yarn strapi import -f ../seed-data.tar.gz

询问是否覆盖数据，输入 y 后回车重新运行

代码块

yarn develop

4.6

创建 token

i.
Settings --> API Tokens --> +Create new API Token​

ii.
Token type 选择 Read-only，创建成功后，保存好 token，之后会用到​

4.7
公网访问​
i.
点击底部的 Ports​

基于 Headless CMS (Strapi v4) 的网站开发​

基于 Headless CMS (Strapi v4) 的网站开发