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.
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:
This guide assumes that you have Node.js installed, along with a Github account.
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:
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.
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.
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.
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
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:
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.
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.
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.
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.