HomeMore Tutorials

DIY Blog Part 1: Sanity

published 11 months ago
in Tutorials

by Greg Murray

last updated 10 months ago

sanity
blog
cms
webdevelopment
developer
tutorial

If you're reading this, you are most likely either a developer or someone interested in software development. One thing that often connects us all is the desire to build something ourselves rather than rely on something prebuilt. The irony of this is that we typically build things for others to use, and we use plenty of prebuilt things to build our own things, but that is all besides the point.

In the spirit of doing it myself, I decided to build this blog myself rather than use something like Medium, Dev.to, or Wordpress. What's smarter than building a blog and then using the process of building it as content for said blog? Let's get started.

Steps

  1. The CMS
  2. The frontend
  3. Comments
  4. Deployment

There are a few different steps to building your own blog with many different paths you can take. The first step for me was to choose a content management system (CMS) to manage the data for the blog. There are many great headless CMS options out there so my advice would be to do some research on each and see what works best for you. I'd like to revisit the topic and add some of my personal opinions on each but that is outside the scope of this post.

A "headless" CMS refers to a type of content management system where the backend is all that is provided for you. Often, a headless CMS will come with a dashboard where you can manage the data. The key part is that since only the backend is provided, you'll need to roll your own frontend. This means you have complete control over the presentation of your application - a blessing or a curse depending on your needs.

The headless CMS I chose was Sanity.io. Sanity is a pretty straightforward service to use. Some features include a hosted data management tool called Sanity Studio, a JavaScript client for interacting with the data in your frontend, and a GROQ (graph relational object query) based query language. I chose Sanity because

  • honestly I just wanted to try something new and different
  • I enjoy the developer experience they offer

The first thing you need to do in order to get started with Sanity is to create an account. Once you do that, you can download their CLI and follow the documentation to get a studio started on your local machine. The studio is where you interact with your datasets and also model out the data you will be storing. Sanity offers a few templates so I started with the blog template and made a few adjustments to the included schemas so that they better fit my needs. All in all the set up was pretty easy. A few points to keep in mind:

  1. Sanity Studio is its own fully customizable application. That means you can change its functionality as dramatically or minimally as you see fit.
  2. Being it’s own application, you can decide to use an independent git repository just for the application or you can make one large repository to contain both the frontend and the studio. In my case, I decided to use a separate repository for the studio since I am not planning on needing to make many changes to the studio after it is initially set up.
  3. It might prove useful to use two different datasets, one for your production data and one for dev/local/testing data. You can do this by adding the following entries to your sanity.json within the studio project. More information can be found here.

1{
2  "api": {
3  	"projectId": "YOUR_PROJECT_ID",
4  	"dataset": "production"
5  },
6  "env": {
7  	"development": {
8  	  "api": {
9  	    "dataset": "development"
10  		}
11  	}
12  }
13}

Sanity Studio now has a new major version (v3). The sanity.json file is replaced with a similar file so config will be slightly different if you are on v3. Here is their guide on the upgrade process.

One thing that I really like about how this is all set up is that you do not need to store any keys or secrets in your project to run Sanity Studio. This is because once the app is running, you sign in through the app which handles all of the auth concerns.

That concludes the first part of this blog tutorial. Hopefully this can provide some guidance or inspiration when it comes to creating a blog of your own. A lot of the setup that needs to be done was not included in this write-up because the documentation on Sanity’s website does a great job already. Those docs can be found here. As always, feel free to reach out if you have any questions. I’ll see you in the next post.

Loading script...
home
Copyright© Greg Murray 2023