Gatsby Netlify CMS Starter Template

---

LIVE DEMO

A fully-responsive Gatsby based web-app template which can be easily hosted on any platform. This web-app uses the Netlify CMS as its content management system.

It follows the JAMstack architecture by using Git as a single source of truth, and Netlify for continuous deployment, and CDN distribution. Surely you can use a different host. Netlify CMS and Netlify are two different products and not to be confused as one dependent on another. You are free to use both in combination and separately as well.

A detailed blog post on how you can use this template for your blog (for free obviously) can be found here

Getting Started

There are two ways you can use this template

1. First Approach(Recommended) Use the button below and it'll automatically take you to the netlify and ask you to create a repository on your behalf in Github/Gitlab/Bitbucket as per you select. This is the recommended approach as it automatically takes care of all the process steps. You don't need to do anything else.

   

2. Second Approach Do it manually. It requires you to clone/fork this repository in your Github account, and setup the development environment in your system, install all the dependencies and then setup netlify account to pull the github published code for deployment. This approach is for advanced users as it allows users to edit the code and tweak the code as per preferences and it requires knowledge of code, development environment, deployment etc.

A Screenshot of the Blog Post.

Features

• A simple blogging web-app built with Netlify CMS
• Editable Pages: About, Blog-Collection and Contact page with Netlify Form support
• Custom 404 page
• Tags support: Separate page for posts under each tag
• Scroll to Top button on every page
• Create Blog posts from Netlify CMS
• Uses Bulma for styling, but size is reduced by purge-css-plugin
• Blazing fast loading times thanks to pre-rendered HTML and automatic chunk loading of JS files
• Uses gatsby-image with Netlify-CMS preview support
• Separate components for everything
• Perfect score on Lighthouse for SEO, Accessibility and Performance

Prerequisites for the development environment

For local development, you need

• Node (v8.2.0 or higher)
• Gatsby CLI
• Netlify CLI

Setting up the CMS

Follow the Netlify CMS Quick Start Guide to set up authentication, and hosting. You would need to enable Identity in the Netlify account if you are using Netlify for website deployment.

Debugging

Windows users might encounter node-gyp errors when trying to npm install. To resolve, make sure that you have both Python 2.7 and the Visual C++ build environment installed.

npm config set python python2.7
npm install --global --production windows-build-tools

Full details here

MacOS users might also encounter some errors, for more info check node-gyp. We recommend using the latest stable node version.

Purgecss

This plugin uses gatsby-plugin-purgecss and bulma. The bulma builds which usually generate a ~170Kb of .css file are reduced 90% by purgecss resulting in a .css file which at max is 16-18Kb.

Contribution

Contributions are always welcome, no matter how large or small. Before contributing, please read the code of conduct.

Upcoming Features in Next version (TODO)

• Dark Theme
• Comment functionality
• Likes functionality

License

This repository has MIT license which can be found here.