DEV Community

Cover image for How to Host a Project on Vercel Using a GitHub Repository
Md Sana ullah
Md Sana ullah

Posted on

How to Host a Project on Vercel Using a GitHub Repository

Step 1:

  1. Create a GitHub Repository
  2. Go to GitHub and log in to your account.
  3. Click on the New Repository button.
  4. Provide a name for your repository, add a description, and set it to Public or Private.
  5. Click Create Repository.

***Step 2:* Push Your Project to GitHub**
Open your project folder in your terminal.
Initialize a Git repository and push your project:
bash

git init
git add .
git commit -m "Initial commit"
git branch -M main
git remote add origin <your-repo-url>
git push -u origin main
Enter fullscreen mode Exit fullscreen mode

**
Step 3: **Log in to Vercel

Go

  • to Vercel and sign in using your GitHub account.
  • Authorize Vercel to access your GitHub repositories.

Step 4: Import Your GitHub Repository

  • After logging in, click on the New Project button
  • Select Import Git Repository and pick your repository from the list.
  • Click Import.

Step 5: Configure Your Project

  1. Review the configuration settings, such as:
  • Framework Preset: Vercel detects your framework automatically (e.g., React, Next.js, or Vue.js). If it doesn’t, select it manually.
  • Build Command: Set your build command (e.g., npm run build).
  • Output Directory: Specify the folder where your built files will be stored (e.g., dist or build).
  1. Click Deploy.

Step 6: Wait for Deployment

  1. Vercel will start deploying your project.
  2. Once the deployment is complete, you will see a live link to your project.

Step 7: Update Your Project

  1. Make changes to your code locally.

  2. Push the updates to your GitHub repository:

git add .
git commit -m "Update project"
git push origin main
Enter fullscreen mode Exit fullscreen mode
  1. Vercel will automatically rebuild and deploy the updated version

Step 8: Access Your Project

  • Go to your Vercel Dashboard.
  • Click on your project to view details.
  • Use the provided Live URL to access your project online.

Congratulations! Your project is now live on Vercel. 🎉

Top comments (0)