How I built this site - Part 1

This webpage is created with Astro and Sanity. And I will try to give a quick recap on how I got started. And maybe I'll continue this (there for "Part 1" in the title).

Sanity

Sanity is a really powerful CMS, that lets you structure your content just the way you want it to. The first time I heard of Sanity was back in 2017, and I've always tried to find ways of using it in some of my clients solutions. Sadly I'm not very good at pitching solutions yet, and when a clients hires a consultant, there has already been solution architects and projects owners that has decided on technologies.

Lets get started with Sanity

Even though I dont do this myself, I always recommend going to Sanity's docs page and having a little read. Even though I didn't do that in the start, I get very fast bored by documentation. I just started by clicking on the "Get Started". This will take you through creating an account and a project (you can also create new projects through the CLI). So what I did was:

• Create an account
• Install the CLI with npm
• Run sanity login
• Run sanity init

The CLI will take you through some options that you can choose from, I started with the blog schema. It sets up collections of blog posts, author pages and categories.

I didn't really do any modifications to the types that the template gave me. So I deployed the sanity studio through the npm-script that was in the initialized Sanity-project's package.json.

Astro

The favorite thing to argue about with web developers is frameworks and libraries. I've worked a lot with React and Next.js in my professional career, but it is refreshing to test different frameworks and even sometimes I feel its good to work with HTML, CSS and vanilla javascript. And I love the options I have with Astro. You can have different frameworks for different components super easy (at least for what I have tested) or just render what I call HTML-like code with the .astro-files. I'm excited for the things I will try to do with this project, as this will be my blog and my technology-testing ground.

Getting started with Astro

As with getting started with Sanity, the docs are a good place to start. I usually go straight to the "Getting started" section and do just that, get started.

You can create a new Astro project by running npm create astro@latest, and the terminal will take you through a lot of options. Again, I went with the blog template. This will generate a project that has an index page, an about page and a blog posts that lists a few example posts, written in markdown (found in `project-root/src/content/blog/...`. I didn't really get into the content-collection part, since I started by editing the footer and header to link to my github, instead of astro's github.

Sanity integration

When the configuring of the header and the footer was done, I diverted my focus to fetching data from Sanity. Luckily there is a offical Sanity integration for Astro, made by Sanity (link here).

Just run the install command shown on the page, and the tool with add some code to your astro.config.mjs-file. I am unsure if it automatically fills out the fields in the config-file or you have to dig around in your Sanity-projects page. You'll need:

• Project id
• Name of your dataset

You can choose if you want to use the Sanity CDN or not (I've turned it of, since I'm generating my pages statically).

Now that your Astro project has the Sanity integration, it's time to query. See you in part 2!