Note: This starter uses Gatsby v2.
This repo contains an example business website that is built with Gatsby, and Netlify CMS: 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
- Editable 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
- macOS or Linux development environment
- On Windows workstations, use Windows Subsystem for Linux 2 (WSL 2) - see section below for details.
- NodeJS v14.6.0 or higher
- NPM v7.5.6 or higher
- Recommended: Environment management system such as Anaconda and/or NVM
Note: These instructions are different from the upstream version of this project because this project/branch is intended to run locally only.
$ git clone [GIT_REPOSITORY_URL]
$ cd [REPO_NAME]
$ npm install
$ npm start
The URLs to access the built website and the Netlify CMS UI are displayed on the console if everything starts up properly.
To test the static page build process:
$ npm run build
$ npm run serve
Once again, the URL to access the built website will be displayed on the console if everything starts up properly.
This project will not work under Windows with native NodeJS installed. Instead, install the NodeJS environment under Windows Subsystem for Linux 2 (WSL 2).
Reference documentation:
- Windows Subsystem for Linux Installation Guide for Windows 10
- Set up your Node.js development environment with WSL 2.
Important: Make sure to verify that WSL 2 is in fact set on the Linux distribution installed by verifying with the wsl --list --verbose
command. For more information, refer to the first reference link above.
The dev server start process would fail due to a "Callback was already called" error. There doesn't seem to be a clear solution to the issue, but what fixed by:
- Switching to dart-sass from node-sass
- Use gatsby-plugin-netlify-cms v4.9.0 instead of using the latest version (v4.10.0 at the time of writing).
These workarounds are already incorporated into the package.json
and lock files committed in this project and branch. Do not upgrade these packages unless this issue is resolved.
In this sample Gatsby + Netlify CMS project, there is an issue when the development server is running (using npm start
command) and an edit to the content is done within Netlify CMS. Normally, the browser window viewing the rendered content page should refresh with the updated content upon publishing the change via Netlify CMS. However, due to unknown root causes, that fails with a "failed to compile" error message similar to:
Failed to compile
There was an error in your GraphQL query:
Field "full_image" must not have a selection since type "String" has no subfields.
This can happen if you e.g. accidentally added { } to the field "full_image". If you didn't expect "full_image" to be of type "String" make sure that your input source and/or plugin is correct.
However, if you expect "value" to exist, the field might be accessible in another subfield. Please try your query in GraphiQL and use the GraphiQL explorer to see which fields you can query and what shape they have.
It is recommended to explicitly type your GraphQL schema if you want to use optional fields. This way you don't have to add the mentioned
"dummy content". Visit our docs to learn how you can define the schema for "undefined":
https://www.gatsbyjs.org/docs/schema-customization/#creating-type-definitions
File: /Users/martian111/Documents/SurgeMotion/websites/starter-upstream/src/templates/product-page.js
This error occurred during the build time and cannot be dismissed.
Workarounds:
- Make a whitespace edit (add a space, save, delete the space, save) in
gatsby-config.js
to trigger a refresh of the Gatsby development process. - OR: Restart the Gatsby development server (
Ctrl-C
and thennpm start
)
References:
- This issue has been brought up to GatsbyJS team, but remains unsolved for this project/codebase as currently coded (Issue 27862).
- Contrary to some reports, this problem does happen under macOS: Issue 13469
- Others: Issue 25307
This plugin uses gatsby-plugin-purgecss and bulma. The bulma builds are usually ~170K but reduced 90% by purgecss.
See original project at: https://github.com/netlify-templates/gatsby-starter-netlify-cms