国际站
    控制台
    • 产品简介
    • 快速开始
      • 导入 Git 仓库
      • 从模板开始
      • 直接上传
      • 从 AI 开始
    • 框架指南
      • 前端
        • Vite
        • React
        • Vue
        • 其他框架
      • 后端
      • 全栈
        • Next.js
        • Nuxt
        • Astro
        • React Router
        • SvelteKit
      • 自定义 404 页面
    • 项目指南
      • 项目管理
      • edgeone.json
      • 缓存配置
      • 构建输出配置
      • 错误码
    • 构建指南
    • 部署指南
      • 概览
      • 触发部署
      • 管理部署
      • 部署按钮
      • 使用 Github Action
      • 使用 CNB 插件
      • 使用 IDE 插件
      • 使用 CodeBuddy IDE
    • 域名管理
      • 概览
      • 自定义域名
      • HTTPS 配置
        • 概览
        • 申请免费证书
        • 使用 SSL 托管证书
      • 配置 DNS 的 CNAME 记录
    • 可观测性
      • 概述
      • 指标分析
      • 日志分析
    • Pages Functions
      • 概览
      • Edge Functions
      • Cloud Functions
        • 概览
        • Node Functions
    • KV 存储
    • 边缘 AI
    • API Token
    • EdgeOne CLI
    • Pages MCP
    • 集成指南
      • AI
        • 对话型大模型集成
        • 图片大模型集成
      • 数据库
        • Supabase 集成
        • Pages KV 集成
      • 电商
        • WooCommerce 集成
        • Shopify 集成
      • 支付
        • Stripe 集成
        • Paddle 集成指南
      • CMS
        • Sanity 集成
        • Contentful 集成
        • WordPress 集成
        • Payload集成
      • 身份验证
        • Supabase 集成
        • Clerk 集成
    • 最佳实践
      • EdgeOne Pages 插件上线 Dify Marketplace
      • 使用边缘 AI 模型快速搭建对话型 AI 站点
      • 使用 Shopify 搭建电商平台
      • 使用 Supabase 和 Stripe 搭建 SaaS 站点
      • 如何快速搭建公司品牌站点
      • 如何快速搭建博客站点
      • 使用通用大模型快速搭建AI应用
    • 迁移指南
      • 从 Vercel 迁移至 EdgeOne Pages：优化您在中国区域的网站部署
      • 从 Cloudflare Pages 迁移至 EdgeOne Pages：优化您在中国区域的网站部署
      • 从 Netlify 迁移至 EdgeOne Pages：优化您在中国区域的网站部署
    • 排障指南
    • 常见问题
    • 联系我们
    • 产品动态
    Pages 文档/
    集成指南/
    CMS/
    Contentful 集成/

    Contentful 集成

    本文介绍如何使用 Contentful 作为内容管理系统，结合 AstroJS 静态网站生成器搭建博客站点。通过 EdgeOne Pages 的一键部署功能，您可以快速将网站部署到全球 CDN 节点，实现毫秒级访问速度。AstroJS 的“零 JavaScript 开销”特性与 EdgeOne 的全球加速能力相结合，为您的博客提供极致的访问体验。

    快速入门

    为了帮助您入门，我们使用 Contentful 和 AstroJS 构建了一个 模板。部署后，只需在 Contentful 中调整内容配置，网站即可自动展示最新内容。
    如果希望在本地进行开发和调试，也可以从 GitHub 获取模板，按照本文后续说明完成本地部署和预览。
    Contentful的集成分为三个主要步骤：Contentful配置、生成静态文件、部署到EdgeOne Pages。下面将详细介绍每个步骤的具体操作。

    Contentful配置

    1. 创建Contentful账号

    访问 Contentful官网，点击“Log in”开始注册。在注册过程中，您需要填写基本信息并选择适合的套餐。对于个人博客或小型项目，免费版已经足够使用。

    2. 创建内容模型

    注册Contentful账号后，建议先了解其核心概念和配置项。Contentful提供了详细的中文文档，建议访问 Contentful官方文档 了解以下核心概念：
    Space（空间）：内容管理的独立工作区。
    Content Model（内容模型）：定义内容结构的框架。
    Content Type（内容类型）：不同类型内容的模板。
    Fields（字段）：内容的具体属性。
    Entries（条目）：根据模型创建的内容。
    Assets（资源）：图片、视频等媒体文件。
    Webhooks（钩子）：内容更新时的自动触发机制。
    API Keys（API密钥）：访问内容的凭证。
    熟悉这些概念后，我们就可以开始创建Space了：
    
    Contentful创建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 temp
    mv temp/examples/blog-with-retypeset-and-contentful .
    rm -rf temp
    cd 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。这样可以避免在代码中暴露您的账户信息，保证了私密性。

    部署到EdgeOne Pages

    1. 代码发布到 Git

    将代码提交到git仓库即可完成部署。假设你已经创建了 blog-with-retypeset-and-contentful 项目，并且将当前目录关联到了该项目，使用以下命令提交：
    git add .
    git commit -m "Initial commit"
    git push origin main

    2. 项目导入 Pages

    提交完成后，如果你已经是EdgeOne Pages用户且已关联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 Pages实现自动化部署，简化运维工作。
    获得全球CDN加速，提升用户体验。

    更多相关内容

    查看更多Contentful集成方案：EdgeOne Pages提供的Contentful模板
    了解AstroJS更多功能：AstroJS官方文档
    探索Contentful更多功能：Contentful API文档
    自定义网站样式：AstroJS主题定制指南