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 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.
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.
After changing that, you should be ready to deploy. After clicking the deploy button, you should have your site ready.
From here you can view your global site and the repo 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.
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/
2. 11ty Based Blog
GitHub: https://github.com/briangan123/11tyLab
Site: https://11ty-lab.vercel.app/
3. Custom 11ty Resume Site
GitHub: https://github.com/briangan123/resume11ty
Site: https://resume11ty.vercel.app/
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 and this article 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.
Top comments (0)