DEV Community

RyanArmani
RyanArmani

Posted on

Vercel Introduction

What is Vercel?

Vercel is a deployment platform for frontend developers. ​Vercel enables developers to host websites and web services that deploy instantly and scale automatically without any need for configuration. It is a common method for deploying static webapps, static sites, and frontend frameworks! Specifically, Vercel is defined as a Function as a Service (FaaS) platform, which is simply a service that enables users to produce microservice applications over the cloud without the need to support said applications with the infrastructure typically required to deploy such applications. As such, Vercel is a convenient method of deploying applications even for individuals with minimal understanding behind the deployment of such services.

Image description
https://vercel-demo-test-1-dncodfj4w-ryanarmani.vercel.app/

Note: For these sites, I had to change the output directory from _site to dist, a small change that may be unique to these apps. Images are seen below.

11ty websites

To prove how easy it is to deploy websites, I will be deploying three websites of my own which were produced by 11ty ( a stitic site generator) in a previous project. They are included below!

To setup these sites, one simply has to connect their github to Vercel by simply logging into their account. From there, a user can select the relevant repositories they wish to utilize within Vercel. Any updates that occur within these repositories will automatically be updated in Vercel (how convenient)! From here, a user can simply import a repository of choice, and simply begin to build the application!

Image description

Image description

11ty Site pictures

https://11ty-blog-temp1.vercel.app/

Image description
https://11ty-final-blog.vercel.app/

Image description

https://11ty-blog2-run1.vercel.app/articles/first-post

Image description

Vercel Demo

For this example, I used the ist-vercel-demo repository found
here for deploying a static app to Vercel. Following the steps previously used to establish the github connections, I utilized the Import Third Party git repo option found in the image below.

Image description
After cloning this repo, I added a .env file through my github. From here, I simply deployed the app as seen below!

Image description

Note: For these sites, I had to change the output directory from _site to dist, a small change that may be unique to these apps. Images are seen below.

CI/CD

As a quick cover for definitions, a CI/CD (Continuous Integration/Continuous Delivery) pipeline is a series of steps that must be performed in order to deliver a new version of software. Github is one such means of producing a CI/CD pipeline, and is a common means of hosting code and updating it before deployment. While commonly used, github is genuinely confusing when used initially for CI/CD purposes. Vercel offers an impossibly easy method of deploying existing code, with the added benefit of automatically updating projects with changes that occur in github. Vercel is a powerful tool that can only be appreciated in "application", in the literal sense of the word.

Top comments (0)