GeekMD, LLC Website

A Gatsby + Netlify CMS Starter

Note: This website is based off of the starter Gatsby v2.

It follows the JAMstack architecture by using Git as a single source of truth, and Netlify for continuous deployment, and CDN distribution.

Features

• A simple landing page with blog functionality built with Netlify CMS
• Tags: Separate page for posts under each tag
• Basic directory organization
• 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

Prerequisites

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

Access Locally

Pulldown a local copy of the Github repository Netlify created for you, with the name you specified in the previous step

$ git clone git@https://github.com/geekmdtravis/geekmd-website-v3.git
$ cd geekmd-website-v3
$ 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 (installed, but optional)

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)

Note: Don't forget to also remove them from package.json and yarn.lock / package-lock.json using yarn or npm. During the build netlify-cms-app will bundle the media libraries as well, having them removed will save you build time. Example:

yarn remove netlify-cms-media-library-uploadcare

OR

yarn remove netlify-cms-media-library-cloudinary

Getting Started (Without Netlify)

$ gatsby new [SITE_DIRECTORY_NAME] https://github.com/netlify-templates/gatsby-starter-netlify-cms/
$ cd [SITE_DIRECTORY_NAME]
$ npm run build
$ npm run serve

Setting up the CMS

Follow the Netlify CMS Quick Start Guide to set up authentication, and hosting.

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.

CONTRIBUTING

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