一、快速入门
EdgeOne 提供了开箱即用的 WordPress + Hexo 集成方案，你可以直接访问 模板，一键部署你的网站。部署完成后，只需修改 WordPress 数据源配置，即可让站点显示你在 WordPress 中配置的内容。如果你想在本地预览和调试，也可以从 GitHub 下载模板到本地。
WordPress 集成主要包含以下三个步骤：配置 WordPress 作为数据源、使用 Hexo 生成静态页面、部署到 EdgeOne Makers。下面将详细介绍每个步骤的具体操作。
二、WordPress 配置
WordPress 支持两种部署方式：WordPress.com 托管和自托管。两种方式在架构原理上是一致的，区别仅在于部署位置。下面我们以 WordPress.com 托管为例，详细介绍集成流程。
三、1. 注册 WordPress.com 账号
通过访问 WordPress 页面 完成邮箱注册。
四、2. 选择托管方案
WordPress.com 提供多种托管方案，主要区别在于 API 访问权限、插件支持和存储空间等。用户可根据自身需求选择合适的方案。
·Personal：基础 API 访问，6GB 存储空间。
·Premium：完整 API 访问，13GB 存储空间。
·Business 及以上：支持自定义插件，200GB 及以上存储空间。
由于我们仅将 WordPress 作为数据源和内容管理工具，不同方案在架构集成方式上基本一致。WordPress REST API v2提供了更完善的端点、更好的性能优化、更丰富的功能支持，以及更好的向后兼容性，是目前最广泛使用的版本。考虑到大多数 WordPress 用户选择 Business 方案，且该方案支持 GraphQL 数据查询模式，以下以 Business 方案为例，讲解如何将 WordPress 作为无头 CMS 与前端框架进行集成。
五、3. 配置站点基本信息
·在 WordPress 后台完成站点标题、描述等基本信息的配置。
·安装配置 WPGraphQL 插件，使数据接口支持 GraphQL 查询。
六、4. 准备数据内容
为了测试数据获取功能，你需要创建一些基础内容：
·创建几篇示例文章（Posts）。
·设置文章分类（Categories）。
·添加文章标签（Tags）。
这些内容将用于后续测试数据同步和展示功能。建议创建3-5篇包含不同分类和标签的文章，以便充分测试各项功能。下图展示了创建文章和设置分类标签的界面：
完成以上配置后，WordPress 将作为我们的数据源，提供 REST API 接口供前端框架调用。
七、5. 测试数据请求
在 Business 版本中，我们使用 WordPress REST API v2接口获取数据。
以获取文章列表为例，v2版本返回的数据格式如下：
[ { "id": 1, "date": "2024-03-20T10:00:00", "title": { "rendered": "Hello World" }, "content": { "rendered": "This is my first post!", "protected": false }, "excerpt": { "rendered": "This is my first post!" }, "featured_media": 0, "categories": [1], "tags": [1], "_links": { "self": [{"href": "https://your-site.com/wp-json/wp/v2/posts/1"}], "author": [{"href": "https://your-site.com/wp-json/wp/v2/users/1"}], "categories": [{"href": "https://your-site.com/wp-json/wp/v2/categories/1"}], "tags": [{"href": "https://your-site.com/wp-json/wp/v2/tags/1"}] } }]
请访问 v2的 posts 接口，如果返回的数据格式与上述示例一致，则表示接口验证正常。后续我们可以通过编辑 posts、categories、tags 等数据来维护站点的内容。
八、6. 配置 API 访问
在 WordPress 后台配置 REST API 访问权限和 CORS 策略，确保前端应用可以安全地访问数据。对于 WordPress.com 托管的站点，需要在站点设置中配置允许访问的域名。具体步骤如下：
·点击左侧菜单的“设置”（Settings）。
·选择“常规”（General）选项。
·在“WordPress 地址”和“站点地址”中确保填写了正确的域名。
·点击“保存更改”。
完成以上设置后，REST API 将自动启用，你可以通过访问 https://your-site.com/wp-json 来验证 API 是否正常工作。
九、生成静态文件
在开始生成静态页面之前，我们需要先了解 Hexo 的内容渲染规则。如果你对 Hexo 的内容管理规范不熟悉，可以参见 Hexo 产品文档 了解更多详情。
我们的 模板 已经实现了 WordPress REST API 数据的接收和转换，能够自动将 WordPress 的内容转换为 Hexo 可用的格式。首先，我们需要下载模板文件到本地。
十、1. 获取模板
# 创建目录并初始化git仓库mkdir wordpress-hexo-template && cd wordpress-hexo-templategit init# 添加远程仓库git remote add origin https://github.com/TencentEdgeOne/pages-templates.git# 启用sparse-checkout并设置只获取Hexo模板git sparse-checkout set examples/wordpress-hexo-template# 拉取内容git pull origin main# 移动文件到当前目录mv examples/wordpress-hexo-template/* .rm -rf examples
十一、2. 环境准备
本模板基于 Hexo 框架开发，需要确保以下环境：
·Node.js 14.0 或更高版本。
·npm 6.0 或更高版本。
确认环境满足要求后，首先需要安装项目依赖：
# 安装依赖npm install
安装完成后，我们就可以开始同步 WordPress 的内容并启动开发服务器：
# 配置WordPress数据源并启动开发服务器# 将 https://your.site.url 替换为你的WordPress站点地址# 例如：https://myblog.wordpress.com# 注意：无需添加 /wp-json/wp/v2，脚本会自动补全API路径WP_URL=https://your.site.url node scripts/wp-sync.js
这个命令会：
·从 WordPress 获取文章内容。
·将内容转换为 Hexo 可用的格式。
·启动本地开发服务器预览效果。
执行完同步命令后，请检查 source/_posts 目录，查看是否已生成对应的 Markdown 文件列表。如果能看到 WordPress 中的文章都已转换为 Markdown 文件，则说明数据同步成功。
接下来，请检查以下文件是否已正确生成：
·source/categories.json：确认 WordPress 的分类数据是否已同步。
·source/tags.json：确认 WordPress 的标签数据是否已同步。
如果以上文件都已正确生成，说明环境准备已完成，可以继续进行下一步操作。
十二、3. 打包静态文件
首先，让我们启动本地预览服务器来查看效果：
hexo server
执行后，在浏览器中访问 http://localhost:4000，你将看到类似下图的预览效果：
预览效果确认无误后，我们就可以生成静态文件了：
hexo generate
执行完成后，将在项目根目录下生成 public 文件夹，其中包含了所有静态文件。
十三、1. 代码发布到 Git
将代码提交到 Git 仓库即可完成部署。假设你已经创建了 wordpress-hexo-template 项目，并且将当前目录关联到了该项目，使用以下命令提交：
git add .git commit -m "Initial commit"git push origin main
十四、2. 项目导入 Makers
提交完成后，如果你已经是 EdgeOne Makers 用户且已关联 GitHub 账户，访问 控制台 部署对应的项目即可。
十五、3. 添加环境变量
点击部署 blog-with-retypeset-and-contentful 后，在准备部署界面点击“环境变量”，分别配置以下环境变量：
·WP_URL：填入你的 WordPress 地址。
单击“立即创建”，等待部署完成后将显示部署成功界面：
至此，我们已经完成了 Hexo 方案的完整部署流程。通过这个方案，你可以：
·使用 WordPress 管理内容，享受其强大的内容管理功能。
·利用 Hexo 生成静态文件，提升访问速度。
·通过 EdgeOne Makers 实现自动化部署，简化运维工作。
·获得全球 CDN 加速，提升用户体验。
十六、更多相关内容
·查看更多 WordPress 集成方案：EdgeOne Makers 提供的 WordPress 模板。
·切换 Hexo 多主题风格：Hexo 主题列表。