Trying a Sanity.io CMS for ScaleSource App.
Concepts covered in this starter are:
- How to use the Studio‘s page builder to create landing pages, and present them in a web frontend
- Edit blog posts with side-by-side web-previews, can be configured to Gatsby Preview for real-time previewing in production and not just local development
- How to manage SEO metadata like fields for Open Graph meta-tags
- How to set up navigation for structured content, which allows for proper decoupling and omni-channel
- Custom embedded objects in rich text for Instagram posts, social media videos, LaTeX math etc.
- Field validations
- Custom slugify functions with promises
- Examples of how to use plugins and custom input components
- Examples of custom document and document type lists using structure builder
- Custom asset sources for Unsplash and AI-generated person photos
- …and more
Technologies:
- A blazing frontend of landing pages and a blog with Gatsby.js
- Structured content using Sanity.io
- Global deployment on Netlify
- Clone this repository
npm install
in the project root folder on localnpm run dev
to start the studio and frontend locally- Your studio should be running on http://localhost:3333
- Your frontend should be running on http://localhost:8000
npm run build
to build to production locally
- Go to your project’s API settings on manage.sanity.io and create a token with read rights.
- Rename
.env.development.template
to.env.development
and paste in the token:SANITY_READ_TOKEN="yourTokenHere"
. - Restart the development server (
ctrl + C
andnpm run dev
).
If you want to turn off preview you can set watchMode: false
in gatsby-config.js. If you just want to preview published changes you can set overlayDrafts: false
in gatsby-config.js.
In order to have live previewing available outside of the npm run dev
cycle you will have to set it up yourself.
The easiest way would be to utilize Gatsby Cloud. This will give you a deployment of the Gatsby web app set up to provide the same live preview as you have locally. A guide for setting this up can be found at https://www.gatsbyjs.com/docs/sanity/getting-started/. Note that this is a paid service from Gatsby.
For the 'Web preview' tabs in the Studio editors to work with a remote live preview instance, please remember to update the baseUrl
value in studio/resolvePreviewUrl.js
.
Should you want to host Gatsby in live preview yourself we have also included a Dockerfile and (.dockerignore) as a starting point in the web/ folder. Deploying that container is outside the scope of this example. There are many guides online on how to do that.
Netlify automatically deploys new changes commited to master on GitHub. If you want to change deployment branch, do so in build & deploy settings on Netlify.
Join Sanity’s developer community or ping us on twitter.