My personal website, wallis.dev, used to be hosted in a Docker container on a Digital Ocean droplet that cost me about £5 a month and a few hours each year of effort to maintain. Last week I deployed a website onto Vercel and was immediately impressed with the seamless deployment process - even with the knowledge that Vercel is the company behind Next.js. Since then, I've deployed my website onto Vercel and sunset my Digital Ocean droplet.
- How I used to host my website
- Motivations behind moving to Vercel
- Deploying a GitHub project to Vercel
- Adding a custom domain to a Vercel project
I first developed wallis.dev just over 2 years ago using Next.js 7.0.2. At the time static exporting didn't exist and, as far as I can remember, Vercel's hosting (then Zeit) was in its infancy. As a result, I hosted it as a constantly running Docker container on a Digital Ocean droplet.
My site had been hosted on Digital Ocean droplet ever since. Not once did I run into issues aside from having to update versions of software I was using to host the site, such as Docker and Traefik. However, after researching Vercel and deploying another project on it, it was totally obvious that the droplet was overkill, an item of unnecessary expenditure and a waste of time maintaining it.
Better CI/CD pipeline. Through Vercel's first-class integration with GitHub I was able to move from having to
sshonto my droplet,
docker pullmy updated image and restart it's Docker container to just committing the code to GitHub and allowing Vercel automagically build and publish it for me.
- Preview URLs. Vercel automatically creates a preview URL for every pull request you make. Meaning I can send changes to other people for them to proofread and give feedback on changes without committing them to the main site itself.
- No server maintenance required. Currently I have to ensure that software on my droplet, such as Docker, Docker Compose and a Traefik container (reverse proxy that makes the website accessible outside the droplet) is kept up-to-date. Moving to Vercel means I can delete the droplet and forget about the complicated Traefik setup.
- Last but not least, to save money. While £5 a month isn't a huge amount it adds up (£60 a year). If I could host my site for free why wouldn't I!
Those are the 4 major reasons I decided to switch my deployment strategy. Now I'll take you through connecting Vercel and a GitHub repository and deploying your site for the first time.
First, create an account with Vercel if don't already have one. Then navigate to https://vercel.com/new - the site that is used to create a new project with Vercel.
Once you've navigated to https://vercel.com/new you should see an
Import Git Repository input that looks like the following:
You want to select the
Import button next to the GitHub repository of your choice. If it isn't appearing use the search to locate your repository:
Next, you'll be asked to
Select Vercel Scope. As this is my personal website I'll be using my
Personal Account - If you like you can create a team but beware this costs money! I'd stick to your personal account unless you know what you're doing.
Then you'll see the
Import Project screen. Here you can name your project within Vercel and select the
Framework Preset. If you're using a Next.js project it should auto-fill both the Name and Framework by scanning your GitHub repository.
- If you're using a non-standard build command (i.e. not
npm run build) or a non-standard build output directory you can enter those into the
Build and Output Settingsinput area. This will advise Vercel on how to build your project and where to find it once it's built.
- To use custom environment variables with your project add them through the
Environment Variablesinput area.
Aside from changing the
Project Name, I left all values as default. This is how my
Import Project screen looked:
Then just hit
Deploy! Vercel will verify that your project builds before creating an initial deployment for your website, publishing it to a placeholder URL which will look something like
When you clicked
Deploy you should have seen the deployment screen appear alongside the, now greyed out, setup wizard:
When the deploy has succeeded you will be greeted by this screen:
Well done, you've deployed your website onto Vercel! From the
Congratulations screen, you can both visit it in your browser and see it live and also open the Vercel Dashboard to see the live state of your project.
Prereqs: You already need to own the desired domain name and have access to its DNS records.
The second step to hosting wallis.dev through Vercel is to connect the
wallis.dev domain name to my Vercel project.
Follow these instructions to do this:
Navigate to your Vercel Dashboard using the button in the last section. It'll look like this:
Settings from the navigation and
Domains in the side menu of Project Settings. The page should look like so:
This is the screen where you can add a custom domain to your Vercel project. Using the input box, enter your desired domain name. Then click
Add. I'm using
wallis.dev but you can use a subdomain such as
mywebsite.customdomain.com if you prefer.
Your domain will be added but it will display an "Invalid Configuration" error because you need to modify your domain's DNS settings to point at Vercel. Fortunately, Vercel tells you exactly what you need to do to point your domain at your website.
As I'm using
wallis.dev I need to add an
A record to my DNS settings. You can do this by navigating to your domain providers website and you should be able to find provider-specific instructions online.
If you're using a subdomain such as
www.wallis.dev you'll need to add a
CNAME record instead of an
By the way an A record uses a domain name to find the IP address of a computer connected to the internet. The A in A record stands for Address. A CNAME record is a Canonical Name record and maps one domain, rather than an IP address, to another.
Once you've configured your DNS settings the Vercel dashboard should appear as the following:
Double congratulations! You've successfully launched your website onto Vercel and configured it to use your custom domain. Don't worry if you can't reach your project using your custom domain straight away, it might likely take some time for DNS changes to apply - make a coffee and check again later.
Hopefully, this article has convinced you to drop whatever complicated hosting solution you created years ago and join the easy life on Vercel!
I know for sure that my development cycle has been dramatically improved by the change, let me know in the comments if yours has too. Maybe you disagree with my motivations and prefer to be in total control? Let me know in any case!
Thanks for reading!
If you've read my Wallis Consultancy blog you'd have seen that I launched that Next.js project on GitHub Pages. Well since writing them I've moved it to Vercel as well so that I can take advantage of the greater settings available such as having multiple domain names that redirect to one website.