Edge Developer Platform
  • Pages
    • Product Introduction
    • Quick Start
      • Importing a Git Repository
      • Starting From a Template
      • Direct Upload
    • Framework Guide
    • Project Guide
      • Project Management
      • edgeone.json
      • Configuring Cache
      • Error Codes
    • Build Guide
    • Deployment Guide
      • Overview
      • Create Deploys
      • Manage Deploys
      • Deploy Button
      • Use Github Actions
    • Domain Management
      • Overview
      • Custom Domain Name
      • Configuring an HTTPS Certificate
      • How to Configure a DNS CNAME Record
    • Pages Functions
    • KV Storage
    • Edge AI
    • API Token
    • EdgeOne CLI
    • Pages MCP
    • Integration Guide
      • 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
      • 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
    • 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
Unlock 1 Year of EdgeOne + 1TB CDN: Join Our Developer Journey
Get Started Now !

WordPress Integration

WordPress, as the world's most popular content management system, not only provides powerful content management features but also supports separating content management from the presentation layer via REST API, enabling it to function as a Headless CMS. This architecture pattern, combined with a Static Site Generator, can deliver better performance and more flexible display methods for websites.


Overview

This document describes how to use WordPress as a Headless CMS in conjunction 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 converting content into high-performance static pages. Currently, mainstream Static Site Generators include Hexo and Gatsby, each with distinct features: Hexo is widely popular for its ease of use and rich theme ecosystem, while Gatsby offers more powerful data access and build capabilities. Considering the needs of most users, this document will use Hexo as an example to detail how to achieve integration between WordPress and the Static Site Generator, as well as how to deploy and accelerate 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 the content configured in WordPress on your 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 the following three steps: configure WordPress as a data source, use Hexo to generate static pages, and deploy to EdgeOne Pages. The following will introduce the detailed operations of each step.

Configure WordPress

WordPress supports two deployment methods: WordPress.com managed hosting and self-hosting. The two methods are consistent in architecture principle, differing only in deployment location. Below, we will use WordPress.com managed hosting 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 hosting solutions, with the main differences 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 and above: Customizable plugins, 200GB or higher storage space.
Since we only use WordPress as a data source and content management tool, the integration methods in different solutions are basically the same. WordPress REST API v2 provides more complete endpoints, better performance optimization, richer features, and better backward compatibility, making it the most widely used version currently. Considering that most WordPress users choose the Business plan, which supports GraphQL data query mode, the following uses the Business plan 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 other basic information in the WordPress backend.
Install and configure the WPGraphQL plug-in to enable API support for GraphQL queries.


4. Preparing Data Content

To test the data access feature, you need to create some basic content.
Create several sample Posts
Set article categories (Categories)
Add article tags (Tags)
These contents will be used for subsequent testing of data synchronization and display functionality. Recommended to create 3-5 articles with different categories and tags to thoroughly test all functionalities. The following diagram shows the interface for creating articles and setting category tags.

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

5. Test Data Request

In the Business edition, we use the WordPress REST API v2 API to obtain data. Various types of data can be accessed via the following address:
Take retrieving an article list as an example. The returned data format of 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 posts API of version 2. If the returned data format matches the above example, it indicates that the API validation is normal. Subsequently, we can maintain the content of the site by editing posts, categories, tags, and other data.

6. Configuring API Access

Configure REST API access permissions and CORS policies in the WordPress backend to ensure the frontend application can securely access data. For WordPress.com managed sites, you need to configure allowed domains in the site settings. Specific steps are as follows:
1. Click "Settings" (Settings) in the left menu
2. Select the "General" option
3. In the "WordPress address" and "site address", ensure the correct domain is entered.
4. Click the "Save Change" button
After completing the above setup, the REST API will be automatically enabled. You can verify whether the API is working properly by accessing https://your-site.com/wp-json.

Generate Static Files

Before generating static pages, we need to first understand Hexo's content rendering rules. If you are unfamiliar with Hexo's content management specifications, you can refer to Hexo Official Documentation to learn more details.

Our template (wordpress-hexo-template) has implemented the receipt and conversion of WordPress REST API data, enabling automatic conversion of WordPress content into a format usable by Hexo. 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 a 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 the 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 that the environment meets the requirements, then first install the project dependencies:
# Install dependency.
npm install
After installation, you can start syncing WordPress content and launch the development server.
# Configure the WordPress data source and launch the development server.
# Replace https://your.site.url with your WordPress site address.
# For 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 a format usable by Hexo
Start the local development server to preview the effect
After executing the synchronization command, please check the source/_posts directory to see if the corresponding list of Markdown files has been generated. If you can see that all articles from WordPress have been converted to Markdown files, it indicates that the data synchronization is successful.

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

3. Packaging Static Files

First, let's start the local preview server to view the effect:
hexo server
After execution, visit http://localhost:4000 in the browser. You will see a preview effect similar to the figure below:

After confirming that 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, containing all static files.

Deploying to EdgeOne Pages

1. Publishing Code to Git

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


2. Importing a Project Into Pages

After submission, if you are already an EdgeOne Pages user and your GitHub account is associated, just access the console to deploy the corresponding project.



3. Adding an Environment Variable

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

Click the "Start Deployment" button, wait for the deployment to complete, and the deployment success interface will be displayed:

We have now completed the full deployment process of the Hexo solution. With this solution, you can:
Use WordPress to manage content and enjoy its powerful content management features
Generate static files using Hexo to achieve ultimate access speed
Realize automatic deployment through EdgeOne Pages and simplify ops
Obtain global CDN acceleration to enhance user experience


More Related Content

View more WordPress integration solutions: WordPress templates provided by EdgeOne Pages
Switch Hexo multi-theme styles: Hexo Official Theme List