Learn what Contentful is and how to use it (2024)

Introduction

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 usingZeit's serverless hosting.

How to build your first website withContentful

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

Requirements

This guide assumes that you haveNode.js installed, along with aGithub account.

Create your free Contentful account

For this guide to work, you need tocreate 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 git@github.com: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:

npm install

Create a new "data bucket", or space, to storecontent

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 accesstoken

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 accesstoken

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 AddAPI keyon 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 configfile

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 '.contentful.json'.After renaming the file to .contentful.json, you will need to change three values: 'CTF_SPACE_ID', 'CTF_CDA_ACCESS_TOKEN' and 'CTF_CMA_ACCESS_TOKEN'.

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:

{ "CTF_PERSON_ID": "15jwOBqpxqSAOy2eOO4S0m", "CTF_BLOG_POST_TYPE_ID": "blogPost", "CTF_SPACE_ID": "SPACE_ID", "CTF_CDA_ACCESS_TOKEN": "CDA_ACCESS_TOKEN", "CTF_CMA_ACCESS_TOKEN": "CMA_ACCESS_TOKEN"}

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 tohttp://127.0.0.1:3000and 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 byZeit, 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 tobuy domains with a single command.This way of deploying Contentful powered code could not be easier.

Further deploymentmethods

Apps built with Contentful are not locked to any specific deployment platform. Here's info on how to deploy the app onHeroku,Dokku,Surge.shandGithub.

What'snext

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

A good reason to try our platform out is to experience its speed and flexibility. No matter what stack you use, integration between your code and Contentful couldn’t be easier. We have SDKs for the most common languages likeJavaScript,PythonandPHP.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 recommend that you get familiar withour JavaScript demo, head over to theGuides and tutorialssection, and then read aboutour GraphQL integration.We also suggest that you head over to theDeveloper centerto learn more about how our technology works, and what it can do for you and your projects.