边缘开发者平台
  • Pages
    • 产品简介
    • 快速开始
      • 导入 Git 仓库
      • 从模板开始
      • 直接上传
    • 框架指南
    • 项目指南
      • 项目管理
      • edgeone.json
      • 错误码
    • 构建指南
    • 部署指南
      • 概览
      • 触发部署
      • 管理部署
      • 部署按钮
    • 域名管理
      • 概览
      • 自定义域名
      • 配置 HTTPS 证书
      • 如何配置 DNS 的 CNAME 记录
    • Pages Functions
    • KV 存储
    • 边缘 AI
    • EdgeOne CLI
    • Pages MCP
    • 最佳实践
      • 1 分钟快速部署 + 免费公测中｜你的专属 DeepSeek，EdgeOne 承包了！
      • 将 WordPress Gastby 部署到 EdgeOne Pages
      • 使用 WordPress + GatsbyJS 搭建电商平台
      • 结合 Sanity 部署作品集模板
    • 迁移指南
      • 从 Vercel 迁移至 EdgeOne Pages
      • 从 Cloudflare Pages 迁移至 EdgeOne Pages
      • 从 Netlify 迁移至 EdgeOne Pages
    • 常见问题
    • 联系我们
    • 产品动态
解锁 1年EdgeOne + 1TB CDN： 加入我们的开发者之旅
立即开始！
当前为国际站中文文档，如需访问中国站文档，请点击这里
文档概览/
边缘开发者平台/
Pages/
最佳实践/
使用 WordPress + GatsbyJS 搭建电商平台/

使用 WordPress + GatsbyJS 搭建电商平台

引言：现代电商的技术选择

JAMStack架构的优势

JAMStack 架构是一种现代Web开发架构模式，通过预渲染和服务解耦实现高性能、高安全的网站架构。
JAMstack = JavaScript + APIs + Markup
这种架构正在重塑现代Web开发范式，特别在需要高性能、低成本运维的电商场景中展现出显著优势：
速度即转化率
安全性
可扩展性
SEO与可访问性
更低的成本
本文介绍了如果基于 Pages 的模板，快速搭建 JAMStack 架构的，高性能、易维护的电商网站，并实现了登录、购物车、订单等常用的动态功能，方便您快速搭建属于自己的高性能电商网站。
这里选用的后端 CMS 是非常流行的 WordPress+WooCommerce。


环境搭建与配置

WordPress 后台搭建

Docker 部署（推荐）
我们提供了可供直接部署的 docker 项目，可以直接使用 docker 容器部署到您的服务器上。
docker 环境的安装和部署可以参考腾讯云轻量服务器 Docker 容器环境。
部署完成后打开 wp-admin：https://your.site.domain/wp-admin/admin.php。
登录后可以看到已经配置好的产品信息和页面。

自行搭建
如果您已有自己的 WordPress 服务，想要扩展电商功能，也可以按照如下步骤自行配置环境：
Step1：安装插件
在您的 WordPress 服务安装如下插件并激活：
Advanced Custom Fields
JWT Authentication for WP-API
WooCommerce
WPGraphQL
WPGraphQL for ACF
WPGraphQL for WooCommerce
WPGraphQL JWT Authentication

Step2: 导入/创建商品
激活 WooCommerce 插件后，点击导航栏的 Products，进入商品管理页面。
可以根据需求自行创建商品

或者下载 csv 文件下载进行导入。
Step3:
先创建以下几个页面，用于首页 Banner 的展示
/highlight
/promotion
/sample-page
点击左边菜单的 ACF，下载配置文件并导入字段配置。
导入完成后，回到上面创建的页面进行编辑，填入 ACF数据。

编辑完成后发布。

前端模板

完成后端服务的部署之后，在 Pages 平台选择 WordPress Woocommerce Template，将服务地址配置到 Edgeone Pages 项目的环境变量中。
创建项目并等待部署完成。

点击链接即可看到完整页面。