boost-cms
v1.0.0
Published
boost brand marketing website cms
Downloads
41
Readme
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)
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
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 :)