Exactly How to Deploy Local Files to Make a Live Website

Chris CoyierMay 17, 2024About 7 min

Exactly How to Deploy Local Files to Make a Live Website 관련

DevOps > Article(s)

Article(s)

A very basic step-by-step guide of exactly how to do it for static files like .html, .css, and .js files.

This post addresses a common question we get from the community:

What’s the simplest way to deploy a website so I can share it with other people?

Cutting to the chase:

Sign up for Netlify
Go to Drop
Drop the folder of files there
Done

I’ll walk you through all this below, I just wanted to be clear about what we’re doing. We’re trying to go from playing around with code on your local computer to deploying a real website! The requirements are that the process is straightforward (dare I say: “easy”) and the service has a free tier. The goal with this article is to give you direct steps, not confuse the issue with too many considerations and options.

Now let’s get into more detail.

Article Series

Exactly How to Deploy Local Files to Make a Live Website

A very basic step-by-step guide of exactly how to do it for static files like .html, .css, and .js files.

The Simplest Way to Deploy Your Own Updatable Portfolio Site

For the true beginners out there! We'll put the files in a GitHub repo and connect it to Netlify to host it.

You’ve got some files that make a website.

Maybe those files are:

index.html
style.css  
script.js

Or maybe they are like this:

images/
  logo.png  
  hero.png  
  background.jpg  
index.html  
about.html  
contact.html  
style.css

We’ll call them (and you might hear them being referred to as) “static files”. These files exist on your computer. Maybe you created them yourself or you exported a Pen from CodePen. You can look at them in a web browser and it looks like a website.

The example website we’ll use here is the wonderful Personal Portfolio Page from Tiffany Du (tiffanyadu). The file:// URL above will work on my computer, but not yours!

Now you want it to be a real website on the real internet.

Good on ya. This is a powerful moment. Your creation is about to be viewable by anyone in the world. Rather than complicate things with options, let’s look at one option that will get the job done. Then we’ll talk about where to go from there.

This is not an ad for Netlify. We have no affiliation. Sign up here.

There are other options, and we’ll cover those later. We’re picking a path forward and going for it. Truth be told, Netlify is a good host particularly for static files like this and has a generous free starter plan. You can grow with Netlify as they ultimately handle any amount of traffic and have lots of advanced features as you need them.

2) Find the Folder of Files on your Computer

The folder is key here. You want to be able to select the folder that contains that initial index.html file that is the home page of your site.

Here’s mine, just sitting on my Desktop.

It could be anywhere on your computer, depending on where you created it or downloaded it. You just need to be able to find it for the next step. It doesn’t matter if you’re using macOS, Windows, or Linux, you’ll be able to find and select the folder somewhere.

If you’ve exported from CodePen…

You’ll get a .zip file that you can double-click to “extract” into a folder. Inside that folder you’ll see a dist folder, src folder, and some other files. It’s the dist folder that you’ll use for the next step here.

3) Go to Netlify Drop

Be logged in to Netlify and go here: https://app.netlify.com/drop

You can use this Drop app while logged out, but the resulting site is password-protected and only stays online for 1 hour. Being logged in will remove those restrictions, and unlock more options you’re very likely to want afterward, like customizing the URL.

4) Drop the Folder into the Drop Zone

Just like this:

You can see in the video that as soon as you’ve dropped the folder, the site instantly deploys, and you’ll be given a URL where the site is live at. You’re essentially done at this point! You can also see in the video that I changed the URL that I was auto-assigned to something a bit more readable.

Congrats! You’ve got your website live. I hope it feels good. 😎

Doing More

The URL you’re given from Netlify is customizable, but it’s still what is called a subdomain. In that quick video above, I customized it to:

https://my-cool-porfolio.netlify.app

Where my-cool-porfolio is the customizable part. Subdomains are fine. I actually quite like them… when they are your subdomain. It’s reasonable, and I’d argue a good idea, to have your own domain name. Something like:

https://your-name.com

The dashboard area in Netlify will essentially walk you through this. Domain names are never free though, so this part will cost money on a yearly basis.

Remember there are lots of fun “top level domains” (TLDs) as well. That is, the .com part of website.com. I’d encourage you to have fun there. Get yourself a .me, .dev, or heck, there is even a .portfolio you could get. I use .net myself.

Alternatives

There are plenty of other hosting services that can do this job. All these listed here are fairly major players, are somewhat designed around hosting a static file website, and (mostly) have free tiers.

Hosting Service	Advantages	Disadvantages
Cloudflare	Cloudflare Pages has a drag and drop deployment option and advanced features much like Netlify and Vercel.	Nothing major. Largely just as easy as Netlify and similar features.
Vercel	Vercel is a very comparable service to Netlify. It is essentially designed for this.	Requires code be in a Git repository.
GitHub	GitHub Pages is designed for this. If your code is on GitHub anyway, this can be a natural choice. Note that GitLab also has pages, as well as Bitbucket.	You’ll need to use Git. Learning Git is a great idea, but for absolute beginners this might be too much. Using a custom domain is more difficult. No advanced features to grow into.
AWS	AWS Amplify is designed to be the easy version of using AWS tools, and focuses on deploying sites. They offer a similar drag-and-drop deployment (screenshot).	Getting set up with an AWS account and generally navigating AWS at all nobody would call easy.
Google Firebase	Firebase Hosting is largely in the same bucket as all of the above.	Requires CLI. People don’t generally use Firebase just for static hosting. It’s more commonly used for their realtime database features.
Microsoft Azure	Azure Static Web Apps is Microsoft’s product in the category that is largely in the same bucket as all of the above.	Just feels a little jankier than many others to me, although if you use other Azure products perhaps it feels more at home. Requires code to be in Git.
Render	Render Static Sites is largely in the same bucket as all of the above. Hosts lots of other types of sites as well, so you could potentially have a single host for different types of sites.	Requires code be in a Git repository.
Kinsta	Kinsta Static Site Hosting is largely in the same bucket as all of the above. Hosts lots of other types of sites as well, so you could potentially have a single host for different types of sites.	Requires code be in a Git repository.
Surge	An early no-frills classic in this space.	Requires CLI. Feels abandoned.
Forge		Looks like there is only a free trial, no free tier. But I literally couldn’t sign up to check it out, it felt entirely broken.
Static.app	Looks like a pretty nice option! Drag and drop uploading. Very streamlined interface.	Only free trial, no free tier
Tiiny Host	Also looks like a pretty nice option. Drag and drop uploading. Very streamlined interface.	I’ve seen a bunch of spam hosted on these URLs which makes me nervous.