The webpage has been updated. It no longer use as much of Contentful as before. Check out the blog bransch for the code referenced in this blog posts.
This is a guide to copy our open sourced website. You will be able to setup Contentful with some dummy content. But make sure you see it as a template for your site. To be able to edit the site knowledge about Next.js / React is required.
Feel free to ask any questions but the idea is to make it easy for you to test Contentful hosted on Netlify with a site developed in React.
So, at itiden we wanted a site where we would use Contentful as a "cloud CMS" and to host it on Netlify.
Since we have previous experience with Next.js (React) we decided to use it when building the page.
It's written in Typescript and we are using Tailwind as a "CSS framework" with Styled Components as the "CSS in JS" library.
The code is open sourced on Github (https://github.com/itiden/itiden.se) and you can feel free to clone it and use it as a template for your own website
Start by creating you own copy of the repo by clicking "Use this template" button on https://github.com/itiden/itiden.se
When you have your repo, clone it and copy the .env.example to .env and run yarn.
cp .env.example .env yarn
Now you need to setup Contentful to be able to fetch some content.
Create a new account if you don't have one already. After that you will need to create a empty space.
Your should now be on a screen where you are asked to add your first content type.
When your at that screen, install Contentful CLI by running
npm install -g contentful-cli.
Start by logging it to your account by running
If successful you will receive a token that will be saved on your computer.
Now you need to import some content types and content. There is a
contentful-export.json file in the repo.
contentful space import --space-id <your space id> --content-file contentful-export.json
You can find your space id in the URL on contentful:
Now reload the contentful page and click the "Use the Api" button.
On this page, copy the space id and Content Delivery API - access token to your .env file:
CONTENTFUL_SPACE=<space id> CONTENTFUL_TOKEN=<access token>
You can now run
yarn getcontent to fetch the content from Contenful and then
yarn dev to start your development server.
Read about Content Models here:
The following Contentful Content models have now been created in your space. The explanations are for how we are using them, but its up to you to use them like you want.
Currently there is only one Menu entry and that is the main top Menu.
The main menu contains Menu Item. Notice, the first menu item, named "Case" does not have an Menu Item. It is hard-coded in the front-end.
A menu item have a Label and a reference to a Page
A page has a Title, Slug (used for generating the URL), Description, Header and Body. Header and Body are "Rich text" field where you can add Entries. Currently the only Entry that will be rendered in the front-end is the Employee content model. Notice: the first page / is hard coded to display Case content.
These contents can be added to the Body field of an Page.
Case content is listed on the first page. They also receive the url /case/.
Category / Technology / Partner
These are all content that is added to a Case.
The config for what pages that should be exported to static pages exists in the
To create the static files, run
All created files will be exported to an
Create a account on Netlify if needed. Then start a new site based on your github repo.
When asked, set "Build command" to
yarn build and "Output directory" to
Go to Settings / Build & deploy / Environment.
Edit Environment and add the rows from your .env file.
Go to Deploys and Trigger deploy.
You have now received an Netlify URL for your site. Something like https://strange_text.netlify.com/
You now have a statically created serverless hosted React site!
In the top menu on Contenful, click Apps.
Install Netlify app and connect your account.
Then select the site you created.
When editing your content, your now have a "Build" button and an "Open preview" button to build your site on Netlify.
To add Google Analytics, just add your tracking ID to your .env and/or your Environment variables on Netlify.
CONTENTFUL_SPACE=<space id> CONTENTFUL_TOKEN=<access token> GA=<tracking ID>