Gatsby v3 - Decap CMS - Chakra-UI - Starter

An example website built using Gatsby v3, Decap CMS and Chakra-UI.

It's a website of a fake urban gardening agency and comprises of a landing page, a project portfolio, about page with team members, and a contact form.

👉 Check out the demo site!

🦾 Technologies and Plugins

• ⚛️ Gatsby v3
• ✍️ Decap CMS (incl. Admin live preview for all pages)
• 💨 Chakra-UI for styling
• 🌃 Performant images with gatsby-plugin-image and gatsby-plugin-sharp
• 🗺 Sitemap with gatsby-plugin-sitemap
• 🤖 Robots.txt with gatsby-plugin-robots-txt
• 🧩 Persistent navbar and footer with gatsby-plugin-layout
• ...

💻 Local Development

Start development environment with

$ npm install
$ gatsby develop

The site is now available at localhost:8000/.

You can connect Decap CMS to your local git repo (currenly a beta feature) by running this command in a separate terminal.

$ npx decap-server

The Decap CMS Admin will then be available at localhost:8000/admin.

For more details on how to set up the CMS, check out the Decap CMS Docs.

🚨 Known issues

When running Decap CMS locally and updating a page, I regularly get the following error:

There was an error in your GraphQL query: Field "image" must not have a selection since type "String" has no subfields.

This seems to have to do with the gatsby-remark-relative-images plugin. However, the solution suggested in the docs didn't fix the issue for me.

I've you find a solution that works, please let me know or submit a pull request. Thanks!

🙌 Credits and thanks

• This template was inspired by gatsby-starter-netlify-cms
• Taylor Bell for his great course Build a Blog with React and Markdown using Gatsby, available for free on Egghead.io
• Unsplash and photographers for amazing photos
• How to hide and show navbar on scroll: https://dev.to/pratiksharm/navbar-hide-and-show-on-scroll-using-custom-react-hooks-1k98
• How to use prevent layout components from unmounting: https://www.gatsbyjs.com/docs/how-to/routing/layout-components/#how-to-prevent-layout-components-from-unmounting

🛠 Todo

• Google analytics? https://www.gatsbyjs.com/plugins/gatsby-plugin-gtag/?=google%20analytics#gatsby-plugin-gtag
• gatsby plugin offline?