Gatsby + Netlify (CMS) blog template
A starter template that uses Gatsby as the static site generator + Netlify as the host and CMS.
Download it and run it on your local machine
If you have yet to use Gatsby, install the CLI tool gatsby-cli
npm install --global gatsby-cli
(and if you've never used npm, click here)
git clone https://github.com/cjimmy/gatsby-netlify-cms-blog cd gatsby-netlify-cms-blog yarn install gatsby develop
☝️ What happens when you click on the button? It takes you to Netlify, where you have to click a few more things before anything real happens. (It clones this repo, and then deploys it using Netlify to the real internet.) But go ahead and deploy this site (assuming you have a Github account). This start is made for Netlify, so this button isn't just here as any hosting/deployment solution.
Login and write a post
- In Netlify web interface, go to the
Identitysection and click
Enable Identity, allowing you to sign in to the CMS.
- In Netlify, Settings > Identity > Services click on
Enable Git Gateway. This is necessary to log in to the CMS. (otherwise you'll get an error
Unexpected token < in JSON at position 0)
- The CMS editor is located at
[YOUR_NETLIFY_SITE].netlify.com/admin/where you can now sign up for a login.
It is largely based on @AustinGreen's gatsby-start-netlify-cms but a little more opinionated and different visual design.
Some notable structural changes:
- Styled Components instead of inline styles: Gatsby likes to inline css styles. I much prefer styled components which Gatsby neatly has a module for.
- Removes Sass – because we already have one CSS module.
- Adds react-flexbox-grid – for a grid system. Not necessary for the example, just makes things pretty.
- Adds fields to frontmatter – to have an image for the blog post, add authors, and to fill out the tag to make it social media friendly. (The frontmatter of a post is kinda like the meta info + head).
- Removes tag pages – and instead queries for the top 3 most recent posts that share a common tag.
Other resources and info
- Gatsby documentation (v1, not v2): https://www.gatsbyjs.org/docs/netlify-cms/
- Netlify documentation (sans CMS): https://www.netlify.com/blog/2016/02/24/a-step-by-step-guide-gatsby-on-netlify/
- [Netlify CMS Quick Start Guide] (https://www.netlifycms.org/docs/quick-start/#authentication)
Netlify allows authentication via Github rather than the Netlify identity system. To do this, you have to go into the organization's settings. (Github has a lot of different Settings pages.)
In there, on the side menu, you'll see a section for OAuth apps.
Application nameis what will be shown to users authenticating
Homepage URLis the homepage of the app
Application Descriptionis a description
Authorization callback URLfor Netlify should be
https://api.netlify.com/auth/doneper their docs
With this, you'll get
Client ID and
Client Secret that you'll use in the Netlify interface
Even though it's a static site, you can take advantage of the continuous deployment: https://jamstack-comments.netlify.com/
Paginate front page
Add a subscribe form
Using lambdas hosted on Netlify