Gatsby Netlifycms Tailwind Starter

senditagile

Gatsby v3 - Netlify CMS - Tailwind CSS - Starter

An example website built using Gatsby v3, Netlify CMS and Tailwind CSS.

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
✍️ Netlify CMS (incl. Admin live preview for all pages)
💨 Tailwind CSS for styling
🌃 Performant images with gatsby-plugin-image and gatsby-plugin-sharp
⛑ Site metadata with react-helmet
🗺 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

$ git clone https://github.com/jimmybutton/gatsby-netlifycms-tailwind-starter.git
$ cd gatsby-netlifycms-tailwind-starter
$ npm install
$ gatsby develop

The site is now available at localhost:8000/.

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

$ npx netlify-cms-proxy-server

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

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

🚨 Known issues

When running Netlify 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
Merakiui.com for the great free Tailwind CSS components
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?

Top categories