First, [create an account on Contentful](https://www.contentful.com/sign-up/).
After creating an account, create a new **space** from the [dashboard](https://app.contentful.com/) and assign to it any name of your liking.
After creating an account, create a new empty **space** from the [dashboard](https://app.contentful.com/) and assign to it any name of your liking.
### Step 2. Create an `author` content type
### Step 2. Create a content model
The [content model](https://www.contentful.com/developers/docs/concepts/data-model/) defines the data structures of your application/websites. The structures are flexible and you can tailor them to your needs.
For this example you need to create a content model that defines an author and a post content type. **You can create these two by running a script or by doing it manually** to familiarize yourself with the Contentful user interface.
#### Run a script to create the content model
This project includes a setup script which you can use to set up the content model expected by the source code.
In your Contentful dashboard go to **Settings > General Settings** and copy the **Space ID**.
Next, go to **Settings > API > Content management tokens** and create a new token by clicking **Generate personal token**. This token has the same access rights as the logged in user. **Do not share it publicly**, you will only use it to set up your space and can delete it afterwards.
With the space ID and management access token at hand run the following command:
```
npx cross-env CONTENTFUL_SPACE_ID=YOUR_SPACE_ID CONTENTFUL_MANAGEMENT_TOKEN=XXX npm run setup
```
This command will create the needed content structures and set up your Contentful space ready to use. The output should look as follows:
-`excerpt` - **Text** field (type **Long text, full-text search**)
-`coverImage` - **Media** field (type **one file**)
-`date` - **Date and time** field
-`slug` - **Text** field. You can optionally go to the settings of this field, and under **Appearance**, select **Slug** to display it as a slug of the `title` field.
-`author` - **Reference** field
-`author` - **Reference** field (type **one reference**)
Save the content type and continue.
### Step 3. Validate your content model
After setting up the content model (either manually or by running `npm run setup` or `yarn setup`), it should look as follows.
**Content model overview**
### Step 4. Populate Content
Go to the **Content**page in your space, then click on **Add entry** and select the **author** content type:
Go to the **Content**section in your space, then click on **Add entry** and select the **Author** content type:
- You just need **1 author entry**.
- Use dummy data for the text.
- For the image, you can download one from [Unsplash](https://unsplash.com/).
Next, add a new entry to **post**:
Next, create another entry with the content type **Post**:
- We recommend creating at least **2 post entries**.
- Use dummy data for the text.
- You can write markdown for the **content** field.
- For images, you can download them from [Unsplash](https://unsplash.com/).
- Pick the **author** you created earlier.
**Important:** For each entry, you need to click on **Publish**. If not, the entry will be in draft state.
**Important:** For each entry and asset, you need to click on **Publish**. If not, the entry will be in draft state.
From your contentful space, go to **Settings > API keys**. There should be an example Content delivery / preview token - you can use this API key. (You may also create a new key.)
From your contentful space, go to **Settings > API keys**. There will be an example Content delivery / preview token - you can use these API keys. (You may also create a new key.)
Next, copy the `.env.example` file in this directory to `.env` (which will be ignored by Git):
...
...
@@ -93,8 +156,8 @@ cp .env.example .env
Then set each variable on `.env`:
-`NEXT_EXAMPLE_CMS_CONTENTFUL_SPACE_ID` should be the **Space ID** field of your API Key
-`NEXT_EXAMPLE_CMS_CONTENTFUL_ACCESS_TOKEN` should be the **Content Delivery API - access token** field of your API key
-`NEXT_EXAMPLE_CMS_CONTENTFUL_PREVIEW_ACCESS_TOKEN` should be the **Content Preview API - access token** field of your API key
-`NEXT_EXAMPLE_CMS_CONTENTFUL_ACCESS_TOKEN` should be the **[Content Delivery API](https://www.contentful.com/developers/docs/references/content-delivery-api/) - access token** field of your API key
-`NEXT_EXAMPLE_CMS_CONTENTFUL_PREVIEW_ACCESS_TOKEN` should be the **[Content Preview API](https://www.contentful.com/developers/docs/references/content-preview-api/) - access token** field of your API key
-`NEXT_EXAMPLE_CMS_CONTENTFUL_PREVIEW_SECRET` should be any value you want. It must be URL friendly as the dashboard will send it as a query parameter to enable preview mode
Your `.env` file should look like this:
...
...
@@ -122,9 +185,9 @@ Your blog should be up and running on [http://localhost:3000](http://localhost:3
### Step 7. Try preview mode
On your contentful space, go to **Settings > Content preview**, then add a new content preview for development.
In your Contentful space, go to **Settings > Content preview** and add a new content preview for development.
The **Name** field may be anything, like `Development`. Then, under **Content preview URLs**, check **post** and set its value to:
The **Name** field may be anything, like `Development`. Then, under **Content preview URLs**, check **Post** and set its value to:
