Deploying sites with Vercel for beginners
Published: 2022-03-13 22:46:20

## **Vercel**
Vercel is a platform that makes it easy to deploy static sites and frontend frameworks. Vercel takes care of the harder things such as deployment and automatic scaling. This platform allows you to create a brand new site for deployment by using one of the templates they provide or by importing an existing application from GitHub. In this blog, I will go over how to get started with Vercel so that you can incorporate this for your own site!

## **Getting Started**
First, you will want to head over to [vercel](https://vercel.com/) and create a free account. Make sure to link it to your GitHub so that you can access your repositories. Vercel also allows you to use third party repos and will clone a copy for your personal use. All you have to do is enter the repo url. In this example, I used the ist-vercel-demo repository. 

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

Before finishing deployment, I had to change the output directory to dist. Typically, if you are having issues with your output, you should change it to _site or dist depending on how your site is being deployed. If you already deployed your site and you are having issues building it, you can go to the settings and change the output directory from there. 

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

After changing that, you should be ready to deploy. After clicking the deploy button, you should have your site ready. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0ih1gctwn4cx3yycj2pp.png)
 
From here you can view your [global site](https://vercel-demo-drab.vercel.app/) and the [repo](https://github.com/briangan123/ist-vercel-demo) associated with this deployed site.

## **Viewing through CLI**
To be able to use Vercel in your command line interface, you will need to use these commands after you cd into the correct directory.
```
npm install
npm i -g vercel
```
Then run the command `vercel dev` to get started.

When I tried to go through this process using the CLI, I ran into the output directory issue again. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ozl847m59i7y0wjtqif1.png)
 
As I previously mentioned, this can be changed in the settings on the Vercel UI. The CLI is trying to output to "public" instead of dist in this case. 

## **Applying this to my 11ty sites**

## 1. Basic 11ty Site
**GitHub:** https://github.com/briangan123/11ty
**Site:** https://11ty-liard.vercel.app/
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gwr5ak4hxjhr7n0ccta7.png)

## 2. 11ty Based Blog
**GitHub:** https://github.com/briangan123/11tyLab
**Site:** https://11ty-lab.vercel.app/
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0kabnflz1u3hx1e15fme.png) 

## 3. Custom 11ty Resume Site
**GitHub:** https://github.com/briangan123/resume11ty
**Site:** https://resume11ty.vercel.app/
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dwcdgt9xd4vtzmu1lg6f.png)

## **CI/CD Pipeline Comparison**
Using Vercel makes the deployment of static sites very simple. Previously, my sites were deployed using GitHub pages, which was very tedious and annoying to deal with because it constantly had issues such as css not being shown and the output directory not being output correctly. Vercel offers a simple UI for developers to easy get their site running globally without the hassle. Developers can still change their code through GitHub and Vercel will update along with it, which makes the CI/CD process even more simple. 

For more information about Vercel and its application, check out their website's [docs](https://vercel.com/docs) and this [article](https://www.redhat.com/architect/micro-frontend-architecture) by Michael Potter. Vercel is the future for front-end web development and is currently used by large companies such as, McDOnalds, TikTok, Hulu, Ticketmaster, etc.