Draft of Lesson 2: Joe Hills says you can host a web page

Work in Progress Note!

Welcome, this is a draft script that I’ll be using in today’s live taping of the next Joe Hills Says You Can Code YouTube video. You can join the taping at 3:30pm US Central Time at https://twitch.tv/joehills

There’s quite a few blanks left to be filled in as I tape my process,  but when you come back after the video goes live, those will be filled in!

Update: taping concluded!

I’m off to the editing bay! You can expect the video later this week!


Introduction

Howdy, y’all Joe Hills here, recording as I always do in Nashville, Tennessee, and I’m here today to help you help yourself experience the joy and wonder of self-publishing on the internet! 

In our previous lesson, we worked together to enthusiastically create a bad web page, as that’s the first step to doing anything well—as long as that “anything” is making a web page!

In this lesson, I’ll be teaching you how to self-publish that web page by copying it from your computer to a web server.

What is a web server?

Without getting too technical, a “web server” is basically “someone else’s computer in a data center.”

So, you could think of that someone else’s computer in a data center as someone else’s bulletin board in a coffee shop. If you had a community newsletter you wanted to post, you’d print a copy of what you wrote and pin it to the bulletin board, which people would access by visiting the coffee shop and walking up to it. 

When you upload a copy of your web page’s html file, that’s like pinning a printout to the bulletin board. When visitors type the url or your web page into their web browser, that’s the digital equivalent of them walking up to coffee shop bulletin board to see what’s going on around the neighborhood.

Now if you’re entrepreneurial, you can always buy your own server to put in a data center, just like your could theoretically buy your own coffee shop and your own bulletin board, but we can’t all be Bob Bernstein, so most of us let someone else host the web pages for us. 

What does hosting cost?

Some university students may have access to “free” web hosting through their institution, like my Alma Mater’s my.vanderbilt.edu program, so if you’re a student, check if your school offers to host websites for you. Obviously Vanderbilt students aren’t really getting free hosting, they’re just paying for it out of their $65,000 of annual tuition, but don’t worry! There’s plenty of ways to buy web hosting directly without bundling in a four-year degree from a private university!

For example, our sponsor for this lesson, NameHero, have a few different tiers of hosting they offer, but for the purposes of this lesson I’ll be using the Turbo Cloud tier they provided me to use for this course as part of this sponsorship. 

I’ll walk you through how to pick hosting features later in this video, because the first thing I want to show you is how easy it is to actually upload your bad web page from Lesson 1. 

Publishing: upload your html file from your computer to the server

Your web server has a directory structure that is basically the same as the one on your computer. We call whatever directory is serving the home page for your site the web root directory. In our next episode, we’ll be exploring how to use additional sub directories to host assets like fonts and images for your site, but for today, we just want to identify our web server’s web root directory and upload our bad web page. 

Your web hosting company should provide you with instructions for connecting to your server and uploading files, but the default upload destination isn’t necessarily the public-facing web root directory. In some cases, that directory might be named htdocs, but in this case, it’s called TODO. 

Most entry level web hosts these days have a web-based file manager you can use in addition to old school sftp connections. This is another rabbit-hole warning! While you’re just starting out, you can probably stick to whatever your web host provides. You may have heard from friends who do a lot of web development work about the command-line based OpenSSH sftp client or graphic SFTP clients like Filezilla, but those are likely more than what you need for what we’re attempting today.

So, when we open our web host’s control panel, we can find the file manager here:

TODO screen capture

In my caee, I can see that when we initially connect we’re looking at the TODO directory and that we can access the web root directory by clicking TODO. 

Once we’ve confirmed we’re looking at the public-facing web root directory, we can upload our bad web page file using the file manager’s upload feature like so, and now the page should be live.

Let’s access that page by visiting the domain name I bought from my host followed by the file name. 

So: example.com/badwebpage.html

TODO screenshot

And there it is!

Be careful what you upload to any public-facing web directories, as folks can and will find them! This really is like posting on a public corkboard!

Let’s try something else! You may notice that I instructed you to include the filename after your domain name, and that’s because when we access our domain name or a sub-directory on that domain name without requesting a specific filename, the server tries to serve a default file, which on most web hosting configurations is index.html or index.php.

Let’s create a local copy of our bad web page and name it index.html. Then we can upload that to the same folder, and you should see your bad web page load as the home page for your new site. 

So, now that you’ve seen that this is easy enough anyone can do it, i promised I’d come back around to picking a hosting plan. I’m going to be talking about a few options offered by our sponsor NameHero, but you could apply this analysis to other hosts too as needed. 

Too many choices?

Picking a hosting plan

If you already have a domain name or are comfortable buying one elsewhere and pointing it to your web host, you may be able to just start off with the cheapest entry-level hosting plan here. You can always upgrade later if you want to host more sites? More sites?! What?! Why? I’ll come back to that in a second. 

It does streamline things if you get a plan with a domain name included, like this one, which also allows you to host more than one site. 

Having more than one site available to you can be handy for separating your interests into multiple sites, creating opportunities for your kids to learn to code, but be limited to publishing things through your account, or even just creating experimental test variants of your own website. As I said, you can always upgrade your plan later, but often the introductory pricing offered by web hosts to new customers is a better deal than they offer to existing customers looking to upgrade. If you think you might need an upgraded plan in less than a year, you might save money by signing up for the more expensive plan up front but taking the larger discount. 

Inventing a domain name

So, what about creating your domain name? You know yourself and what you want to share better than I do, so try to think of something that might look good on a printed card or flyer and is easy enough to speak aloud and spell.

If you’re planning any sort of communication about your site with others, I’d recommend considering something that you wouldn’t mind also using in an e-mail address.

For example, because I own JoeHills.net for my website, I can link that domain to an e-mail provider and create name@joehills.net email accounts for myself folks working for me. If you’re making a website for a project you’d like people to contact you about, keep how it would sound in an email address in mind while choosing a domain name. 

Outroduction

Thanks so much for joining me for my second lesson in this series!

In our next lesson, we’ll explore making the jump from simple web page to simple web site!

This lesson was sponsored by NameHero! If you need hosting or a domain name, please consider using my affiliate link at: 

https://namehero.com/joe