logo
Published on

How to Deploy Your Project on Vercel with GitHub Integration — A Step-by-Step Guide

Vercel provides you an option to choose the project template from the avaiable range of templates which are fully optimized and ready for instant deployment, which also saves your time by making you skip basic setup which is time consuming and let you get straight into development.

Step 1: Browsing Vercel Templates

  1. visit vercel.com/templates
  2. You'll find a wide range of template optionswhich are categorized by framework:
    • Next.js (perfect for SSR/SSG projects)
    • Nuxt
    • React, Vue, and more
  3. You can also search or filter templates by category, framework, or features (e.g. with TypeScript, with Tailwind CSS).
Template

Step 2: Deploying the Template

Once you select the template, you can now easily deploy it to Vercel. Follow these steps:

Click on “Use Template”

Once the template is selected, click the “Use Template” button to start the deployment process. Now it will show you the option to link your project(selected templated) with your GitHub repository.

Choose GitHub as the Source

After clicking "Use Template", Vercel will give you option to select a source for your project. Choose GitHub as the source control system.

Github

Connect Your GitHub Account

If GitHub account is not linked to Vercel yet, link your Github account with Vercel and choose the Github Repository that you want to deploy.

Deploying the Template

Now that the Github account is Linked, project deployment process will start and you can now see the real-time deployment progress.

Step 3: Deployment Options

After deploying your template, you can configure your project’s deployment settings, that may include selecting the different branches for production and development.

Set the Production Branch

Inside project settings of selected project, you can select which branch will be used for the production environment. By default, Vercel uses the main branch for production. However, you can change this if you'd like to use a different branch.

Set the Development Branch

you can configure your development branch for the project same as you did for production branch. Development branch let you test your code changes before pushing code to production branch.

Deployment Progress

Triggering Deployments

Once these branches are set, every push to the designated production or development branches will trigger a new deployment on Vercel.

Step 4: Successful Deployment

After completing the setup and pushing your code to the chosen branch, Vercel will automatically deploy the application. You can monitor the deployment progress and confirm that everything is running smoothly.

Build Logs and Live URL

Once the deployment process is started, you can see the build logs in real time. These logs provide important information about the build process, so you can troubleshoot if needed. After the build is successful, Vercel will generate a live URL for your deployed project.

Triggering New Builds

After the initial deployment, any new changes pushed to the specified production or development branches will trigger new builds. This allows you to keep your application updated automatically with every change you make to your GitHub repository.

Deployment Status

You can also monitor the status of your deployment from the Vercel dashboard. If the deployment is successful, it will show a green status, and if there’s an issue, you will see a red status with error messages indicating the problem.

deployment status