← Back to Explore Feed ✨

How to deploy your website on Vercel

A step-by-step guide on deploying your web app to a popular cloud deployment platform.

Beginner
GitHub
Hosting
Tutorial
Web Dev

Written by

@thunderbird

on May 24, 2024

A Beginner's Guide:

Deploying a website is a crucial step to make your project accessible to the world. One of the easiest ways to achieve this is by using Vercel. This guide will walk you through deploying your website to Vercel, whether you're using plain HTML, CSS, and JavaScript, or popular frameworks like Next.js, React, Gatsby, or Svelte.

But wait, why do I need to deploy my website?

Before diving into the deployment process, let's briefly discuss why deployment is essential:

  1. Accessibility: Deployment makes your website available on the internet, allowing anyone to access it via a URL.
  2. Performance: Hosting services like Vercel use global content delivery networks (CDNs) to ensure fast load times and reliability.
  3. Scalability: Professional deployment platforms can handle increased traffic without compromising performance.
  4. Version Control: Deployment platforms integrate with version control systems like Git, enabling seamless updates and rollbacks.

Now that you understand the importance of deployment, let's get started with Vercel.

Step-by-Step Guide to Deploy Your Website to Vercel

Step 1: Create a Vercel Account

  1. Visit Vercel's website.
  2. Click on "Sign Up" and create an account using your email, GitHub, GitLab, or Bitbucket account.

Step 2: Install Vercel CLI (Optional)

For a streamlined deployment experience, you can use the Vercel Command Line Interface (CLI). This step is optional but recommended.

  1. Ensure you have Node.js installed on your computer.
  2. Open your terminal and run the following command to install the Vercel CLI:
npm install -g vercel

Step 3: Prepare Your Project

Before deploying, ensure your project is ready. Here's how to prepare different types of projects:

Plain HTML, CSS, and JavaScript

  1. Ensure all your files (HTML, CSS, JavaScript) are in a single folder.

Using a Framework

  • Next.js: A React framework with built-in server-side rendering.
  • Gatsby: A React-based framework for creating static websites.
  • Create React App: A simple way to start building React applications.
  • Svelte/SvelteKit: A framework for building high-performance web applications.

Make sure your project is set up and running locally before you proceed.

Step 4: Deploy Your Website

Using the Vercel CLI

  1. Navigate to your project directory in the terminal.
  2. Run the following command:
vercel
  1. Follow the prompts to log in (if you haven't already) and set up your project.

Using the Vercel Dashboard

  1. Go to the Vercel dashboard.
  2. Click on the "New Project" button.
  3. Select the Git provider (GitHub, GitLab, or Bitbucket) where your project is hosted.
  4. Import the repository you want to deploy.
  5. Follow the prompts to configure your project settings.

Step 5: Configure Your Project (If Necessary)

Vercel automatically detects the framework you're using and sets up the necessary build settings. However, if you need to configure anything manually, you can do so in the project settings.

Step 6: Deploy!

Once your project is set up, Vercel will automatically deploy it. You can monitor the deployment process in the Vercel dashboard. When it's done, you'll get a URL where your site is live.

Step 7: Managing Your Deployments

Vercel makes it easy to manage your deployments:

  • Automatic Deployments: Every time you push changes to your repository, Vercel automatically redeploys your site.
  • Preview Deployments: For every pull request, Vercel creates a preview deployment, allowing you to see changes before they go live.
  • Custom Domains: You can add a custom domain to your project in the Vercel dashboard.

Editing the URL

When you deploy your site, Vercel assigns a default URL that includes your project name and a .vercel.app domain. You can customize the subdomain to make it more memorable.

Step 1: Open Project Settings

  1. Go to the Vercel dashboard.
  2. Select your project.

Step 2: Change the Subdomain

  1. Navigate to the "Domains" tab.
  2. Under the "Production Domains" section, you'll see the default URL (e.g., your-project-name.vercel.app).
  3. Click the "Edit" button next to the domain.
  4. Enter your desired subdomain (e.g., my-cool-site.vercel.app).
  5. Click "Save" to apply the changes.

Your site will now be accessible at the new subdomain you specified.

For more detailed instructions, refer to Vercel's Custom Domains guide.

Framework-Specific Guides

Next.js

  1. Ensure your project is set up with Next.js.
  2. Follow the Next.js deployment guide.

Gatsby

  1. Ensure your project is set up with Gatsby.
  2. Follow the Gatsby deployment guide.

Create React App

  1. Ensure your project is set up with Create React App.
  2. Follow the Create React App deployment guide.

Svelte/SvelteKit

  1. Ensure your project is set up with Svelte or SvelteKit.
  2. Follow the SvelteKit deployment guide.

Useful Links

Conclusion

Deploying your website to Vercel is an efficient and user-friendly way to make your project accessible on the internet. Whether you're using a modern framework or just plain HTML, CSS, and JavaScript, Vercel simplifies the deployment process, allowing you to focus on building your site.

Happy deploying!

If you found this guide helpful, be sure to leave a heart!