I'd like to summarize how I created this blog and what things I'm planning to improve it.

Setup

I followed the getting started guide from Contentful to learn more about contentful.

Then I started my local project with the follwing commands:

• git clone https://github.com/contentful/starter-gatsby-blog.git to clone the starter project for a simplified version. But after doing some work on the project I would probably start with contentful-userland/gatsby-contentful-starter as this is already using Gatsby v2 and is pretty similar to the other repo.
• cd .\starter-gatsby-blog\
• yarn to install all dependencies
• Sign-up & Login to contentful web app and checkout spaceId, deliveryToken & managemntToken
• Run yarn setup script with your contentful keys (see below) this will generate some example posts & create the contentful config file .contentful.json
• yarn dev should start your local development server with some example content - check it out in a browser by opening localhost:8000

Setup command

yarn run setup --spaceId <your-space-id-here> --deliveryToekn <your-delivery-token> --managementToken <your-management-token>

Now you can try contentful by going to the contentful web app backend and open your space. Add a new post and publish it. After your local devServer build your static site you should see your post in the browser.

Deployment

I'm deploying the blog to Netlify. Manually deploying is possible by using the cli (see 2 in list below) but I'd like to have a webhook that is doing this for me. So deploying new content only requires a publish in contentful web app and Netlify will automatically rebuild the new static site for me. Some setup is required to make this work:

1. I've installed netlifyctl with scoop by following the README guide
2. You can also test deployment by manually calling yarn build && netlifyctl deploy -b public
3. Once the cli is installed use netlifyctl login to login to netlify
4. Setup git

• Remove the old remote by calling git remote remove origin
• Create a new repository on Github and add it to your local project /<your-new-blog
• Push your project to Github with git push -u origin master

5. Visit Netlify settings page of your created site by going to Settings / Build & Deploy in Continous Deployment add your github repo and add gatsby build as build commad and public/ as publish directory (see screenshot below)

6. On the same settings page in Netlify add two environment variables so Gatsby build is working. CONTENTFUL_SPACE_ID & CONTENTFUL_DELIVERY_TOKEN (Same token as you've used to configure it locally). The environment variables are used in gatbsy-config.js file in the root of the project. If you won't add it Netlify build will fail. 7. Add a build hook to your Netlify settings by following this guide. 8. So everything is setup and can be tested by creating or updating a post in Contentful. Every publish will trigger a rebuild of the static site. 9. (Optional) Add a custom domain to Netlify. Goto settings/Domain management and click on Add domain alias - Note: To get this working you have to add the CNAME value to your Netlify url at your domain registration service (e.g. Godaddy, Strato, ...). Also adding a dot at the end of the CNAME url was important for me blog-awolf.netlify.com.

Improvements

I'd like to customize the following points:

• Link a custom domain to netlify e.g. blog.alexanderwolf.tech
• Migrate to Gatsby v2
• Customize styling and change styling to styled-components
• Add a reading time info
• Add share feature Twitter, Facebook & Linkedin.
• Add Javascript syntax highlighting with Prismjs. (I'll write a separate post about the usage but you can find a snippet below)
• Add a way to get comments on each post e.g. with Contentful or Disqus

Short example Javascript snippet:

let callCount = 0;
function greeting(message) {
  callCount++;
  console.log('Just a test', message);
}

#Conclusion I'm pretty happy with my setup now and just some smaller things are open. I'll check these later. Things to check / improve:

• Configure Contentful environments (e.g. master & devel) so they're triggering a rebuild on Netlify
• Use Preview API on devel branch so drafts can be reviewed in the cloud - currently only possible locally.

If you'd like to get more details to the modifications that I have added to the Contentful starter please let me know and I'll write more about it in a separate post.

The source code of the blog is in a private repo on Github but I'll make it public once I've updated the README.