An opinionated Gatsby starter designed for trash-eating pandas.
An opinionated Gatsby starter designed for trash-eating pandas.
View Demo - https://gatsby-starter-procyon.netlify.com/
Click "Login" in the footer to enable client-side editing.
Email: [email protected]
Password: demo
You'll get an error when trying to save changes to remote, but you get the idea...
View the NetlifyCMS version on the
netlifycms
branch:
https://github.com/danielmahon/gatsby-starter-procyon/tree/netlifycms
styled
API supporting React.forwardRef
and props
gatsby-starter-procyon
For an overview of the project structure please refer to the Gatsby documentation - Building with Components.
Make sure that you have the Gatsby CLI program installed:
npm install --global gatsby-cli
And run from your CLI:
gatsby new gatsby-starter-procyon https://github.com/danielmahon/gatsby-starter-procyon
cd gatsby-starter-procyon
title
, coverImage
, content
and slug
. These are required for the initial Gatsby build..env.development
and .env.production
in the root folder and add the following environmental variables with your token and endpoint:GATSBY_GRAPHQLCMS_ENDPOINT=
GATSBY_GRAPHQLCMS_TOKEN=
Then you can run it by:
npm start
Navigate to https://localhost:5000 in your browser.
This starter supports automatic versioning and CHANGELOG generation based on your git commits via versionist. Link your GitHub repo to Netlify to include automatic deployments.
First, create a GitHub repo and link it to Netlify:
https://www.netlify.com/docs/continuous-deployment/.
# Initialize your repo
git init
# Add all files not in .gitignore
git add -A
# Create your first commit
git commit -m "Initial commit"
# Sets your remote origin to your GitHub repo
git remote add origin https://github.com/[username]/[repo-name].git
# Set your local master to track origin/master
git branch -u origin/master
# Push your first release
npm run release:patch
# 0.0.1 -> 0.0.2
# You can also increment by minor or major versions
# npm run release:minor
# npm run release:major
Make more changes...
git commit -m "Made something do something"
npm run release:patch
# 0.0.2 -> 0.0.3
There is a "Login" link in the site footer that launches the Netlify Identity Widget. The first time it opens it should ask you for your Netlify site's domain. Paste that in then you will be able to sign-up or login. I recommend starting with the simple email sign-up for local development.
Go to a blog post page and make sure you are logged in. Click inside the main post's content and start editing! You should see a "reset" and "save" button to the bottom-right of the content. Clicking save will use Apollo to update your GraphCMS content and if you setup web-hooks between GraphCMS and Netlify it will also trigger a rebuild of your static site! In the meantime Apollo will locally cache your changes so you will continue to see your changes until you refresh the site (which clears the cache). When the rebuild is done you can refresh the page and see the updated content.
Q: Why... this?
A: Well, I wanted to rebuild some small client marketing sites using the same tech I am currently using for web(native) apps, like ReactJS. Gatsby seemed cool, Netlify makes it easy, and I wanted in-place editing like Medium™. So I created a proof-of-concept and I was surprised it worked.
Q: You're an idiot and this is :poop:
A: Thanks, and I welcome all creative criticism.
Q: What's Procyon? Why Trash Pandas?
A: Look it up and because.
Lots of stuff. Check issues in the future.