Creating a blog using Gatsbyjs & Sanity.io

#100daysofgatsby assignment 1 - Create a blog

As part of #100daysofgatsby I’m creating a Gatsby blog. But since I’ve been using Gatsby a few months I’m going to go a little beyond the basics by using Sanity.io as the data source and then adding some really cool features to the Sanity Studio (Sanity’s content editor)

Today I plan to take the first step which is to create the basic starter for Gatsby and Sanity. Sanity makes this crazy easy.

Sanity has a great feature they’ve added recently called create. You pick from a few standard templates and then give Sanity your login and connect Sanity to your GitHub account and Netlfiy account and Sanity will scaffold the entire template out for you and even deploy it. At that point you can manage your blog via the Studio and never even touch any code! But that’s no fun -we are here to learn and play. Today we create the foundation and then tomorrow we will grab the code repository to change our content editor (Sanity calls this the Studio). I'll walk you through this step:

Step 1 - Create a basic blog using Sanity Create

• Open https://sanity.io/create in a browser.

• You will be shown several options. You want the “Blog with Gatsby” project.
• Click “Start Project”
• You will now be asked to Sign In to Sanity, GitHub, and Netlify. If you don’t have accounts, then it will create them for you. The easiest way is to create a GitHub account first, and then you can use that account to Log in to both Sanity and Netlify.

• Once you’ve Logged In, you will be asked to name your project. It defaults to “Blog with Gatsby”, but let’s personalize it a bit - I call mine Christian Lobaugh. Note: The project name will determine the Netlify site name, which is why I chose the name I did.
• Next you will need to name the repository for git-hub. I suggest something descriptive and the default name is pretty good - “sanity-gatsby-blog”.
• Once you have connected to all 3 services and named your project and repository you click the “Create Project” button at the bottom of the page.
• You will now see Sanity start creating and deploying the different pieces of the site for you. It will tell you the progress and give you the Netlify links for your studio and blog page, as well as to your GitHub repository.

Congrats - you now have a blog. If you log in to the studio you can update all the content and add new blog entries. If you didn’t already know, you need to redeploy the web site any time you make any content changes. There is a handy link on the Dashboard of the Studio to help you do that without needing to go to Netlify.

The next step for me will be to work on updating the Studio to add some nice features to help create an awesome editing experience. I’ll save that for the my next post.

Here's a list of things I plan to look at adding to the blog at this point (no promises, and in no specific order. Just things that look promising off the top of my head)

Sanity Studio

• Split preview
• Live preview (connected to local dev and/or Gatsby Preview)
• SEO preview
• Accessibility preview
• Media browser
• Expand Block Text schema to support inline images and external links
• SEO analysis
• Add custom colors and logo to studio

Gatsby

• Gatsby Cloud preview
• Social Sharing
• Add TailwindCss and Emotion for CSS styling
• Add sidebar menu
• Add view by category (and/or tag)
• Add sitemap
• Add testing with Jest or similar
• Search using Algolia
• Google Analytics