Note: This repo uses Gatsby v2.
This repo is a clone of an example business website that is built with Gatsby, and Netlify CMS: Repo Link Demo Link.
It follows the JAMstack architecture by using Git as a single source of truth, and Netlify for continuous deployment, and CDN distribution.
- A simple landing page with blog functionality built with Netlify CMS
- Editabe Pages: Landing, About, Product, Blog-Collection and Contact page with Netlify Form support
- Create Blog posts from Netlify CMS
- Tags: Separate page for posts under each tag
- Basic directory organization
- 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
- Netlify deploy configuration
- Netlify function support, see
lambda
folder - Perfect score on Lighthouse for SEO, Accessibility and Performance (wip:PWA)
- ..and more
- Node (Original author recommends using v8.2.0 or higher)
- Gatsby CLI
- Netlify CLI
Netlify CMS can run in any frontend web environment, but the quickest way to try it out is by running it on a pre-configured starter site with Netlify. The cloned repo uses an example company template. Follow those getting started directions here Repo Link
Pulldown a local copy of the Github repository Netlify created for you, with the name you specified in the getting started directions
$ git clone https://github.com/[GITHUB_USERNAME]/[REPO_NAME].git
$ cd [REPO_NAME]
$ yarn
$ netlify dev # or ntl dev
This uses the new Netlify Dev CLI feature to serve any functions you have in the lambda
folder.
To test the CMS locally, you'll need run a production build of the site:
$ npm run build
$ netlify dev # or ntl dev
Media Libraries have been included in this starter as a default. If you are not planning to use Uploadcare
or Cloudinary
in your project, you can remove them from module import and registration in src/cms/cms.js
. Here is an example of the lines to comment or remove them your project.
import CMS from 'netlify-cms-app'
// import uploadcare from 'netlify-cms-media-library-uploadcare'
// import cloudinary from 'netlify-cms-media-library-cloudinary'
import AboutPagePreview from './preview-templates/AboutPagePreview'
import BlogPostPreview from './preview-templates/BlogPostPreview'
import ProductPagePreview from './preview-templates/ProductPagePreview'
import IndexPagePreview from './preview-templates/IndexPagePreview'
// CMS.registerMediaLibrary(uploadcare);
// CMS.registerMediaLibrary(cloudinary);
CMS.registerPreviewTemplate('index', IndexPagePreview)
CMS.registerPreviewTemplate('about', AboutPagePreview)
CMS.registerPreviewTemplate('products', ProductPagePreview)
CMS.registerPreviewTemplate('blog', BlogPostPreview)
$ gatsby new [SITE_DIRECTORY_NAME] https://github.com/netlify-templates/gatsby-starter-netlify-cms/
$ cd [SITE_DIRECTORY_NAME]
$ npm run build
$ npm run serve
Follow the Netlify CMS Quick Start Guide to set up authentication, and hosting.
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
MacOS users might also encounter some errors, for more info check node-gyp. We recommend using the latest stable node version.
This plugin uses gatsby-plugin-purgecss and bulma. The bulma builds are usually ~170K but reduced 90% by purgecss.
Contributions are always welcome, no matter how large or small. Before contributing, please read the code of conduct.