pagehaus

Learn HTML · Lesson 8 of 8 · about 15 minutes

Put it online

Your site works on your computer. In this last lesson it goes online, at an address you can send to anyone, and you'll learn how to keep it up to date and, if you like, give it a domain name of your own.

Before you upload: a last check

Most problems that appear once a site is online come from a few mistakes you already know about. Go through your pages once more:

If you installed pagehaus in lesson 6, it does this for you. In your my-site folder, run pagehaus check: it follows every link, includes and all, and lists anything broken, including names that only match on your own computer.

Something still not right? Compare your files with Sam's finished site, every file of it as it is at the end of this lesson.

A page for addresses that don't exist

Sooner or later someone will follow an old link or mistype an address. A web server then answers "404: not found", and shows a plain error page. Make your own, called 404.html, in the top of your site, and Pagehaus shows it instead, with your menu, so the visitor can find their way:

<!--#set var="title" value="Page not found" -->
<!--#include virtual="/includes/head.html" -->

  <h1>Page not found</h1>
  <p>Sorry, there's nothing at this address. It may have moved,
  or there may be a typo in the link.</p>
  <p><a href="/index.html">Go to the home page</a> or
  <a href="/recipes.html">see all the recipes</a>.</p>

<!--#include virtual="/includes/footer.html" -->

This one uses the head include from lesson 6; a full page with the two include lines works just as well. One thing matters: every address in a 404 page must start with /, including the stylesheet's. The page is shown at whatever address the visitor asked for, such as /recipes/old/cake.html, so relative addresses would point at the wrong folder.

Tell search engines what your site is

Search results show your page's <title> as the link, and a line or two about the page under it. You can write that line yourself, with one more <meta> in the <head>:

<title>Sam Rivera</title>
<meta name="description" content="Weekend baker in Toronto: sourdough, rye and birthday cakes, with the recipes I actually use.">

Describe each page in a sentence that would make you click: around 150 characters, saying what's there. Without it, search engines pick some text from the page, which is often the menu.

Get a free site

A website is online when its files are on a web server: a computer that's always on and connected, answering browsers that ask for your pages. A host runs that for you. Pagehaus is one, made for exactly the kind of site you've built, and everything in this course works there as written: includes, the contact form, the 404 page.

  1. Sign up and pick a name for your site. It becomes your address: https://yourname.pagehaus.site/. The Free plan is enough for this site and much more, and needs no card.
  2. Confirm your email address from the message we send you. Your contact form needs it.

Upload your files

  1. Open your site's Files tab.
  2. Open your my-site folder on your computer, select everything in it, and drag it all onto the page. Drag what's inside the folder, not the folder itself, so that index.html ends up at the top of your site. (A .zip of the folder works too: Pagehaus unpacks it.)
  3. Open your address. That's your site, online, over HTTPS, for anyone in the world.

Click through every page, send yourself a message with the contact form, and try an address that doesn't exist to see your 404 page. Then open it on your phone: lesson 5's layout should fit.

Keeping it up to date

The copy on your computer is your master copy: make changes there, check them, then upload the files you changed. A file with the same name replaces the old one, and the address stays the same.

Your own domain name

An address like samrivera.com is easier to remember and say, and stays yours if you ever change host. It takes three steps:

  1. Buy the domain from a domain registrar (Namecheap, Porkbun, Cloudflare and many others). A .com costs around 10 to 20 US dollars a year. Watch for a cheap first year with an expensive renewal.
  2. Add it to your site on the Domains tab. Custom domains are on the paid plans (see pricing).
  3. Point the domain at Pagehaus by adding the few DNS records the Domains tab shows you, at your registrar. When they're in place, the tab says Live, and HTTPS is set up for you. Custom domains has the details.

An email address at your domain, like hello@samrivera.com, is separate from the website: see email at your own domain.

Being found

Search engines find new sites by following links, so it can take a few days to a few weeks before your site shows up. Two things help: a link to it from somewhere that's already known (your social media profiles, a friend's site), and Google Search Console, where you can tell Google your site exists and see how people find it.

Check your work

Where to go from here

That's the course: you've built a website from an empty file, and it's online. Some places to go next: