一、快速入门
为了帮助你入门，我们使用 Contentful 和 AstroJS 构建了一个 模板。部署后，只需在 Contentful 中调整内容配置，网站即可自动展示最新内容。
如果希望在本地进行开发和调试，也可以从 GitHub 获取模板，按照这篇后续说明完成本地部署和预览。
Contentful 的集成分为三个主要步骤：Contentful 配置、生成静态文件、部署到 。下面将详细介绍每个步骤的具体操作。
二、1. 创建 Contentful 账号
访问 Contentful 页面，点击“Log in”开始注册。在注册过程中，你需要填写基本信息并选择适合的套餐。对于个人博客或小型项目，免费版已经足够使用。
三、2. 创建内容模型
注册 Contentful 账号后，建议先了解其核心概念和配置项。Contentful 提供了详细的中文文档，建议访问 Contentful 产品文档 了解以下核心概念：
·Space（空间）：内容管理的独立工作区。
·Content Model（内容模型）：定义内容结构的框架。
·Content Type（内容类型）：不同类型内容的模板。
·Fields（字段）：内容的具体属性。
·Entries（条目）：根据模型创建的内容。
·Assets（资源）：图片、视频等媒体文件。
·Webhooks（钩子）：内容更新时的自动触发机制。
·API Keys（API 密钥）：访问内容的凭证。
熟悉这些概念后，我们就可以开始创建 Space 了：
创建 Space 后，你不需要手动配置 Content Model、Fields 等内容。EdgeOne 的集成模板已经包含了完整的配置示例，我们可以使用 Contentful 的命令行工具（contentful-cli）通过导入 JSON 文件的方式自动生成所有必要的配置（具体的导入细节下文的“生成静态文件”部分会说明）。这样可以确保配置的一致性，并节省手动配置的时间。
四、3. 配置 API 访问
在开始导入配置之前，我们需要先配置 API 访问权限。API 访问配置是连接 Contentful 与静态网站生成器的关键，它允许我们通过 API 安全地获取和管理内容。在 Contentful 控制台中，进入“Settings” > “API keys”页面，在这里我们可以创建和管理 API 密钥。
在 API 配置界面中，你需要特别关注以下信息：
·Space ID：位于界面顶部，是你的内容空间的唯一标识。
·Content Delivery API：用于获取已发布的内容，适合静态网站生成器使用。
·Content Management API：用于管理内容，在导入配置时会用到。
·API Endpoint：API 的访问地址，通常为 https://cdn.contentful.com。
请妥善保存这些信息，它们将在后续的配置中用到。
五、生成静态文件
前面我们提到将使用 contentful-cli 来导入默认数据。在开始之前，建议先了解 contentful-cli 的基本使用。如果你对 contentful-cli 不熟悉，可以参见 contentful-cli 产品文档 了解更多详情。
下面我们开始操作生成静态文件。首先，下载 Contentful 集成模板：
六、1. 获取模板
git clone –depth 1 –single-branch https://github.com/TencentEdgeOne/pages-templates.git tempmv temp/examples/blog-with-retypeset-and-contentful .rm -rf tempcd blog-with-retypeset-and-contentful
进入模板目录后，执行以下命令安装依赖 npm install。
七、2. 安装和登录 Contentful
接下来，我们需要安装 contentful-cli 工具并登录你的 Contentful 账号。执行npm install -g contentful-cli 命令全局安装 contentful-cli。
安装完成后，使用contentful login 命令登录你的 Contentful 账号。执行登录命令后，会打开浏览器窗口，请按照提示完成登录操作。
八、3. 导入配置
模板中包含了 contentful-blog-model.json 文件，这是预设的博客内容模型配置。如果你有自己的网站数据结构，可以修改此文件来适配你的需求。这篇会以默认的博客模型为例进行说明。
使用以下命令导入配置：
contentful space import –content-file contentful-blog-model.json
导入完成后，请访问 Contentful 管理界面，查看是否已经生成了预设的内容模型和示例数据。如果可以看到这些内容，说明导入成功，我们可以进入下一步：读取 Contentful 接口数据并生成网页内容。
九、4. 获取 Contentful 数据
模板已经配置好了 Contentful API 的访问。你可以通过以下命令测试 API 连接：
curl -H "Authorization: Bearer $CONTENTFUL_ACCESS_TOKEN" \\ "https://cdn.contentful.com/spaces/$CONTENTFUL_SPACE_ID/entries?content_type=blogPost"
如果配置正确，将返回类似以下的数据：
{ "sys": { "type": "Array" }, "total": 1, "skip": 0, "limit": 100, "items": [ { "sys": { "id": "example-post", "type": "Entry", "contentType": { "sys": { "id": "blogPost" } } }, "fields": { "title": "示例博客文章", "slug": "example-post", "content": "这是一篇示例博客文章的内容…", "publishDate": "2024-03-20T00:00:00.000Z", "tags": ["示例", "教程"] } } ]}
确认 API 可以正常访问后，如果你想本地验证配置是否正确，可以打开 src/util/contentful.js 文件，填入你的 Space ID 和 Access Token。
然后运行 npm run dev 命令，即可在本地预览网站效果：
注意：上述验证步骤仅用于确认配置是否正确。实际使用时，你不需要修改 src/util/contentful.js 的代码，因为它会自动从 EdgeOne 控制台配置的环境变量中获取 Space ID 和 Access Token。这样可以避免在代码中暴露你的账户信息，保证了私密性。
十、1. 代码发布到 Git
将代码推送到你自己的 Git 仓库后，即可在 EdgeOne Makers 中导入并部署。请先在 GitHub 创建一个空仓库（不要勾选添加 README），然后在模板目录中执行：
cd blog-with-retypeset-and-contentfulgit init -b maingit remote add origin <你的仓库地址>git add .git commit -m "Initial commit"git push -u origin main
将 <你的仓库地址> 替换为新建仓库的地址，例如 https://github.com/<your-name>/blog-with-retypeset-and-contentful.git。
十一、2. 项目导入 Makers
提交完成后，如果你已经是 EdgeOne Makers 用户且已关联 GitHub 账户，访问 控制台 部署对应的项目即可。
十二、3. 添加环境变量
点击部署 blog-with-retypeset-and-contentful 后，在准备部署界面单击环境变量，分别配置以下环境变量：
·CONTENTFUL_SPACE_ID：填入你的 Contentful Space ID。
·CONTENTFUL_DELIVERY_TOKEN：填入你的 Contentful Delivery Token。
配置完成后，单击立即创建，等待部署完成后将显示部署成功界面：
至此，我们已经完成了 Contentful 方案的完整部署流程。通过这个方案，你可以：
·使用 Contentful 管理内容，享受其强大的 Headless CMS 功能。
·利用 AstroJS 生成静态文件，提升访问速度。
·通过 EdgeOne 实现自动化部署，简化运维工作。
·获得全球 CDN 加速，提升用户体验。
十三、更多相关内容
·查看更多 Contentful 集成方案：EdgeOne Makers 提供的 Contentful 模板。
·了解 AstroJS 更多功能：AstroJS 产品文档。
·探索 Contentful 更多功能：Contentful API 文档。
·自定义网站样式：AstroJS 主题定制指南。