Unlock 1 Year of EdgeOne + 1TB CDN: Join Our Developer Journey
Get Started Now !
Build an Ecommerce Platform Using WordPress + GatsbyJS
Introduction: Technological Choices For Modern Ecommerce
Advantages Of the JAMStack Architecture
The JAMStack architecture is a modern web development architecture pattern that achieves high performance and high security website architecture through pre-rendering and service decoupling.
JAMstack = JavaScript + APIs + Markup
This architecture is reshaping the modern web development paradigm, showing significant advantages in ecommerce scenarios that require high performance and low-cost ops:.
Speed is conversion rate.
Security
Scalability
SEO and accessibility
Lower cost
This article introduces how to quickly build a high-performance, easy-to-maintain e-commerce website based on a Pages template with a JAMStack architecture, and implement common dynamic features such as login, shopping cart, and orders, so that you can quickly build your own high-performance e-commerce website.
The backend CMS chosen here is the very popular WordPress + WooCommerce.
Environment Construction and Configuration
WordPress Backend Construction
Docker Deployment (Recommended)
We provide a docker project that can be directly deployed, which can be deployed to your server using Docker containers.
The installation and deployment of the Docker environment can refer to Tencent Cloud Lightweight Server Docker Container Environment.
After the deployment is complete, open wp-admin: https://your.site.domain/wp-admin/admin.php.
After logging in, you can see the configured product information and page.

Self-Built
If you already have your own WordPress service and want to extend e-commerce features, you can also configure the environment yourself according to the following steps:
Step 1: Install the plug-in
Install the following plug-ins in your WordPress service and activate them:
Advanced Custom Fields
JWT Authentication for WP-API
WooCommerce
WPGraphQL
WPGraphQL for ACF
WPGraphQL for WooCommerce
WPGraphQL JWT Authentication
Step 2: Import/Create a product
After activating the WooCommerce plug-in, click on Products in the Navbar to enter the product management page.
You can create products according to your needs

Step3:
First, create the following webpages for displaying the homepage banner.
-/highlight
-/promotion
-/sample-page
After the import is complete, go back to the page created above to edit and fill in the ACF data.

Edit and then publish.
Front-End Template
After deploying the backend service, select the WordPress Woocommerce Template on the Pages platform and configure the service address into the environment variable of the Edgeone Pages project.
Create a project and wait for the deployment to complete.

Click the link to see the complete page.
