Hosting my site on Vercel
Tags: vercel, hosting, personalsite, gatsbycloud
Published: 2021-09-09 09:07:34

---
title: Hosting my site on Vercel
published: true
date: 2021-09-09 00:00:00 UTC
tags: Vercel,Hosting,PersonalSite,GatsbyCloud
cover_image: https://MihaiBojin.com/static/a2d322d783b3990fad942aa01007b4bc/10ab9/023-stephen-phillips-hostreviews-co-uk-tN344soypQM-unsplash.jpg
canonical_url: https://MihaiBojin.com/personal-site/hosting-on-vercel
---

🔔 This article was originally posted on my site, [MihaiBojin.com](https://MihaiBojin.com/personal-site/hosting-on-vercel?utm_source=DevTo&utm_medium=organic&utm_campaign=top-promo "MihaiBojin.com"). 🔔

* * *

Today I switched my site's hosting from [Gatsby Cloud](https://gatsbyjs.com) to [Vercel](https://vercel.com).

After writing my [latest post on application design](https://MihaiBojin.com/application-settings/system-design/read-key-from-multiple-sources?utm_source=DevTo&utm_medium=organic&utm_campaign=rss), I ran into an issue I couldn't quite solve.

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

## [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#prerequisites)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"
  },
}
```

## [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#hosting-on-vercel)Hosting on Vercel

Porting my site over was super easy:

First, I went to [https://vercel.com/new](https://vercel.com/new), where I clicked _Add GitHub Org or Account_, authenticated with my GitHub credentials, and imported my site's repository.

[!["adding a new site in Vercel"](https://MihaiBojin.com/static/4b21a430607655928be3c4f3eca3176b/e9beb/023-vercel-new-site.png ""adding a new site in Vercel"")](https://MihaiBojin.com/static/4b21a430607655928be3c4f3eca3176b/b12f7/023-vercel-new-site.png)

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)!

## [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#custom-domain)Custom domain

Since I wanted to use my [own domain](https://MihaiBojin.com), I had to do a bit of extra config.

[Vercel's domains page](https://vercel.com/dashboard/domains) 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"
}
```

## [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#thats-all-folks)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!

[!["Lighthouse report for my site hosted on Vercel"](https://MihaiBojin.com/static/b3e7a386584c43133a2d5b9b243651b6/e9beb/023-vercel-lighthouse.png ""Lighthouse report for my site hosted on Vercel"")](https://MihaiBojin.com/static/b3e7a386584c43133a2d5b9b243651b6/55b2a/023-vercel-lighthouse.png)

* * *

If you liked this article and want to read more like it, [please subscribe to my newsletter](https://motivated-founder-807.ck.page/db1cf284bf "newsletter link"); I send one out every few weeks!