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
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:
Categories: https://your-site.com/wp-json/wp/v2/categories
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 repositorymkdir wordpress-hexo-template && cd wordpress-hexo-templategit init# Add a remote repositorygit remote add origin https://github.com/TencentEdgeOne/pages-templates.git# Enable sparse-checkout and set to only get Hexo templategit sparse-checkout set examples/wordpress-hexo-template# Pull contentgit pull origin main# Move files to the current directorymv 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 syncedsource/tags.json
: Confirm whether the tag data of WordPress has been syncedIf 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