• Product Introduction
  • Quick Start
    • Importing a Git Repository
    • Starting From a Template
    • Direct Upload
    • Start with AI
  • Framework Guide
    • Frontends
    • Backends
    • Full-stack
      • Next.js
    • Custom 404 Page
  • Project Guide
    • Project Management
    • edgeone.json
    • Configuring Cache
    • Error Codes
  • Build Guide
  • Deployment Guide
    • Overview
    • Create Deploys
    • Manage Deploys
    • Deploy Button
    • Using Github Actions
    • Using CNB Plugin
    • Using IDE PlugIn
    • Using CodeBuddy IDE
  • Domain Management
    • Overview
    • Custom Domain
    • Configuring an HTTPS Certificate
    • How to Configure a DNS CNAME Record
  • Pages Functions
    • Overview
    • Edge Functions
    • Node Functions
  • Log Analysis
  • KV Storage
  • Edge AI
  • API Token
  • EdgeOne CLI
  • Pages MCP
  • Integration Guide
    • AI
      • Dialogue Large Models Integration
      • Large Models for Images Integration
    • Database
      • Supabase Integration
      • Pages KV Integration
    • Ecommerce
      • Shopify Integration
      • WooCommerce Integration
    • Payment
      • Stripe Integration
      • Integrating Paddle
    • CMS
      • WordPress Integration
      • Contentful Integration
      • Sanity Integration
    • Authentication
      • Supabase Integration
      • Clerk Integration
  • Best Practices
    • Using General Large Model to Quickly Build AI Application
    • Use the Deepseek-R1 model to quickly build a conversational AI site
    • Building an Ecommerce Platform with WordPress + WooCommerce and GatsbyJS
    • Building a SaaS Site Using Supabase and Stripe
    • Building a Company Brand Site Quickly
    • How to Quickly Build a Blog Site
  • Migration Guides
    • Migrating from Vercel to EdgeOne Pages
    • Migrating from Cloudflare Pages to EdgeOne Pages
    • Migrating from Netlify to EdgeOne Pages
  • Troubleshooting
  • FAQs
  • Contact Us
  • Release Notes

WordPress Integration

WordPress, the most popular content management system worldwide, offers powerful content management capabilities and supports content management and display layer separation through REST API, enabling it to function as a Headless CMS. This architecture pattern, in conjunction with a Static Site Generator, can provide better performance and a more flexible display method for websites.


Overview

This document describes how to use WordPress as a Headless CMS with a static site generator to build high-performance websites. In this architecture, WordPress is responsible for content creation and management, while the static site generator handles content conversion into high-performance static pages. Current mainstream static site generators include Hexo and Gatsby, each with unique features: Hexo is widely popular for its ease of use and various themes, while Gatsby provides more powerful data access and build capacity. Considering most user requirements, this document uses Hexo as an example to introduce in detail how to achieve integration between WordPress and a static site generator, as well as how to deploy and speed up using EdgeOne Pages.


Getting Started

EdgeOne provides a ready-to-use WordPress + Hexo integration solution. You can directly access the template and deploy your website with one-click. After deployment, simply modify the WordPress data source configuration to display your WordPress content on the site. If you want to preview and debug locally, you can also download the template from GitHub to your local system.
The WordPress integration mainly includes three steps: configuring WordPress as a data source, using Hexo to generate static pages, and deploying to EdgeOne Pages. The following sections provide detailed operations for each step.

Configuring WordPress

WordPress supports two deployment methods: WordPress.com managed and self-hosted. Both methods are consistent in architecture principle, differing only in deployment location. The following uses WordPress.com managed as an example to introduce the integration flow in detail.


1. Register a WordPress.Com Account

Complete email registration by accessing https://wordpress.com/start/account/user-social.

2. Select a Managed Solution

WordPress.com offers multiple managed solutions, with the main difference being API access, plugin support, and storage space. Users can choose the appropriate solution according to their needs.
Personal: Basic API access, 6GB storage space.
Premium: Full API access, 13GB storage space.
Business or higher: Supports custom plugins, 200GB storage space or higher.
Since we only use WordPress as a data source and content management tool, different solutions have basically the same architecture and integration method. WordPress REST API v2 provides more complete endpoints, better performance optimization, richer feature support, and better backward compatibility, making it the most widely used version currently. Considering most WordPress users select the Business solution, which supports GraphQL query mode, the following uses the Business solution as an example to explain how to integrate WordPress as a headless CMS with a front-end framework.

3. Configure Site Basic Information

Configure the website title, description and basic information in the WordPress backend.
Install and configure the WPGraphQL plug-in to enable GraphQL queries via the data interface.


4. Preparing Data Content

To test the data access feature, you need to create some basic content:
Create sample Posts
Set post Categories
Add article tags (Tags)
These contents will be used for follow-up test data sync and display functionality. It is recommended to create 3-5 posts with different categories and tags so that thorough testing can be performed on all features. The following diagram shows the interface for creating posts and setting category tags:

After completing the above configurations, WordPress will serve as our data source and provide a REST API for the front-end framework to call.

5. Test Data Request

In the Business edition, we use the WordPress REST API v2 to get data. You can access various types of data via the following address:
To retrieve the article list as an example, the returned data format for version 2 is as follows:
[
{
"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"}]
}
}
]
Please visit the v2 posts API. If the returned data matches the above example, it indicates the API validation is normal. Subsequently, we can maintain the site content by editing posts, categories, tags, and other data.

6. Configuring API Access

Configure REST API access privileges and CORS policy in the WordPress backend to securely allow frontend apps to access data. For WordPress.com managed sites, domain names need to be set in site settings. Specific steps are as follows:
Click "Settings" in the left menu
Select the "General" option
Enter the correct domain in "WordPress address" and "site address"
Click the "Save change" button
After completing the above configuration, the REST API will be automatically enabled. You can access https://your-site.com/wp-json to verify if the API is working properly.

Generating Static Files

Before starting generation of static pages, we need to understand Hexo's content rendering rules. If you are unfamiliar with Hexo's content management standard, see Hexo official documentation to learn more details.

Our template (wordpress-hexo-template) has implemented receipt and conversion of WordPress REST API data, enabling automatic transformation of WordPress content into Hexo-compatible format. First, we need to download the template file to your local system.

1. Get a Template

# Create directory and initialize git repository
mkdir wordpress-hexo-template && cd wordpress-hexo-template
git init
# Add remote repository
git remote add origin https://github.com/TencentEdgeOne/pages-templates.git
# Enable sparse-checkout and set to only get Hexo template
git sparse-checkout set examples/wordpress-hexo-template
# Pull content
git pull origin main
# Move files to current directory
mv examples/wordpress-hexo-template/* .
rm -rf examples

2. Environment Preparation

This template is developed based on the Hexo framework. Ensure the following environment:
Node.js 14.0 or higher version
npm 6.0 or higher version
Confirm the environment meets requirements, first install project dependencies:
# Install dependency.
npm install
After installation, you can start sync WordPress content and launch the development server:
# Configure WordPress data source and start the development server
# Replace https://your.site.url with your WordPress site address
# Example: https://myblog.wordpress.com
# Note: No need to add /wp-json/wp/v2, the script will auto-complete the API path
WP_URL=https://your.site.url node scripts/wp-sync.js
This command will:
Retrieve article content from WordPress
Convert content to Hexo-compatible format
Start the local development service to preview the effect
After executing the synchronization command, please check the source/_posts directory to view whether the corresponding Markdown file list has been generated. If you can see that the WordPress articles have been converted to Markdown files, it indicates that the data sync was successful.

Next, please check whether the following files have been generated correctly.
source/categories.json: Confirm whether the WordPress classification data has been synced.
source/tags.json: Confirm whether the WordPress tag data has been synced.
If the files above are correctly generated, the environment preparation is completed. You can proceed to the next step.

3. Packaging Static Files

Start by launching the local preview server to view the effect:
hexo server
After executing, visit http://localhost:4000 in the browser, you will see a preview effect similar to the figure below:

After confirming the preview effect is correct, you can generate static files:
hexo generate
After execution, a public folder will be generated in the project root directory, including all static files.

Deploying to EdgeOne Pages

1. Publishing Code to Git

Commit the code to the git repository to complete the deployment. Suppose you have created the wordpress-hexo-template project and associated the current directory with it, use the following command to commit:
git add .
git commit -m "Initial commit"
git push origin main


2. Importing a Project to Pages

After submission, if you are already an EdgeOne Pages user and have associated your GitHub account, visit the Console to deploy the corresponding project.



3. Adding an Environment Variable

Click deploy blog-with-retypeset-and-contentful, then on the deployment page, click "Environment Variables" and configure the following environment variables:
WP_URL: Fill in your WordPress address.

Click the "Start Deployment" button, wait for deployment to complete, and the deployment successful interface will display.

We have completed the deployment of the Hexo solution. With this solution, you can:
Use WordPress to manage content and enjoy its powerful content management capabilities
Generate static files with Hexo for ultimate access speed
Realize automatic deployment with EdgeOne Pages to simplify ops
Get global CDN acceleration to enhance user experience


More Related Content

View more WordPress integration solutions: WordPress Template provided by EdgeOne Pages
Switch Hexo theme styles: Hexo official theme list