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!
- ⚛️ 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
- ...
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.
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!
- 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
- Google analytics? https://www.gatsbyjs.com/plugins/gatsby-plugin-gtag/?=google%20analytics#gatsby-plugin-gtag
- gatsby plugin offline?