How to deploy a simple website to Vercel: case of a portfolio

A portfolio is like an ID for every developer. It showcases our skills and says, “Hey, there is what I am doing; you can contact me ….” So being online and letting everyone know that you are there by using a professional tool can be efficient when you want to reach more people for freelancing, marketing and more.

This article is about showing how we can deploy a simple website to Vercel.
In this article, we will be using a portfolio website to demonstrate the deployment process. By the end of this tutorial, you will learn how to deploy your project to Vercel for free.

Introduction to Vercel

Vercel is a cloud platform designed for front-end developers, primarily known for its seamless integration with frameworks like Next.js. It enables users to deploy, manage, and scale web applications effortlessly.

Vercel advantages: Vercel offers numerous advantages, we will just cite some of them :

Vercel is free of charge for what we want to do,
Vercel offers a lot of features to keep track of the projects like web traffic analysis and more.
It has a lot of templates built in different frameworks like NextJS, ViteJS, etc.. that you can use as a starting point and then customize as you want.

Additionally, you can use Vercel as a vessel for any of your projects, from static websites to dynamic ones. You can even host a chatbot powered by Ai bring your ideas to life and show it to the entire world by using vercel.

So let’s discover this tool by deploying our first project: a portfolio.

Prerequisites

Before beginning, let’s ensure you have the necessary setup. Please verify that you have the following :

Code editor of your choice
Browser of your choice
Source code: you can have the one we will use here: https://github.com/ibsengiovannibazie/simple_portfolio.git

Structure of the portfolio

Our portfolio consists of two main files with 5 images :

index.html
Style.css
5 images The link to the GitHub repository: https://github.com/ibsengiovannibazie/simple_portfolio.git

You can directly download the files in it and then follow the steps in the next section.

Below is the result that we will obtain at the end.
Output of the website :

Set up GitHub repository

Now, that we have all of our code set up let’s push it on GitHub.
We are going to upload our code directly to the created repository file by file. If do know how to create a repository on GitHub, consider reading more here: Quickstart for repositories - GitHub Docs

Set up a Vercel account.

After uploading all the code with the needed images. Next, you should follow the steps illustrated in the images below:

Note: Be sure to have a GitHub account before going further on.

Step 1: Click on the Sign Up button.

You will be redirected to another page as shown in the second image, and then fill in your username.

Step 2: Click on the GitHub option. You will wait while you are being authenticated.

Before doing that, please ensure that you are already connected to GitHub.

Step 3: Optional

At this level, you can skip or fill in the inputs as shown in the first image (the screenshot below shows the inputs filled in to give you an idea of what you should type in).

Bravo from now on, you are part of the Vercel community.

Deploying the project on Vercel

Now, that you have linked your GitHub account with Vercel, you can create a
Vercel project in which you will use the GitHub repository you have already built earlier.

Please follow the steps below respectively.

Step 1: Click on the arrow at the top right corner of the page and then choose Project.

Step 2: Choose the name of the repository in which you pushed your portfolio code.

Ensure that it is the same name as the one you have on GitHub.

In our case, the name is simple_portfolio highlighted in red.

Step 3: Deploy your Portfolio

Enjoy the moment by hitting this Deploy button

Step 4: And voila, you have now deployed your portfolio for free easily and forever.

You can click on the Continue to Dashboard button to see what your magnificent operation center looks like.

Step 5: Hit the Visit button to see your portfolio live.

Output: You can visualize the output via this small demo
https://youtu.be/LY9b7cXJdDk

Conclusion

In brief, we have successfully deployed our portfolio on Vercel for free by using our GitHub account to first put our code in a designed repository and then use this repository to deploy it on Vercel and then make this portfolio alive. Here are the main points we covered:

Create a repository on GitHub to contain our code
Create a Vercel account by using a GitHub account
Create a project on Vercel Link the GitHub repository containing our portfolio in the created Vercel project Deploy our portfolio