Set up your own

Ready to deploy this project and start collecting your #TIL ("Today I learned") posts? The setup of a statically deployed React site on Netlify with data handled in Contentful takes only a few minutes!

TL;DR – what's gonna happen?

You will:

1. configure the Netlify one-click deploy
2. create a new Contentful space and create credentials that will be used in Netlify
3. kick off of a Netlify build that will set up your space and deploy your site
4. define a webhook in Contentful to trigger new builds in Netlify
5. clean up the "dangerous credentials"
6. be ready to share your daily learnings!

Ready? Hit the button (👇🏻) – the instructions here will give you guidance on what to do.

1. Configuration of the one-click deploy on Netlify

Netlify will ask you to connect with GitHub. This is needed because Netlify will create a new public repository in your GitHub account and add the code of this repository to it. You then have a complete copy of the source code and can start changing it to your needs.

Needed configuration parameters

After you granted permission to GitHub the Netlify deployment dialog will ask you for the following values:

Repository name: the name of the repository that will be created in your GitHub account (this one is entirely up to you)

Contentful Space ID: the ID of the Contentful space storing all your learnings

Contentful Content Management Token: a Contentful WRITE token which is used to set up Contentful with the right data structures

Contentful Content Delivery Token: a Contentful READ-only token which will power the React application

Netlify will use the Contentful-related values later and hand them over to the React application powering your learnings via process.env. So, let's have a look at where you can find these values!

2. Setup up of Contentful and space creation

First, you have to log in to Contentful and create a new space.

Create Content Delivery API Key and Space ID

Go to the "API Keys" sections under "Settings". This section is devived into "Content delivery / preview tokens" (READ-only) and "Content management tokens" (READ/WRITE). Under "Content delivery / preview tokens" you can then create a set of new API keys including a Content Delivery Key which will be used by the React application. You will also find the needed Space ID in the creation dialog.

Copy the Space ID and Content Delivery API - access token and paste them into the Netlify dialog.

Create Personal Access Token

Personal Access Tokens are an alternative to OAuth 2.0 Content Management tokens. These tokens have the same rights you as the user who creates them has (they're dangerous...), and they're perfect for writing automation scripts or, like in this case, bootstrap new spaces.

Generate a new Personal access token and copy/paste it into the Netlify dialog, too.

3. Deploy

Hit "Save & deploy"!

Netlify will now set up your Contentful space and deploy a new site for you.

4. Let Contentful trigger rebuilds in Netlify via webhooks

During the first deployment, an installation script was executed. This script configured a webhook URL stored in Netlify which will allow the triggering of rebuilds of your static site. You can now use this URL to let Contentful trigger updates on Netlify whenever content changed.

Grab the URL to under "Settings" and "Build & Deploy" and get ready to connect Contentful with Netlify.

Go to the "Webhooks" section in the Contentful "Settings" and add a Netlify Webhook template in the sidebar or go the short route.

5. Clean up code sections and "dangerous credentials"

Back to Netlify, you're now ready to have a first look at your deployed site. Open the deployed preview URL.

Whoops... the cleanup is still missing. Remember that the Personal Access Token has WRITE rights? Your Contentful space is now set up which means that you can revoke the token (it's the same place where you created it) and remove the environment variable REACT_APP_CTF_CMA_TOKEN from the Netlify environment variables.

The deployed React application will make use of the Contentful Delivery API to consume all the data. The personal access token that you set initially was only used to write the example data to your empty space. You space includes all the needed data and this is why you now should revoke this token as it has done its job. Always treat your personal access tokens carefully!

6. And you're done!

Congratulations! You can now start documenting your daily learnings easily!

To start working on it locally check out the Readme of the project.