Contentful takes on a new approach to content management. You develop great websites - we deliver the content. From functionality to documentation, we have put a lot of effort into making Contentful as developer friendly as possible.
The application you're about to make is a blog with a few sample posts. It will be built with Node.js to create a low maintenance website backed by our reliable CDN and APIs.
We'll also go through how to quickly deploy the site in the cloud using Zeit's serverless hosting.
How to build your first website with Contentful
All it takes to build your first Contentful powered website are a few easy steps. In doing these steps you will not only create and deploy a website, you will also learn how our technology works under the hood.
What we'll be doing:
- Create your free Contentful account
- Clone a sample repo and install a few dependencies
- Create a new "data bucket", or space, to store content
- Generate a Content Management API access token
- Generate a Content Delivery API access token
- Import data into the space
- Customize the config file
- Time for a test run
- Cloud deployment with Now
This guide assumes that you have Node.js installed, along with a Github account.
Create your free Contentful account
For this guide to work, you need to create your free account. Don’t worry - it only takes a minute to signup and we promise not to spam you.
Clone a sample repo and install a few dependencies
The second thing we need to do is to clone the sample repo from github:
git clone firstname.lastname@example.org:contentful/blog-in-5-minutes
Once you have the local clone in place, change into the blog-in-5-min directory and install the required dependencies:
Create a new "data bucket", or space, to store content
In the Contentful world, a space is a data bucket used to store the content that will later appear inside your apps. Like a database table, content is described and stored using a data model. A key feature is that you get to define the data model yourself to fit your needs.
To create a new space, press in the space overview button in the top left corner of the web app followed by Add new Space. Give the space a fitting name, and click the Create space button.
Generate a Content Management API access token
We’ll soon be importing a few sample blog posts from our cloned repo into the newly created space. But for that to work, you need to generate your personal Content Management API access token.
The Content Management API access token is used for write access to your space. It should therefore be treated as a secret.
To generate a personal Content Management API token, navigate to APIs in the top level menu, click Content Management Tokens and then Generate Personal Token.
Give the token a suitable name and click Generate
Copy the token value and store it somewhere safe - you’ll be needing it in a minute.
Generate a Content Delivery API access token
We deliver content to your apps via a number of APIs. To ensure that your apps are restricted to read-only access to your data, they connect using a Content Delivery API access token.
Create a new Content Delivery API access token by selecting APIs in the top level menu. Click Content Delivery / Preview tokens and then Add API key on the right hand side.
Make a note of both your Space ID, and your personal Content Delivery API access token.
Import data into the space
The next step is to import some sample data from your local repo into your space.
This is done by executing the
npm run import-data command together with your Space ID and the Content Management API access token like so:
npm run import-data -- --space-id YOUR_SPACE_ID --management-token YOUR_CONTENT_MANAGEMENT_ACCESS_TOKEN
Customize the config file
The last step before we launch the web app is to create the
.contentful.json config file.
Do this by renaming the
.contentful.sample.json file in the root directory to
After renaming the file to .contentful.json, you will need to change three values:
Explanation of the three variables that you need to change to run the app:
CTF_SPACE_ID is the Space id where we stores your data.
CTF_CDA_ACCESS_TOKEN is the read-only Content Delivery API access token so that you can fetch the data from your space and display it in your app.
CTF_CMA_ACCESS_TOKEN is the Content Management API access token used to upload new content to the space.
The config file should look like so:
Time for a test run
You can run the website locally by executing
npm run dev.
That’s it - you’re done. What remains is for you to browse to http://127.0.0.1:3000 and view your first site built with Contentful.
Cloud deployment with Now
An easy was to deploy your site in the cloud is to use Now.
Now is a fairly new service by Zeit, which also provides static hosting. If you run
npm run deploy, you'll be asked for your email address. Once you have confirmed your e-mail address, the website will make it's way to the cloud.
Now also offers the possibility to buy domains with a single command. This way of deploying Contentful powered code could not be easier.
Further deployment methods
Apps built with Contentful are not locked to any specific deployment platform. Here's info on how to deploy the app on Heroku, Dokku, Surge.sh and Github.
It only took a few minutes to go from scratch to a simple but functional blog using Contentful. However, we’ve barely scratched the surface of what Contentful can do for you and your projects.
Summary and further reading
Worth pointing out is that Contentful is a cloud-based solution for content infrastructure. This means that we deliver content via our global CDN and restful APIs. Our content infrastructure is designed to auto-scale so that your content is always available regardless of load peeks and user growth.
Another reason to get on board is that we, unlike a CMS, will provide you with true separation between content and presentation. You style your apps your way - we deliver the content.
We also suggest that you head over to the Developer center to learn more about how our technology works, and what it can do for you and your projects.