WordPress Integration
This document primarily introduces how to use WordPress as a headless CMS, combined 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 is responsible for converting the content into high-performance static pages. Currently, mainstream static site generators include Hexo and Gatsby, each with distinct characteristics: Hexo is widely popular for its simplicity, ease of use, and rich theme ecosystem, while Gatsby provides more powerful data fetching and build capabilities. Considering the needs of most users, this document will use Hexo as an example to detail how to integrate WordPress with a static site generator, and how to deploy and accelerate the site via EdgeOne Makers.
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.
WordPress integration primarily consists of the following three steps: configuring WordPress as a data source, using Hexo to generate static pages, and deploying to EdgeOne Makers. The following sections detail the specific 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
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:
Categories: https://your-site.com/wp-json/wp/v2/categories
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 repositorymkdir wordpress-hexo-template && cd wordpress-hexo-templategit init# Add 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 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 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 pathWP_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 Makers
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 Makers
After the commit is completed, if you are already an EdgeOne Makers user and have linked your GitHub account, access 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
Automate deployment with EdgeOne Makers to simplify Ops work.
Get global CDN acceleration to enhance user experience
More Related Content
View more WordPress integration solutions: WordPress templates provided by EdgeOne Makers
Switch Hexo theme styles: Hexo official theme list
