Gone are the days when it became difficult to deploy your code for real-time changes. The continuous integration and continuous deployment process has put a stop to the previous archaic way of deployment. In this guide, I will show you how to connect GitHub and Build a CI/CD Pipeline with Vercel. Please see How to use GitHub as Source Provider for AWS CodePipeline, and how to use Command-Line on Git Bash and GitHub Desktop to PUSH local code to GitHub.
We now have several platforms that you can use on the bounce to achieve this task easily. One of these platforms is Vercel which can be used to deploy several applications fast. You do not need to be a DevOps expert before you can set this platform up because you can deploy your site with zero configuration.
Vercel can integrate with GitHub, GitLab, or Bitbucket repository for instant continuous deployment. On this platform, you can run automated tests for performance and reliability on every push, your Pull and merge requests can be deployed instantly to a unique URL that is accessible to everyone.
Read further about How to Deploy a React Application on Netlify, How to Create a React App with Vite, How to Deploy GitHub Repositories to cPanel using GitHub Actions. Follow as I will be showing you how to connect GitHub and Build a CI/CD Pipeline with Vercel.
Push code to GitHub Repository
We are going to be using NextJS App as an example. It is currently on my localhost:
Run the URL shown in the image below
Let’s assume you already have a repository and branch created on GitHub. You can Set up and use an upstream branch in Git to get all this done.
1. Push local code to the GitHub repository using the below Git command:
git init
git add .
git commit -m “first commit”
git branch -M main
git remote add origin <URL>
git push -u origin main
GitHub Code repository
How to connect GitHub and Build a CI/CD Pipeline with Vercel
2. Next you will need to create a free account with Vercel, you will need to create one at https://vercel.com/signup. Choose your Plan Type.
Connect to GitHub
3. Create your account using your GitHub credentials for the best experience.
4. After you log in, click on the drop-down Add New and select Project. You will then see a screen where you can import your Git Repository.
Installation of GitHub App
5. Install the GitHub application for the accounts you wish to Import.
6. Import the Git Repository you want to configure with Vercel.
7. When configuring the Project enter the name of the project and select the Framework, I will be using Next.js Framework. Click Deploy and wait briefly for the deployment process to complete.
8. The deployment process only takes few minutes.
Connect GitHub and Build a CI/CD Pipeline with Vercel
9. if everything goes well you will receive a message “Congratulations!”
10. Automatically a Production domain will be assigned where you can access your application.
11. We can access our application on this domain as shown in the image below
11. You may decide to use your own custom domain. Some configurations need to be done, like A Record, CNAME, and Nameservers.
FAQs
Yes. GitHub can be used to configure a CICD pipeline. If you used GitHub as your code repository you will not need to build, deploy, or maintain additional tools.
The CI/CD pipeline combines continuous integration and continuous delivery using these four phases: source, build, test, and deploy.
I hope you found this blog post on How to connect GitHub and Build a CI/CD Pipeline with Vercel Interesting and helpful. If you have any questions do not hesitate to ask in the comment section.
