boost-cms

Boost Website CMS

This repo contains the Boost Brand website which uses Gatsby, and Netlify CMS. It is based on a simple blog starter template.

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
• 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
• Blazing fast loading times thanks to pre-rendered HTML and automatic chunk loading of JS files
• Uses gatbsy-image with Netlify-CMS preview support
• Separate components for everything
• Netlify deploy configuration
• Perfect score on Lighthouse for SEO, Accessibility and Performance (wip:PWA)

Prerequisites

• nvm or nvm-windows

Access Locally

# Login to npm as an ovo user
$ npm login

# Clone the repository
$ git clone https://github.com/[GITHUB_USERNAME]/[REPO_NAME].git
$ cd [REPO_NAME]

# Set correct node version
$ nvm use

# Install Dependencies
$ npm install

# Start development Server
$ npm run start

To test the CMS locally, you'll need run a production build of the site:

$ npm run simulate-prod

To run Netlify CMS locally

Ensure static/admin/config.yml has ‘local_backend: true’

npx netlify-cms-proxy-server

Open another terminal

npm run develop

Go to http://localhost:8000/admin click login (no need for credentials)

View GraphQl

To test netlify.toml redirects locally

npm install netlify-cli -g
netlify login
netlify dev

https://docs.netlify.com/cli/get-started/#installation

Testing

• Jest has been added for unit tests
• React Testing Library for testing react components
• Cypress for e2e testing
• Axe for React and Cypress has been added to audit for accessibility during development

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);

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

Purgecss

This plugin uses gatsby-plugin-purgecss

Troubleshooting

Loggin into CMS fails

If you see a 404 in the network tab in devtools while logging into the CMS, it's probably an expired Github token.

Fix by: 1. visting https://app.netlify.com/sites/ecstatic-leakey-6c2eb8/settings/identity#git-gateway 2. click "Edit Settings" 3. click "Generate access token in GitHub" 4. save

That should solve the issue :)