How to Host HTML, CSS & JavaScript Website on Vercel ?
Last Updated :
28 Apr, 2025
In this article, we will host HTML, CSS & JavaScript Websites on Vercel. Every web developer wants to not only create a website but also host it properly, ensuring that visitors and others have a problem-free experience while visiting your website and with Vercel you can seamlessly host your website with all functionality. Vercel not only hosts static websites like GitHub pages but also dynamic websites. So this is a very convenient tool for web developers to showcase their talents. So, let's dive into the tutorial.
In this article, we will create a dynamic website and host that website on Vercel.
Â
Example: In this example, we will start building a very basic website, which we will then post to GitHub.
- index.html file
- style.css file
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Simple Website</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Welcome to GFG Website</h1>
</header>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
<main>
<section id="home">
<h2>Home</h2>
<p>
Welcome to our website!
We are a passionate team dedicated to
providing top-notch web solutions for
businesses and individuals.</p>
</section>
<section id="about">
<h2>About</h2>
<p>
Our company was founded in 2010 with
the mission to make the web a better place.
We believe in delivering outstanding results by
combining creativity and cutting-edge technology.
</p>
</section>
<section id="services">
<h2>Services</h2>
<p>
This is the services section of the website.
</p>
</section>
<section id="contact">
<h2>Contact</h2>
<p>
Have a question or want to discuss
a project? We'd love to hear from you!
</p>
</section>
</main>
<footer>
<p>© 2023 Your Website Name. All rights reserved.</p>
</footer>
<script src="script.js"></script>
</body>
</html>
CSS
body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 0;
padding: 0;
}
header {
background-color: green;
color: #fff;
text-align: center;
padding: 1rem;
}
nav {
background-color: #555;
text-align: center;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav li {
display: inline-block;
padding: 1rem;
}
nav a {
color: #fff;
text-decoration: none;
}
main {
padding: 2rem;
}
section {
margin-bottom: 2rem;
}
footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 1rem;
}
Output: Website view on localhost
Website View on localhostSteps to host on Vercel:
Step 1: Now create a GitHub repository for this project. We now need to push the code for our website to this repository.Â
GitHub Repository
We have to push on the GitHub repository because we will connect our Vercel account with our GitHub account so that Vercel can fetch the website's code without any problem. Through this, we can easily host our website on Vercel.
Step 2: Setup Vercel Account & Connect with GitHub:
Visit the Vercel website first, after which you will be prompted to sign up for Vercel. We advise you to sign up using GitHub. After successfully creating a Vercel account, log in there. After login, you will see an interface like this:
Vercel Dashboard
Step 3: So click on the options step by step "Add New" -> "Project". It will open a new page where you will find your GitHub repositories, from where you can import your project's code.
Import Project
Step 4: It will redirect you to the configure project page, where you can change the website's name and change other settings as well. But in this case, we don't need that so we simply click on the "Deploy" button to deploy our website.
Deploy Project
You will be led to the website's dashboard after a successful deployment, where you can find the link to the website. And you can share this URL. So that recruiters can quickly review your projects, you may just include this link in your resume.
Dashboard after website hosted
Output: Here you can check the domain name, as it is hosted on Vercel.
Deployed Website
Similar Reads
Websites and Software that help HTML, CSS And JavaScript Developers Developing a website using HTML, CSS, and JS is a time consuming and lengthy process. But using proper resources for the work can accelerate the process. These tools not only make things easier, but you also step it up on the quality level. Here is a list of websites and software that will help you
3 min read
How to Use Apache Webserver to Host a Website? Apache is a powerful and widely used web server across the industry to host websites efficiently. In this guide, we will understand the usage of Apache web servers for hosting a website. PrerequisitesApache Web ServerAdministrative AccessSteps to use Apache webserver to host a website:Step 1: Basic
2 min read
How to Deploy website on Netlify You have your website ready and don't know how to reach the audience. Most of us coders create amazing websites using HTML, CSS, and JavaScript and just save them locally or on remote host services like GitHub and BitBucket. Now, what if you need non-programmers to view your work? This is why it bec
2 min read
How to Host ReactJS Websites on Vercel with Environment Variables ? In this article, we will learn how to host our ReactJs projects on Vercel and use Environment Variables in this tutorial. Vercel is a platform for developers to deploy and host their projects online, where they can showcase their skills to others. What is an Environment Variable? We conceal API keys
4 min read
How to Setup Virtual Hosts with Apache Web Server on Linux? Setting up a virtual host in Apache web server on Linux allows us to host multiple websites on a single server. This virtual host is useful when one wants to host multiple projects for businesses managing multiple domains with a single server.PrerequisitesApache server installed.Root or sudo accessS
2 min read