Let's deploy a basic website with HTML,
CSS, and JavaScript to Vercel. So, Vercel is a frontend cloud, and we support 35-plus
different frontend frameworks. But sometimes, you want to deploy just a basic website that
uses good old-fashioned vanilla HTML, CSS, and JavaScript. And of course, we support
that too. So, we're going to show that today. We're going to show setting
up basically the most simple website possible to get you up and running. Let's
get started with our HTML starter template. So, this is a very simple template
that just uses a single HTML file that's going to help you get online very
quickly. So, on vercel.com/templates, I found this template. I'm going to click
'Deploy'. Now, I already have an account; I've already connected to my GitHub repository.
So, I'm going to make a new private repository. Let's call this 'HTML Starter Video,' and I'm
going to click 'Create'. This is going to copy that code into a newly created git repository, and
it's going to kick off deploying our application. So, in just a few seconds here, we
took our HTML file, deployed it, and uploaded it to all of Vercel's Edge Network
regions. And now we see our site is online. So, if I click out here, I can open up this new
application. So, we see 'HTML Starter Video Vercel.app'. Every deployment gets your new
.vercel.app domain. So, this is already online, it's already set up with SSL, so we get this
secure URL. And there's a lot of things inside of this template I want to dig into that
are just kind of already set up for you. But first, if we go back to Vercel and we click on
'Continue to dashboard,' we're going to see this new project that was set up for our deployment.
So, if I click on 'Deployments,' for example, we see we had this one production deployment. It
took 8 seconds for us to deploy this application out to production. We see the domains, we
see the environment, we see the outputs. So, we have under here, we have one Edge Middleware,
which we're going to talk about that in a second, and then we also have an index file, and then
there was a readme as well. If we wanted to, we could even ignore that readme
from being included in our deploy. Okay, let's talk about what's included
in this starter HTML file. If you want, you can always go in your browser and view the
source if you want to see the underlying HTML that's being included here. We're going to talk
about some of these things individually. So, let's start at the top. First, we have
analytics that's automatically set up. Now, there's only one file right now, but as you add
more HTML files, you can have some nice traffic analytics as visitors are coming in, and you
don't need to add any additional third-party scripts. So, this is entirely first-party;
we've already set it up on the page. And if I wanted to just go back over to our
HTML starter video project and go to analytics, I can say, you know what, I do want to
enable Web Analytics. This all sounds great. I'm going to turn that on. And I don't
even need to use any special packages here, because this is just included through a good
old-fashioned script tag. Now, this does require redeploying our site so that it can understand
that we have enabled Web Analytics here. So, I'm going to go back to our deployments,
I'm going to go here on this deployment, I can just click 'Redeploy'. So, we're going to redeploy
this. That's going to kick off a new deployment, and now on the next deployment that we have,
when I make requests to our site (granted, again, it's just one URL now), that gets
alias to 'html-starter-video.vercel.app'. So, I can just refresh the page here a couple
of times, that all looks good. And now, if I go back over to our project and I go to
analytics, it says, 'Hey, we've now recognized there's been some traffic to your website.'
Let's start taking a look at what we have here. So, we can filter by the different time, we
can filter by the different environments, we can disable this if we want, we can add more
things as needed. But we see that we're starting to pick up traffic here, and these numbers can
update in real-time. So, we see that there's, you know, one online now, and as the page views start
trickling in, we can see that number increment. So, that's all it takes to get set up with some
basic traffic analytics. Another thing that's great about this template is that you want the
simplicity of just having a basic HTML file. But as you make changes to your site, wouldn't it
be great if you could automatically update your domain, update your live deployment with those
contents? So, if I go over to GitHub, for example, I can see this single HTML file that was
created. I can just click the edit button here, and let's say I want to call this 'Vercel HTML
Starter Video'. I'm going to commit my changes, we'll just go directly to the main branch
for the sake of this video. And now, if we go back over to our application,
we click on 'Deployments,' there's a new production deployment that's kicked off, and it's
taken in those new changes based on that commit. And now, if I go back over to here, it's
finished, I see 'Vercel HTML Starter Video'. So, we can iterate really quickly and push changes to
our application, see them live in production. Now, the next thing on the list is fast gzip
compression. So, by default, there's going to be gzip compression on all of your files. So,
that's really great; helps speed up the response coming from our edge network. You can also
use Brotli compression if you prefer; that's even a little bit better. So, you can opt into
that using the headers that you forward along. The last thing here to talk about is advanced
routing configuration. So, we included it in this template. You don't necessarily have to use
it, but sometimes it can be nice. So, you can use a Middleware file that's going to allow you to set
a bunch of headers on your files. Now, Vercel also has a static header option for this, where you can
include it in a vercel.json file. But sometimes, you want to write this through code. So,
let's take a look at what this looks like. Okay, back over on GitHub, we see this single
middleware.js file that was created in the root of our application. Basically, all it's
doing is taking in the incoming web request, and it's saying, you know what, we're
going to produce a web response, and we're going to include some additional security
headers on here. This is a trivial example, but you can do a lot with this, since you have
access in JavaScript to the web request and response. And we have a bunch more documentation
and examples if you want to use Middleware. So, the last thing I want to talk about in this
template is actually how it's being styled. So, if you look at the output here in the DOM,
you see that there's a bunch of HTML elements, but there's no class names. We're not assigning
any of these elements and class names. So, where is it getting these styles from? Well, I'm
actually using a single CSS stylesheet. Sometimes they call these CSS Zen Gardens, basically where
everything is styled just directly referencing the actual HTML element. So, all the <p>
tags are going to look in a certain way, all of the <h1>s are going to look a
certain way. This is a really easy, small thing to do that can give you a decent-looking
website without having to do anything extra. So, I like to use these little simple hacks when
I'm just building a very, very basic website. So, I don't even have to write any custom styles
myself. Just a fun little thing. But that about wraps up creating a very simple HTML, CSS, and you
could also throw in some additional JavaScript in this file if you wanted to, as well. Maybe even
some jQuery. The world is your oyster here, and we showed how you took this and deployed it to Vercel
in, I think, it was 6 to 8 seconds. So really easy to get your first site online, make some
changes, add some analytics, add some additional customization, really whatever you want to do
while deploying on Vercel's global edge network. So, this is going to be fast, wherever your
visitors are in the world. If you want to see more content around more basic HTML, CSS, JavaScript
sites, maybe even some HTMX, I don't know, we'll see. Just leave a comment down below, and we can
make more videos on this. Hope you enjoyed, peace!
