Contentful is a cloud-based Headless CMS that manages and distributes content via APIs. Compared with traditional CMS, Headless CMS implements the separation of content and frontend, making it easy to adapt to multiple platforms and improve development efficiency and content management flexibility.
Overview
This article introduces how to use Contentful as a content management system and combine it with the AstroJS static site generator to build a blog site. With the one-click deployment feature of EdgeOne Pages, you can quickly deploy your website to global CDN nodes, achieving millisecond-level access speed. The "zero JavaScript overhead" feature of AstroJS combined with EdgeOne's global acceleration capability provides your blog with the ultimate access experience.
Getting Started
To help you get started, we use Contentful and AstroJS to build a template. After deployment, just adjust the content configuration in Contentful, and the website will automatically display the latest content.
If you want to perform local development and debugging, you can also get the template from GitHub and complete local deployment and preview according to the instructions in this document.
The integration of Contentful is divided into three main steps: Contentful configuration, generating static files, and deployment to EdgeOne Pages. The following introduces each step in detail.
Contentful Configuration
1. Create a Contentful Account
Visit Contentful Official Website, click "Log in" to start registration. During the process, you need to fill in basic information and choose a suitable package. For personal blogs or small projects, the free edition is sufficient.
2. Create a Content Model
After registering a Contentful account, it is recommended to first learn about its core concepts and configuration items. Contentful provides detailed Chinese documentation. Visit Contentful official documentation to learn the following core concepts:
Space: A standalone workspace for content management.
Content Model: A framework for defining content structure.
Content Type: Template for same type of content.
Fields: Specific attributes of content.
Entries: Content created based on the model.
Assets: Media files such as images and videos.
Webhooks: Automatic trigger mechanism for content updates.
API Keys: Credentials for accessing content.
Get familiar with these concepts, you can start creating a Space:
After creating a Space, you don't need to manually configure Content Model, Fields etc. The EdgeOne integration Template already includes a complete configuration example. We can use Contentful's command line tool (contentful-cli) to automatically generate all required configurations via importing a JSON file. Specific import details will be explained in the "Generate static files" section below. This ensures configuration consistency and saves time on manual configuration.
3. Configuring API Access
Before starting the import configuration, we need to configure API access privileges first. API access configuration is key to connecting Contentful with the static site generator, allowing us to securely obtain and manage content through API. In the Contentful console, enter the "Settings" > "API keys" webpage, where we can create and manage API keys.
In the API configuration interface, you need to pay special attention to the following information:
Space ID: Located at the top of the interface, it is the unique identifier of your content space.
Content Delivery API: Used to obtain released content, suitable for static site generator usage.
Content Management API: Used to manage content and will be used when importing configuration.
API Endpoint: The access address for the API, typically https://cdn.contentful.com
Keep this information secure. They will be used in follow-up configuration.
Generating Static Files
Earlier we mentioned that contentful-cli will be used to import default data. Before starting, it is advisable to learn about the basic usage of contentful-cli. If you are not familiar with contentful-cli, see the contentful-cli official documentation to learn more details.
Now we start generating static files. First, download the Contentful integration template:
Enter the template directory, then run the following command to install dependencies: npm install.
2. Install and Log in to Contentful
Next, we need to install the Contentful CLI tool and sign in to your Contentful account to import the blog post data model provided by the template.
Install: Run the npm install -g contentful-cli command to globally install Contentful CLI.
Log in: After installation, run contentful login. The CLI will open a browser window. Complete the login operation as prompted.
3. Import Model and Data
The template contains the contentful-blog-model.json file, which is a preset blog content model configuration. If you have your own website data structure, this file can be modified to suit your needs. This document uses the default blog model as an example.
Log in and use the following command to import configuration:
contentful space import --content-file contentful-blog-model.json --space-id ${your space id}
After the import is complete, visit the Contentful Management Interface to check whether it has generated the preset content model and sample data. If you can see these contents, the import is successful, and we can go to the next step: read Contentful API data and generate web content.
4. Get Contentful Data
The Template is already configured to access the Contentful API. The following command can be used to test the API connection:
If configured correctly, it will return data similar to the following:
{
"sys":{
"type":"Array"
},
"total":1,
"skip":0,
"limit":100,
"items":[
{
"sys":{
"id":"example-post",
"type":"Entry",
"contentType":{
"sys":{
"id":"blogPost"
}
}
},
"fields":{
"title":"Example blog article",
"slug":"example-post",
"content":"This is the content of an example blog article..."
"publishDate":"2024-03-20T00:00:00.000Z",
"tags":["example","tutorial"]
}
}
]
}
After confirming the API can be accessed normally, if you want to perform local verification to check whether the configuration is correct, you can open the src/util/contentful.js file and fill in your Space ID and Access Token.
Then run the npm run dev command to preview the website locally.
Note: The above verification step is only for confirmation. In actual use, no modification required for the src/util/contentful.js code, as it will automatically obtain the Space ID and Access Token from the environmental variable in the EdgeOne console configuration. This way avoids exposing your account information in code and ensures privacy.
Deploying to EdgeOne Pages
1. Publishing Code to Git
Submitting code to the git repository will complete the deployment. Assuming you have created the blog-with-retypeset-and-contentful project and associated the current directory with it, run the following command to commit:
gitadd.
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, 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:
CONTENTFUL_SPACE_ID: Fill in your Contentful Space ID
CONTENTFUL_PREVIEW_TOKEN: Fill in your Contentful Preview Token
CONTENTFUL_DELIVERY_TOKEN: Fill in your Contentful Delivery Token
Once configured, click the Start Deployment button, wait for deployment to complete, and the deployment successful interface will display.
We have completed the Contentful solution deployment. With this solution, you can:
Use Contentful to manage content and enjoy its powerful Headless CMS functionality
Use AstroJS to generate static files for ultimate access speed
Realize automatic deployment with EdgeOne Pages to simplify ops
Global CDN acceleration to enhance user experience
