Building a website with Replit and Vercel

I recently built a personal website (absterellio.com) to aggregate the various projects I've worked on as well as to compile my information in one location. (Also, for fun) :). With AI tools and simple hosting platforms it's pretty frictionless to spin up a website. In particular, with agentic AI tools such as Replit, building a website is as simple as it's ever been.

I wanted to write a quick guide to outline the process I followed. I chose Vercel and Replit because I'd heard about both and wanted to give them a shot. I also did a quick Reddit search and both received some praise on their reliability and simplicity.

Here's what I did:

1. Bought my domain (absterellio.com). I used CloudFlare but any domain registrar (Namecheap, GoDaddy, etc.) will do the trick.
2. Asked Replit to build me a personal website (literally). This was the most streamlined part of the process. I selected "website" as the project type and chatted with the agent until I was happy with the layout. If you stick with the free plan and credits, you can get a simple site without paying. Here's a preview of the Replit interface when beginning a project: This is where having some programming knowledge is helpful. Replit allows you to edit the code as well as chat with the agent to build. I was able to save some credits when refining by editing the code myself. I relied on the agent for the more tedious tasks so that I didn't surpass the free token limit.

I was impressed by how easy Replit made it to integrate API's into the code, providing instructions every step of the way and clearly outlining where and how to generate the necessary keys while abstracting the secret fetching and management. For example, I wanted to call the YouTube API to display videos, and just had to provide the API key so Replit could store the secret and integrate it into the code.

1. For the next step, I needed to choose where to host the website. Replit offers backend, hosting & deployment services on its free tier. However, I wanted to use my own custom domain which Replit's free tier does not support. I decided to use Vercel whose hobby tier supports one free custom domain.

The next step to port this site to Vercel was to download the generated app from Replit, clean it up locally with Claude code, and push to a new repo in GitHub.

Vercel made it simple to import the code and change the domain. I created a new project and authenticated with GitHub. Once GitHub is linked I was able to choose the repo I wanted to import.

I was prompted to authenticate with CloudFlare to show domain ownership and my domain was linked.

I began the deployment process and after a few failed deploys and subsequent tweaks to the code, the site was up and running. Vercel's interface provides simple CI/CD, observability, and other insights.

There are many features to both Vercel and Replit which I did not explore, as my initial goal was to minimize cost and spin up a site quickly. Looking forward to playing around more in the future.

Thanks for reading!