Hosting my site on Vercel

🔔 This article was originally posted on my site, MihaiBojin.com. 🔔

Today I switched my site's hosting from Gatsby Cloud to Vercel.

After writing my latest post on application design, I ran into an issue I couldn't quite solve.

So I decided to take this opportunity and try out Vercel!

Prerequisites

Before we go any further, take a moment to check your package.json file. It should contain the engine section, enabling Vercel to use the same version as on your local development environment.

{
  "engines": {
    "node": ">=14.17 <15"
  },
}

Hosting on Vercel

Porting my site over was super easy:

First, I went to https://vercel.com/new, where I clicked Add GitHub Org or Account, authenticated with my GitHub credentials, and imported my site's repository.

Vercel automatically detected I was using GatsbyJS and preconfigured the project for me.

All I had to do was to click Deploy! Vercel promptly built my site and started serving it on a subdomain. Done (or not quite)!

Custom domain

Since I wanted to use my own domain, I had to do a bit of extra config.

Vercel's domains page is a good starting point, but you can also achieve the same from your project's dashboard.

I manage all my domains using Cloudflare and maintain DNS records using Terraform, so I had to update my zone config and reapply them.

Here is the Terraform HCL I used, which can be adapted and applied with terraform plan && terraform apply.

resource "cloudflare_record" "com_mihaibojin_apex" {
  zone_id = var.zone_id_com_mihaibojin
  name = "mihaibojin.com"
  value = "76.76.21.21"
  type = "A"
}

resource "cloudflare_record" "com_mihaibojin_vercel_cname" {
  zone_id = var.zone_id_com_mihaibojin
  name = "www"
  value = "cname.vercel-dns.com"
  type = "CNAME"
}

That's all, folks

And that was it! After a few minutes of simple configurations, my site is now hosted on Vercel.

What's even cooler is that its performance (judging by the Lighthouse report) seems to be a bit better!

If you liked this article and want to read more like it, please subscribe to my newsletter; I send one out every few weeks!