✨ Gatsby + Sanity + Now Starter

Create a static web application, consume data from one of the most powerful headless CMS, hit serverless endpoints and deploy it all to a rock-solid CDN. In less than five minutes!

▶️ SEE IT IN ACTION

Table of Contents

• What's Included?
• Requirements
• Getting started
  • 1. Create a new Gatsby project and use this repo URL as the template
  • 2. Move into the project directory
  • 3. Start the web server for both Gatsby site and Sanity Studio
  • 4. Play around with the Studio
  • 5. Deploy your site
  • 6. Add your production site as a trusted origin to Sanity
  • 7. Create a deployment hook to re-deploy the site when content changes
• Contributors
• Contributing
• License

What's Included?

• ⚡️ GatsbyJS for blazing-fast static site generation
• 📚 Sanity CMS for a Structured Content CMS on top of modern technologies
• 🚀 ZEIT Now for a powerful CDN built for the JAMstack with support for Serverless Functions
• 🎨 Theme UI for a constraint-based design system
• 🏎 gatsby-plugin-offline to offer your users an always available experience

Requirements

In order to run this starter without running into any issues you need:

• Git
• NodeJS
• Yarn [1]
• A Sanity account [2]
• A ZEIT account [3]

[1] Since this is a monorepo, all dependencies should be installed using Yarn.

[2] The setup script asks to login to Sanity

[3] The setup script asks to login to ZEIT

Getting started

1. Create a new Gatsby project and use this repo URL as the template

npx gatsby new my-awesome-blog https://github.com/iamkevinwolf/gatsby-sanity-now-starter

2. Move into the project directory

cd my-awesome-blog

3. Start the web server for both Gatsby site and Sanity Studio

yarn start

• Navigate to http://localhost:3000 to preview the Gatsby site
• Navigate to http://localhost:3333 to modify your content

4. Play around with the Studio

Try changing the site settings or adding new posts, click Publish and view your changes in real-time.

If you want a more detailed guide on how to create new schemas, check at your local readme file, this had been replaced in order to show information relevant to your project.

5. Deploy your site

yarn deploy

• Navigate to https://your-site-url.now.sh to see the production website
• Navigate to https://your-site-url.now.sh/studio to edit your site content through a self-hosted Sanity Studio [1]

[1] If you go to this URL just after finish the deploy, you will receive an origin error. This is because you still need to add your production site as a trusted origin to Sanity.

6. Add your production site as a trusted origin to Sanity

1. Go to Sanity Manage and select your newly created project
2. Navigate to Settings > API
3. Click on ADD NEW ORIGIN
4. Enter your now.sh project url and toggle on the Allow credentials switch
5. Click on ADD NEW ORIGIN

7. Create a deployment hook to re-deploy the site when content changes

Since static sites don't tend to be fetching any server to get the content, you need to re-build it everytime you change your data in Sanity. This process can be tedious, so you can enable a Deploy Hook on ZEIT that can be called from anywhere to trigger a deploy of your site.

1. If you haven't already, push your site to GitHub
2. Go to your ZEIT dashboard and select your project
3. If you haven't already, link your project with the GitHub repo by clicking the Edit link under the project name
4. Navigate to the Settings tab on the navigation bar above your project title
5. Enter the hook name (i.e. Sanity Trigger), select the branch you want to get built when Sanity content changes and click Create Hook
6. Copy the Deploy Hook url
7. Go to Sanity Manage and select your project
8. Navigate to Settings > API
9. Click on ADD NEW WEBHOOK
10. Add a name to the webhook (i.e. ZEIT Deployment), paste the ZEIT Deploy Hook url and select the dataset you want to trigger that change
11. Click ADD NEW WEBHOOK

Contributors

Thanks goes to these wonderful people (emoji key):

Kevin Wolf 💻 🖋 📖 💡 📋 🤔 🚇 ✅ 📢 📹

Knut Melvær 🤔

This project follows the all-contributors specification. Contributions of any kind welcome!

Contributing

If you have any question, suggestion or recommendation, please open an issue about it.

If you decided you want to introduce something to the project, please read contribution guidelines first.

License

MIT