Intro to Vercel
What is Vercel? Vercel is a platform for developments to help deploy their "frontend frameworks" and "static sites." Vercel's model is based around developer experience and to make the developers life much easier from start to finish of projects. The platform gives developers an easily usable UI and simple ways of deploying their sites. Vercel is partnered with many different companies that use their service in all types of industries, such as Facebook, Chipotle, and Carhartt.
There is a great blog by Michael Potter of Red Hat regarding integrating micro frontends into web apps here.
Basic Vercel Demo
To start using Vercel with your web pages and web apps, you need a Github account that has the repository of your web page or web app. You can connect this through the Vercel site here. Once this is done, you can import your repository into Vercel for it to deploy. Vercel will automatically re-deploy your app anytime you push to your Github repository. I used one of my existing repos to deploy on Vercel. On your dashboard, you can hit the "New Project" button, which takes you to a page where you will choose which Github repo you would like to import. You can change your framework preset setting depending on which one you used when creating the app. You may also need to change your output directory to whichever your app is set to. Hit "Deploy" and the result should look something like this:
Deploying an 11ty site
There are many types of deployments you can do with Vercel, one of them being 11ty. From our last blogpost, we created a few different 11ty sites and were able to deploy them using Github Actions. This time, we are using the same sites, but deploying them through Vercel. We can do this through this link, that takes us to a page where you can link a github repository that has your working 11ty site. From here, you should be able to easily click through the instructions and hit Deploy. Vercel will do everything for you and deploy your 11ty website. You should receive this message with your website below:
CI/CD Pipeline Comparison
Vercel's approach to CI/CD is wonderful for the developer and is certainly developer experience focused. Like I said earlier, everytime you push something to your deployed Github repository, Vercel will automatically re-deploy the app with your added content. This is a very easy and simple way to "check your work" and have live feedback to you by looking at your working deployment. Github Actions is another method of CI/CD pipeline, but requires much more effort and involvement to make a deployment to actually work. I recommend using Vercel in your CI/CD pipeline because of its simplicity, very intuitive approach to deployments, and developer-friendly UI.
Top comments (0)