Vercel Introduction
Published: 2022-03-15 03:58:33

## 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://dev-to-uploads.s3.amazonaws.com/uploads/articles/fj1f723co0ml7b43v7uk.png)
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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/utk6510t5oacbk9ackpu.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/34bx6ohtpcxn0gd2xevh.png)

### 11ty Site pictures

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zb273nzi8vn878oxh5hw.png)
https://11ty-final-blog.vercel.app/

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u6x3i902rh995kntlrhg.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x3z6hajj2ljlrg0lcnan.png)

## Vercel Demo
For this example, I used the `ist-vercel-demo` repository found
[here](https://github.com/btopro/ist-vercel-demo) 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0etjlalniypltd034ati.png)
After cloning this repo, I added a `.env` file through my github. From here, I simply deployed the app as seen below!

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l8odw59ob7e53d48pqrx.png)

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.