Contentful is a cloud-based Headless CMS that manages and distributes content via APIs. Compared with traditional CMS, Headless CMS achieves separation of content and frontend, making it easy to adapt to multiple platforms, improving development efficiency and flexibility in content management.
Overview
This article introduces how to use Contentful as a content management system, combined 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 an 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 your website will automatically display the latest content.
If you want to develop and debug locally, you can also retrieve the template from GitHub, and complete local deployment and preview according to the subsequent instructions in this document.
The integration of Contentful is divided into three main steps: Contentful configuration, generating static files, and deploying to EdgeOne Pages. The following details the specific operations for each step.
Configure Contentful
1. Create a Contentful Account
Access 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 advisable to first understand its core concepts and configurations. Contentful provides detailed Chinese documentation. It is recommended to visit Contentful Official Documentation to learn about the following core concepts:
Space (space): An independent workspace for content management
Content Model (content model): A framework that defines the content structure
Content Type (content type): Templates for different types of content
Fields (fields): Specific attributes of content
Entries (entries): Content created based on a model
Assets (resources): Media files such as images and videos
Webhooks (hook): Automatic trigger mechanism for content updates
API Keys (api key): Credential for accessing content
Get familiar with these concepts, and we can start creating a Space:
After creating a Space, you don't need to manually configure Content Model, Fields, etc. EdgeOne's integration template already includes complete configuration examples. We can use Contentful's command line tool (contentful-cli) to automatically generate all necessary configurations by importing a JSON file (specific import details will be explained in the "Generate static files" section below). This ensures configuration consistency and saves manual configuration time.
3. Configuring API Access
Before starting to import configuration, we need to configure API access first. API access configuration is key to connecting Contentful with the static site generator, allowing us to securely retrieve and manage content through API. In the Contentful console, enter the "Settings" > "API keys" page, 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 published content, suitable for static site generators.
Content Management API: Used for management content, used when importing configuration.
API Endpoint: The access address of the API, typically https://cdn.contentful.com
Carefully save this information. They will be used in subsequent configuration.
Generating Static Files
We mentioned earlier that contentful-cli will be used to import default data. Before starting, it is advisable to understand the basic usage of contentful-cli. If you are not familiar with contentful-cli, see 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 log in to your Contentful account. This step is to import the blog post data model provided by the template.
Install: Execute the npm install -g contentful-cli command to globally install Contentful CLI.
Log in: After installation, execute contentful login. The CLI will open a browser window. Follow the prompts to complete the login operation.
3. Importing 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, modifications are allowed to this file to adapt to your needs. This document will use the default blog model as an example for explanation.
After logging in, run 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, please visit Contentful Management Interface to check whether the preset content model and sample data have been generated. If you can see these contents, it means the import is successful. We can go to next step: read Contentful API data and generate webpage content.
4. Get Contentful Data
The template has already configured access to the Contentful API. You can use the following command to test the API connection:
If configured correctly, the following data will be returned:
{
"sys":{
"type":"Array"
},
"total":1,
"skip":0,
"limit":100,
"items":[
{
"sys":{
"id":"example-post",
"type":"Entry",
"contentType":{
"sys":{
"id":"blogPost"
}
}
},
"fields":{
"title":"sample blog article"
"slug":"example-post",
"content":"This is the content of a sample blog article..."
"publishDate":"2024-03-20T00:00:00.000Z",
"tags":["sample","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 effect locally:
The above verification steps are only for confirming whether the configuration is correct. In actual use, you do not need to modify the code in src/util/contentful.js, as it will automatically retrieve the Space ID and Access Token from the environmental variables configured in the EdgeOne console. This avoids exposing your account information in the code and ensures privacy.
Deploying to EdgeOne Pages
1. Publishing Code to Git
Commit the code to the git repository to complete the deployment. Assuming you have created the blog-with-retypeset-and-contentful project and associated the current directory with it, use the following command to submit:
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 your GitHub account is already associated, just access the Console to deploy the corresponding project.
3. Adding an Environment Variable
Click deploy blog-with-retypeset-and-contentful. On the preparation 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
After the configuration is complete, click the "Start Deployment" button. Wait for the deployment to complete, and the deployment successful interface will display:
We have completed the full deployment process of the Contentful solution. With this solution, you can:
Use Contentful to manage content and enjoy its powerful Headless CMS functionality
Leverage AstroJS to generate static files and obtain ultimate access speed
Realize automatic deployment via EdgeOne Pages Simplify ops
Obtain global CDN acceleration to enhance user experience
