How to Host One HTML Page

(THIS one, to be exact)

Get one HTML page.

If you want one for practice, I recommend right-clicking on this one and hitting View page source.

If you’re looking to write a page like I did, well, I used Obsidian and pandoc. That might be a bit much, though, maybe just go with this straightforward “Convert Markdown to HTML” site.

HTML is not used to make things look pretty or to do programming stuff.

Get a Github account.

Github is your Undo/Redo’s big brother.

You don’t need to know anything about that.

On Github, start a new repository.

Push the little + icon and click “New repository”.

Name your repository something.

Ignore these. You do not need to “learn more”. You are perfect as you are.

ꙮ be not afraid ꙮ

Hit that succulent “creating a new file” link.

Paste your HTML in there, and name it index.html.

If you don’t name it index.html, our later big boy Netlify won’t know where to look.

Commit that bad boy.

You’ll end up on a screen like this.

If you check back on index.html, you’ll suddenly see your code is all nice and well-formatted.

This is where you change things from now on, with that little pencil.

Changes you make here will show up on your actual website a few seconds after you commit the change.

🖼 If you have images, put those in the repo too.

Like, for example, I’m going to have to put alllllllllllllll of these hot boys in there too, and probably several more once I’m done.

Luckily, GitHub at least lets you drag and drop.

GitHub wasn’t really made for hosting images, as can be seen by the fact that it takes a bit to upload, but I woke up today and chose violence. Nya.

Get a Netlify account.

Okay, you might have heard about Github, but Netlify is some real insider knowledge.

Somewhere in the world a computer needs to be on at all times to let you visit a website at all times.

We don’t want to go through the hassle of setting up an entire multi-tiered VM infrastructure for our lil 🤏 site 🏠🏡🏠 on the World Wide Web 🕸🌐🥺👉🏻👈🏻. Although if you’re ~ into ~ that kind of thing, subscribe to my OnlySDNs.

It’s a business built off of exactly what we’re doing here: Deploying static sites. They let us do a lot of basic stuff for free because they hope when we’re rolling in Web shmoney we’ll come back to them and use their paid stuff for Big Business™ things.

By the by, if you want to not have to write your next site in raw HTML, consider a static site generator. I know Jekyll, although if I was going to start learning one from scratch I’d probably go with Hugo instead. EDIT, July 13 2022! I did in fact end up learning Hugo and even writing a little guide on GitHub about how to get started on it from scratch. Check it out if that's your thing.

Hit that succulent “New Site from Git” button.

Since I already have a site on here, mine looks a little different.

But look! See that “Builds” list? Every time I changed index.html, senpai Netlify noticed me and automatically updated the vot5.live they were actually hosting on their servers.

Ignore these. You do not need to “learn more”. You are perfect as you are.

Wait a moment.

Check that link.

WE DID IT

GO US WE’RE SO FUCKING COOL.

If nothing comes up, double check that your HTML page was actually named index.html on Github. This took me minutes of my life to figure out. Don’t be me. Choose life.

💸 Time to buy a domain name. IF YOU WANT.

The link that Netlify gives you will always work, and if you’re happy with that stop here.

But you do actually need to pay 💵💶💷 to get a domain name. Why? Remember when I said there has to be a computer on at all times to keep a Web site up, and that’s why we used Netlify?

There are also computers whose whole job is to remember who’s who on the Internet, and the tech involved in this is actually pretty tough. Someone somewhere needs to get paid to make sure you can actually go to how-to-host-one-html.page.

💸 Go to Hover and buy a domain name.

Hm, I wonder if – oh, excellent.

Mmm. That’s kinda hard to read, though. Maybe some dashes?

Perfect.

Oh, if you see this, you should know Netlify will encrypt your stuff by default, so this isn’t really anything to worry about.

ꙮ be not afraid ꙮ

Go to the “DNS” tab.

Delete the first two “A” records.

You don’t need them, they don’t actually do anything.

Make an A record with Hostname @, and with IP address 75.2.60.5.

For some reason, Netlify makes it really hard to find that 75.2.60.5 number. Probably because they’d prefer you use their nifty little domain name service, but I woke up today and chose violence. Nya.

🥺💬 "W-what's the @ for?"
🤠💬 The @ stands for your 'apex domain'.
😳💬 "W-what's an apex domain..."
🤠💭 jfc this kid's a dumbass
🤠💬 An 'apex domain' is just the website you bought without the www at the front. No I don't know why that makes a difference. It just does.

The 75.2.60.5 I can explain a bit. That points to Netlify’s “main load balancer”, which is basically a steady, stable mask for an ever-changing sea of servers (and changing IP addresses) underneath it.

Make a CNAME record with Hostname www, and Value wherever-the-fuck.netlify.app.

Go back to your Netlify page and hit “Set up a custom domain”.

Yeah that’s actually pretty normal, it takes Netlify a bit of time to get its certificate. Don’t be intimidated.

🚶🏻‍♀️ Take a walk

Reload the page

👌🏻👌🏻

Test it out! Go there!

🥳🥳🥳🥳🥳

WE DID IT YEAH

Considering visiting my own web site, or adding me on LinkedIn!

I'm an American electrical and software engineer living and working in the beautiful frozen capital of the Arctic. I'm basically an ice wizard. And I'm seeking to grow my network!

[Optional] Add a comment section with utteranc.es!