Content has not been updated for more than 2 years, proceed with caution.
Getting Started With Gatsby-Theme-Catalyst-Writer
This theme has been depreciated, instead use gatsby-theme-catalyst-hydrogen, which is an updated version of this theme with an improved API. There is a complete tutorial for this updated theme you can follow.
This Gatsby theme is for freelance writers and journalists who want a fast, easy to maintain, and elegant portfolio. The backend data is provided by SANITY.io and the front end is based on Catalyst themes. This tutorial assumes basic familiarity with web development and Gatsby. If you are new to either of these topics I would recommend starting with Gatsby’s excellent tutorial series and then coming back here. There is also a helpful blog post that goes over some of these same ideas in a more general way.
Here are two demos of the completed theme in action:
- https://www.briannasharpe.com/ (customized)
- https://gatsby-starter-catalyst-writer.netlify.com/ (raw starter)
Install the theme using a starter
Initialize SANITY.io and setup your content studio
Congratulations! You should be looking at the new backend for your website!
Add your SANITY.io environment variables into a .env file
.env file in the root of your site, if you were following along this would be
catalyst-writer/.env. You will need the SANITY project id which you can find through the SANITY dashboard at https://manage.sanity.io/ or
sanity-studio/sanity.json. If your dataset is private you will also need a SANITY_TOKEN in the env file.
Run ‘gatsby develop’ for the first time
Now that you have the content studio setup you are ready to fire up your site for the first time!
Nice work you did it! You can remove the folder
/sanity-studio/data you don’t need
production.tar.gz anymore. And committing it to your git repo is unnecessary.
Deploy the content studio
Right now the content studio is only locally deployed, which means you can change it from your computer however if you run
sanity deploy inside of
catalyst-writer/sanity-studio you can choose to deploy it to a
https://studio-name.sanity.studio domain for free.
Explore the SANITY.io content studio and add your own data
The dataset you imported comes with placeholder data to get you started. Play around with the data and see what happens. You should see live updates on your local site in development mode because of real time previews with watch mode. You may occassionally need to restart the Gatsby development server (
gatsby develop) to see certain changes.
Push to Github and deploy your site
There are a few different ways to do this last step and publish your website. This is what works best for me.
With Gatsby Cloud your builds are handled by Gatsby and then set to automatically integrate with a CDN like Netlify. Don’t forget to setup environment variables on your deploy process exactly the same as in the
Setup a webhook to automatically redeploy when content updates
Because your content is separate from the git repository you will need a webhook to ensure your site redeploys when the content in SANITY changes. Both Netlify and Gatsby have good information in their docs about using webhooks.
Setup siteUrl in gatsby-config.js
Most site metadata is generated from SANITY however generating both
sitemap.xml depend on a properly defined
siteUrl field found in
Odds are you will want to customize colors, fonts, and more. Instructions for customizing these themes are based in the docs on github. Many of the changes can be made with design tokens in the theme file which is located in
catalyst-writer/src/gatsby-theme-catalyst-core/theme.js. This theme file is implemented using Theme UI.
I would love to hear about your results and see what you create!