Hosting Static Pages - Publish Your Pyramid

You have built a pyramid - but nobody will see it if it stays hidden on your disk! A file opened from your disk has an address starting with file://, which works only on your computer, so a link sent to a friend will show them nothing. Hosting is the place where your page will be available to the entire world via the internet. For static HTML/CSS/JS pages, free hosting services exist.

What Is a Static Page?

A static page is a page made up of ready-made HTML, CSS, and JavaScript files. It does not require a backend server or a database. The browser downloads the files and displays them directly. The server does not compute anything - it hands everyone the same files, like a scribe handing out identical copies of a scroll, which is why such hosting is simple and often free. You will meet pages with logins or databases in the next worlds.

Prepare Your Files Before Publishing

Before you send your files out into the world, check three things. First: the <head> of every page must contain the viewport meta tag, without which a phone will show a shrunken desktop version:

1<meta name="viewport" content="width=device-width, initial-scale=1.0">

width=device-width sets the page width to the width of the device screen, and initial-scale=1.0 turns off the initial zoom-out. The second thing is relative paths, for example images/pyramid.jpg instead of /images/pyramid.jpg: on GitHub Pages the project lives in a subfolder named after the repository, so a path starting with a slash would point to the wrong place. Third: servers are case-sensitive, so Pyramid.jpg and pyramid.jpg are two different files.

GitHub Pages

GitHub Pages is free hosting from GitHub, available for public repositories on every account. An ideal solution to start with:

How to Publish a Page on GitHub Pages:

1. Create a repository on GitHub (e.g., my-pyramid)
2. Upload files HTML, CSS, JS to the repository
3. Go to Settings -> Pages
4. Select a branch - usually main
5. Click Save
6. Your page will be available at: https://your-username.github.io/my-pyramid/

The first publication may take a few minutes, and every later change pushed to the repository updates the page automatically. If you name the repository exactly your-username.github.io, the page will be available at the bare address https://your-username.github.io/.

File Structure for GitHub Pages:

The most important rule concerns the name of the home page. When an address points to a folder rather than a specific file, the server looks for an index.html file in it and displays it as the default page:

1<!-- The file must be named index.html -->
2my-pyramid/
3  index.html       <!-- Main page -->
4  style.css        <!-- Styles -->
5  script.js        <!-- JavaScript -->
6  images/          <!-- Images folder -->
7    pyramid.jpg
8    sphinx.png

That is why an address ending in /my-pyramid/ shows index.html, and you open other subpages by adding a file name, for example about.html. Without an index.html file, the main address will not display your page.

Netlify

Netlify is a modern hosting platform with a free plan. It offers:

• Drag & drop deployment - drag and drop a folder with files
• Automatic HTTPS - free SSL certificate
• Custom domain - you can connect your own domain
• Continuous deployment - automatic deploy from GitHub

Deploy on Netlify:

1. Go to app.netlify.com
2. Drag the folder with files onto the page
3. Done! The page is available at https://random-name.netlify.app

You can change the random subdomain name in the project settings. Netlify also handles forms: after you add a special attribute to a <form>, submissions land in the dashboard, with no server of your own to write.

Vercel

Vercel is a platform from the creators of Next.js, but it works great for static pages too:

• Import from GitHub - connect a repository
• Automatic builds - every push = new deploy
• Preview deploys - preview changes before publishing
• Free HTTPS - automatic certificate

For branches and pull requests, Vercel creates separate preview addresses, so you can show a change to your mentor before it reaches the main page. The free Hobby plan is intended for personal, non-commercial projects.

Platform Comparison

For your first page I recommend GitHub Pages: along the way you will practice Git, which you will need in every future world. Choose Netlify when you want to publish a folder in a minute without Git, and Vercel when you start building applications in Next.js.

Custom Domain

Every platform lets you connect a custom domain:

1. Buy a domain (e.g., on Namecheap, GoDaddy, Cloudflare)
2. Configure DNS - set CNAME or A records
3. Add the domain in the hosting platform settings

A CNAME record points a subdomain, such as www, to the platform's address, and A records point to the IP addresses of its servers - the exact values are given in the documentation. DNS changes can take up to 24 hours to spread, and the platform issues the HTTPS certificate on its own. In the final project you will publish the museum page this way.

Practice

In the editor below you will find a sample file structure and a comparison of the platforms. Use it to plan the folders of your own project before you publish it:

1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Hosting static websites</title>
7    <link rel="stylesheet" href="style.css">
8</head>
9<body>
10    <h1>Hosting Static Websites</h1>
11
12    <section>
13        <h2>File structure for publishing</h2>
14        <div class="tree">
15            <pre>
16my-site/
17  index.html       &lt;-- Home page
18  about.html       &lt;-- Subpage
19  css/
20    style.css      &lt;-- Stylesheet
21  js/
22    script.js      &lt;-- Script
23  images/
24    logo.svg       &lt;-- Logo
25    hero.jpg       &lt;-- Main photo
26    favicon.ico    &lt;-- Tab icon
27            </pre>
28        </div>
29    </section>
30
31    <section>
32        <h2>Hosting platforms</h2>
33
34        <article class="platform">
35            <h3>GitHub Pages</h3>
36            <p>Free hosting from GitHub.
37               Address: <code>login.github.io/repo</code></p>
38            <ul>
39                <li>Git integration</li>
40                <li>Automatic HTTPS</li>
41                <li>Custom domain</li>
42            </ul>
43        </article>
44
45        <article class="platform">
46            <h3>Netlify</h3>
47            <p>A modern platform with drag &amp; drop deploys.
48               Address: <code>name.netlify.app</code></p>
49            <ul>
50                <li>Drag &amp; drop deploy</li>
51                <li>Automatic HTTPS</li>
52                <li>Contact forms</li>
53            </ul>
54        </article>
55
56        <article class="platform">
57            <h3>Vercel</h3>
58            <p>A platform from the creators of Next.js.
59               Address: <code>name.vercel.app</code></p>
60            <ul>
61                <li>Import from GitHub</li>
62                <li>Preview deploys</li>
63                <li>Automatic HTTPS</li>
64            </ul>
65        </article>
66    </section>
67</body>
68</html>

Remember: a pyramid buried in the sand will not attract a single pilgrim - only hosting opens its gates to the whole world.