How to Deploy Your First Website on Vercel in 2026 (Beginner's Guide)
Vercel makes deploying a website surprisingly simple — even if you've never done it before. In this guide, you'll go from zero to a live website with a real URL in under 30 minutes, completely free. We'll use GitHub to store your code and Vercel to host it instantly on a global network. Every time you make a change and push it to GitHub, Vercel automatically updates your live site in seconds. No servers to manage, no complex configuration. Whether you've built a simple HTML page or a React app, this step-by-step walkthrough will get it online fast. Let's get started.
What You Need
- ✓A computer with internet access
- ✓VS Code (free code editor) installed from code.visualstudio.com
- ✓Git installed on your computer (free from git-scm.com)
- ✓A GitHub account (free at github.com)
- ✓A basic HTML/CSS website file saved on your computer
- ✓A Vercel account (free — you'll create this in Step 2)
Step 1: Step 1: Build Your Simple Website Locally
Before you can deploy anything, you need a website to deploy. Open VS Code and create a new folder on your desktop called 'my-first-website'. Inside that folder, create a file called index.html. Paste in this basic structure:
<!DOCTYPE html> <html> <head> <title>My First Website</title> <link rel='stylesheet' href='style.css'> </head> <body> <h1>Hello World!</h1> <p>My first website is live on Vercel.</p> </body> </html>Next, create a style.css file in the same folder and add simple styling like: body { font-family: Arial, sans-serif; text-align: center; padding: 50px; } h1 { color: #0070f3; }
To test it, right-click index.html in VS Code and choose 'Open with Live Server' (install the Live Server extension if needed), or simply double-click the file to open it in your browser. If you see 'Hello World!' styled on screen, your site is ready. Keep files simple at this stage — plain HTML, CSS, and optionally a script.js file for interactivity. Vercel can also handle React, Next.js, and Vue, but static HTML is perfect for your first deployment.
Pro Tip: Install the 'Live Server' extension in VS Code so you can preview changes instantly in your browser without refreshing manually.
VS Code
Free, beginner-friendly code editor with built-in Git support and thousands of helpful extensions like Live Server.
Visit →Step 2: Step 2: Create a GitHub Account and New Repository
Vercel connects directly to GitHub to pull your code, so you need a GitHub account first. Go to github.com and click 'Sign up'. Enter your email, create a password, and choose a username. Verify your email when prompted. The free plan is all you need.
Once logged in, click the '+' icon in the top-right corner and select 'New repository'. Fill in these fields: Repository name — type 'my-first-website'. Description — optional, something like 'My beginner static website'. Visibility — choose Public (required for Vercel's free Hobby plan). Do NOT check 'Add a README file' for now. Click 'Create repository'.
You'll land on a page with setup instructions. Leave this tab open — you'll need the repository URL in the next step. Your URL will look like: https://github.com/yourusername/my-first-website.git. Public repositories are visible to anyone on the internet, which is fine for a learning project. If you ever build something with private data, you can grant Vercel specific access to private repos, but public is simplest to start.
Pro Tip: Choose a lowercase repository name with hyphens instead of spaces (e.g., 'my-first-website'). This becomes part of your live Vercel URL.
GitHub
Free platform to store and version your code. Vercel integrates with it directly, enabling automatic deployments on every push. Free for public repos.
Visit →Step 3: Step 3: Push Your Website Files to GitHub
Now you'll connect your local project folder to GitHub using Git. Open a terminal in VS Code by clicking Terminal > New Terminal from the top menu. Make sure you're inside your 'my-first-website' folder — the terminal prompt should show that path.
Run these commands one at a time, pressing Enter after each:
- git init — This initializes Git tracking in your folder.
- git add . — This stages all your files for upload (the dot means 'all files').
- git commit -m "Initial commit" — This saves a snapshot of your files with a label.
- git branch -M main — This names your branch 'main'.
- git remote add origin https://github.com/yourusername/my-first-website.git — Replace 'yourusername' with your actual GitHub username.
- git push -u origin main — This uploads your files to GitHub.
If prompted for your GitHub password, use a Personal Access Token instead (GitHub no longer accepts passwords in terminal — generate one at github.com/settings/tokens). After the push completes, refresh your GitHub repository page in the browser — you should see index.html and style.css listed there. Your code is now on GitHub and ready for Vercel to access.
Pro Tip: If the 'git push' command asks for credentials and fails, go to github.com > Settings > Developer Settings > Personal Access Tokens > Generate new token. Use that token as your password.
Git
Free version control tool required to push code from your computer to GitHub. Download the installer and follow default setup options.
Visit →Step 4: Step 4: Create Your Free Vercel Account
Go to vercel.com and click 'Sign Up' in the top-right corner. You'll see options to sign up with GitHub, GitLab, or Bitbucket. Click 'Continue with GitHub' — this is the fastest option and connects your repositories automatically without a separate password.
GitHub will ask you to authorize Vercel. Click 'Authorize Vercel'. You may be asked to install the Vercel app on your GitHub account — click 'Install' and select 'All repositories' or just 'my-first-website' specifically.
Vercel will ask your purpose: choose 'Personal' and select 'Hobby' as your plan. The Hobby plan is completely free and includes: unlimited deployments, global CDN (fast loading worldwide), automatic HTTPS on every site, and 100GB bandwidth per month. No credit card required. You'll land on the Vercel dashboard — a clean page showing 'Add New' at the top. This is your control center for all your projects. Bookmark vercel.com/dashboard for quick access later.
Pro Tip: Always sign up with GitHub rather than email. It creates a seamless link between your code and deployments — no manual integration needed.
Vercel
Free hosting platform with global CDN, automatic HTTPS, and instant deployments. Hobby plan is free forever for personal projects. Pro plan starts at $20/month for teams.
Visit →Step 5: Step 5: Import Your GitHub Repository Into Vercel
From the Vercel dashboard, click the 'Add New' button, then select 'Project' from the dropdown. Vercel will show a list of your GitHub repositories. Find 'my-first-website' in the list and click 'Import' next to it. If you don't see it, click 'Adjust GitHub App Permissions' and grant access to the specific repo.
On the configuration screen, you'll see a few settings. Project Name will auto-fill from your repo name — you can change it, but keep it simple since it becomes part of your URL (e.g., my-first-website.vercel.app). Framework Preset will show 'Other' for plain HTML — leave it as is. Build and Output Settings can stay empty for static HTML sites. Environment Variables — skip this for now unless your site uses API keys.
Review everything, then click the blue 'Deploy' button. Vercel will now clone your repository, check for a build process (none needed for static HTML), and push it to their global network. This takes 1–3 minutes for your first deployment. You'll see a real-time build log appearing on screen — watch it for any red error messages.
Pro Tip: Don't change the root directory or output directory settings unless you know what they do. Wrong values here cause 404 errors after deployment.
Vercel Dashboard
Your central hub for managing all deployments, viewing logs, adding domains, and monitoring site performance — all in one clean interface.
Visit →Step 6: Step 6: Visit Your Live Website URL
When the deployment finishes, Vercel shows a celebration screen with a preview of your site and a confetti animation. You'll see your live URL — it looks like https://my-first-website.vercel.app or similar. Click 'Visit' to open your site in a new tab. Your website is now live on the internet, secured with HTTPS, and loading from edge servers worldwide.
Copy the URL and share it with anyone — friends, a portfolio, a job application. The site works on all devices automatically.
Now test the automatic deployment feature. Go back to your project in VS Code, open index.html, and change the text inside your h1 tag from 'Hello World!' to something new like 'Welcome to My Site!'. Save the file. Then in your terminal, run: git add . then git commit -m "Update heading" then git push. Go back to your Vercel dashboard and watch — within 30–60 seconds, a new deployment starts automatically. When it finishes, reload your live URL and you'll see the updated text. This automatic pipeline is what makes Vercel so powerful for beginners and professionals alike.
Pro Tip: Bookmark your .vercel.app URL and share it immediately. There's no setup time needed — the site is already fast and secure the moment deployment finishes.
Vercel Deployments Tab
Shows every deployment with timestamps, build logs, and status. You can roll back to a previous version instantly if something breaks.
Visit →Step 7: Step 7: Customize Your Site Settings and Add a Custom Domain
Your site is live, but you can make it more professional with a few quick settings in the Vercel dashboard. Click your project name to open its dashboard, then explore these tabs:
Settings > General — change the project display name or delete the project if needed. Settings > Domains — this is where you connect a custom domain. Your free .vercel.app URL works fine, but if you want yourname.com, click 'Add' and type your domain. Vercel gives you DNS records to add at your domain registrar (like Namecheap or GoDaddy). Domains typically cost $10–15/year. Settings > Environment Variables — store API keys here securely instead of hardcoding them in your files. Never paste API keys directly into your HTML or JavaScript files.
Under the Deployments tab, you'll see every version of your site ever deployed. Click the three dots next to any deployment to 'Promote to Production' (makes that version live) or 'Rollback' (restores a previous version). This is incredibly useful if a new push accidentally breaks your site. Analytics are also available to see visitor counts and page performance once you enable them from the Analytics tab.
Pro Tip: If you ever push a broken update and your site stops working, go to Deployments, find the last working version, click the three dots, and select 'Promote to Production' to instantly restore it.
Namecheap
Affordable domain registrar with clear DNS management. Domains start at around $9/year. Vercel's documentation includes specific steps for connecting Namecheap domains.
Visit →Common Mistakes to Avoid
Importing an empty GitHub repository into Vercel
Fix: Always complete Step 3 first — push your files to GitHub before importing into Vercel. Vercel cannot deploy an empty repo and will show a build error.
Forgetting to commit and push changes after editing files
Fix: Your live site only updates when you run git add, git commit, and git push. Saving a file in VS Code alone does nothing — you must push to GitHub to trigger a new deployment.
Using a private GitHub repo without granting Vercel access
Fix: Either make the repository public, or go to github.com > Settings > Applications > Vercel and grant it access to specific private repositories.
Ignoring the build logs when deployment fails
Fix: Click 'View Build Logs' whenever a deployment shows a red error icon. The log tells you exactly what went wrong — usually a missing file, syntax error, or incorrect build command.
Hardcoding API keys directly in JavaScript or HTML files
Fix: Never put sensitive keys in your code files — they become publicly visible on GitHub. Use Vercel's Environment Variables under Settings instead.
Expecting the site URL to update instantly without waiting for deployment
Fix: New deployments take 30 seconds to 3 minutes. Watch the Deployments tab for a green checkmark before reloading your live URL to see changes.
Frequently Asked Questions
Yes, Vercel's Hobby plan is completely free with no credit card required. It includes unlimited deployments, automatic HTTPS, global CDN, and 100GB of bandwidth per month. For most personal projects and learning, you'll never hit these limits. The paid Pro plan at $20/month adds team features, more bandwidth, and password-protected deployments — you won't need it as a beginner.
No. Plain HTML, CSS, and JavaScript files deploy perfectly on Vercel — no framework required. Vercel auto-detects your project type and handles static sites with zero configuration. React and Next.js are popular choices because Vercel was built by the Next.js team, but they are completely optional. Start with static HTML and add frameworks later when you're ready.
Vercel will attempt to deploy it and may show an error if the build fails. If it does deploy but looks wrong, go to your Vercel dashboard, click the Deployments tab, find the last working deployment, click the three-dot menu, and select 'Promote to Production'. This instantly restores your previous working version while you fix the issue locally.
Yes, but with some setup. For contact forms, you can use free services like Formspree or EmailJS that work with static HTML — no backend needed. For user logins, Vercel supports serverless functions and integrates with authentication services like Clerk or Auth0. These are more advanced topics, but Vercel's platform fully supports them when you're ready to go beyond static sites.
Both are free and host static sites, but Vercel offers several advantages for beginners. Vercel provides a global edge network for faster load times, automatic HTTPS with no setup, instant rollbacks, preview deployments for branches, and support for serverless functions and frameworks like Next.js. GitHub Pages is simpler but more limited. Vercel's dashboard is also more beginner-friendly with real-time build logs and clear error messages.
Conclusion
You've just deployed a real website to a global network — completely free and in under 30 minutes. Every time you push code to GitHub, Vercel automatically updates your live site in seconds. Start simple with HTML and CSS, then gradually explore adding frameworks like React or Next.js as your skills grow. Your .vercel.app URL is ready to share right now. The same workflow professionals use every day is now yours to build on.