Skip to content

A starter project for creating lightning-fast, offline-first websites with Netlify-CMS and React

License

Notifications You must be signed in to change notification settings

Jinksi/netlify-cms-react-starter

Repository files navigation

Netlify CMS + React Starter

Warning Netlify CMS is no longer being maintained, therefore I won't be maintaining this project.
See decaporg/decap-cms#6503.
Both Netlify CMS and this project both work for the most part (as of Nov 2022), albeit with some outdated approaches e,g, React class components.

Standard - JavaScript Style Guide styled with prettier dependencies Netlify Status

A starter project for creating lightning-fast, offline-first websites with Netlify CMS and React.

I aim to include commonly used components and best-practices e.g. forms, settings, tags, lazy-loading images, etc.

Get going

Deploy to Netlify

  1. Hit the Deploy to Netlify button. This will:
  • Clone the repo into your Github account
  • Create you a new project on Netlify, build & deploy
  1. Once your Netlify project has been created, check a couple of settings:
  • Enable Identity
  • Change Registration Preferences to Invite Only
  • Enable Git Gateway
  1. Invite users (probably yourself) to enable admin access
  • Open the Identity tab and hit Invite Users

Show me the CMS!

The CMS lives at __YOUR_SITE_NAME__.netlify.com/admin.

Developing

  1. Clone your repo to your local machine

  2. Install dependencies

yarn or npm install

  1. Run the development server

yarn start or npm run start

If you are adding or editing content locally in the CMS, a couple of things to note:

  1. Changes will be pushed to the remote repo.

  2. You will be prompted to enter your site's url, this is necessary for Netlify Identity to manage user login. This is stored in localStorage, so you might have to empty your browser cache if you are switching projects but remaining on localhost:3000.

Editing CMS fields

The Netlify CMS configuration is located in public/admin/config.yml. This is where you will configure the pages, fields, posts and settings that are editable by the CMS.

Find out more in the Netlify CMS Docs.

See also

Netlify CMS Docs
Netlify CMS Repo
Hyperstatic – the same starter project minus Netlify CMS
Gatsby + Netlify CMS Starter (Gatsbro)