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
JavaScript Tutorial JavaScript is a programming language used to create dynamic content for websites. It is a lightweight, cross-platform, and single-threaded programming language. It's an interpreted language that executes code line by line, providing more flexibility.JavaScript on Client Side: On the client side, Jav
11 min read
Web Development Web development is the process of creating, building, and maintaining websites and web applications. It involves everything from web design to programming and database management. Web development is generally divided into three core areas: Frontend Development, Backend Development, and Full Stack De
5 min read
React Interview Questions and Answers React is an efficient, flexible, and open-source JavaScript library that allows developers to create simple, fast, and scalable web applications. Jordan Walke, a software engineer who was working for Facebook, created React. Developers with a JavaScript background can easily develop web applications
15+ min read
JavaScript Interview Questions and Answers JavaScript (JS) is the most popular lightweight, scripting, and interpreted programming language. JavaScript is well-known as a scripting language for web pages, mobile apps, web servers, and many other platforms. Both front-end and back-end developers need to have a strong command of JavaScript, as
15+ min read
React Tutorial React is a JavaScript Library known for front-end development (or user interface). It is popular due to its component-based architecture, Single Page Applications (SPAs), and Virtual DOM for building web applications that are fast, efficient, and scalable.Applications are built using reusable compon
8 min read
Domain Name System (DNS) DNS is a hierarchical and distributed naming system that translates domain names into IP addresses. When you type a domain name like www.geeksforgeeks.org into your browser, DNS ensures that the request reaches the correct server by resolving the domain to its corresponding IP address.Without DNS, w
8 min read
NodeJS Interview Questions and Answers NodeJS is one of the most popular runtime environments, known for its efficiency, scalability, and ability to handle asynchronous operations. It is built on Chromeâs V8 JavaScript engine for executing JavaScript code outside of a browser. It is extensively used by top companies such as LinkedIn, Net
15+ min read
HTML Interview Questions and Answers HTML (HyperText Markup Language) is the foundational language for creating web pages and web applications. Whether you're a fresher or an experienced professional, preparing for an HTML interview requires a solid understanding of both basic and advanced concepts. Below is a curated list of 50+ HTML
14 min read
What is an API (Application Programming Interface) In the tech world, APIs (Application Programming Interfaces) are crucial. If you're interested in becoming a web developer or want to understand how websites work, you'll need to familiarize yourself with APIs. Let's break down the concept of an API in simple terms.What is an API?An API is a set of
10 min read
Introduction of Firewall in Computer Network A firewall is a network security device either hardware or software-based which monitors all incoming and outgoing traffic and based on a defined set of security rules it accepts, rejects, or drops that specific traffic. It acts like a security guard that helps keep your digital world safe from unwa
10 min read