/gatsby-netlifycms-tailwind-starter

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

Primary LanguageJavaScriptBSD Zero Clause License0BSD

Gatsby   Netlify CMS   Tailwind CSS

Gatsby v3 - Netlify CMS - Tailwind CSS - Starter

Netlify Status

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

🛠 Todo