How did I built this headless website Sanity + Astro + Vercel

There is something uniquely satisfying about finally deploying your own personal corner of the internet.

For a long time, I wanted a space to share my thoughts, projects, and experiences—a platform that was entirely mine, not rented land on Medium or LinkedIn. But as someone who works deeply with web and data technologies, I couldn't just pick an off-the-shelf template. I needed something that represented the modern web: blazing fast, incredibly flexible, and a joy to maintain.

I did a lot of research before coming up with the headless solution I wanted for my specific needs. This is not just a blog; it’s a demonstration of a modern, "headless" architecture that separates content from code, delivering the best possible experience for both readers and editors. Specially because I didn't wanted to deal with databases.

Why This Stack?

When architecting this site, I had two competing goals that often clash in web development:

• Developer Experience (DX): I wanted full control over the code, using modern Javascript frameworks that prioritize performance and component-based design.
• Editor Experience (EX): I didn't want to write blog posts in Markdown files hidden in a code repository. I needed a real, powerful Content Management System (CMS) where I could easily draft, edit, and manage media without touching code every time I had a new idea.

The solution to balancing these needs is a "Headless" approach. I chose a stack dubbed the "SAV" stack by some Redditors: Sanity, Astro, and Vercel.

Here is why this trio works so well together.

1. The Backend: Sanity.io (The Content Lake)

Traditional CMSs like WordPress couple the database and the presentation layer tightly together. If you want to change the look of your site, you often risk breaking how the content is stored.

Sanity is different. It’s a headless CMS. It treats content as structured data, not just blobs of HTML.

For this site, Sanity acts as my "backend" through a customized editing environment called the Sanity Studio (which lives on a separate subdomain. It’s where I write the posts, upload images, and manage SEO metadata.

2. The Frontend: Astro

Astro has rapidly become my favorite framework for content-heavy sites. In an era where many frameworks ship massive amounts of JavaScript to the browser just to render simple text, Astro takes a different approach. It is "static-first."

The specific theme I used as a starter was Clean Astro + Sanity App and customized from there.

3. The Infrastructure: Vercel

Finally, I needed a place to host these two distinct applications. Vercel was the obvious choice.

Vercel understands modern frontend frameworks implicitly. Connecting my GitHub repository to Vercel meant that deployment became a zero-configuration task.

Vercel hosts my static Astro site on its global Edge Network, ensuring it loads quickly for users regardless of their location. Simultaneously, it hosts the Sanity Studio application.

Best of all, through "Deploy Hooks," the three systems talk to each other. When I press "Publish" in my Sanity Studio, it sends a signal to Vercel, which triggers Astro to rebuild the site with the new content—all automatically in a matter of seconds.

Steal The Code

I believe strongly in the open-source community since my team at weKnow Inc. started the Drupal community in Costa Rica back in 2011. The best way to learn modern web development is by tearing apart working code.

If you are looking to build a high-performance blog, portfolio, or marketing site, don't start from scratch. I have made the entire codebase for this website public on GitHub.

https://github.com/weknowinc/kac-sanity

Please feel free to fork it, clone it, and use it as a starter template for your own projects. It’s already configured with the Sanity schemas and Astro layouts you need to hit the ground running.

Need a Hand? Let's connect.

While I love the DIY spirit, I know that setting up a headless architecture, configuring DNS, and managing deployments isn't everyone's cup of tea. You might want the performance benefits of this stack without the technical headache of setting it up.

Or perhaps you have bigger challenges.

Whether you need help getting this specific blog starter setup for yourself, or you are looking for professional assistance with larger-scale web development, data integration, or architecture projects, we are here to help.

If you like what you see here and want to discuss a project, don't hesitate to reach out.