Lesson 24: Publishing a Site for Free

24.1 A Website Is a Folder

The club's home page, with its forecast and its plant-spacing calculator, works on your computer. Now it needs to be somewhere anyone can visit. Before it goes online, it's worth organizing it the way websites usually are: as a folder of files, rather than one page with everything inside it.

Until now, each page kept its CSS in a <style> tag and its JavaScript in a <script> tag. A real site usually puts them in files of their own:

club-site/
  index.html
  style.css
  script.js
  garden.jpg

The page then links to them:

<!doctype html>
<html>
  <head>
    <title>College Community Garden</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>College Community Garden</h1>
    <img src="garden.jpg" alt="Volunteers weeding the raised beds">
    <script src="script.js"></script>
  </body>
</html>

• <link rel="stylesheet" href="style.css"> in the head loads the CSS from style.css. The CSS file holds exactly what used to go between the <style> tags.
• <script src="script.js"></script> at the end of the body loads and runs the JavaScript from script.js. It still needs its closing tag, even though it's empty.

Separate files are easier to work with as a site grows. Several pages can share one stylesheet, so changing the club's colors means changing one file. You've already met one place that requires this: the extension in Lesson 23. Building a Browser Extension.

One file name is special. index.html is the page a web server sends when someone visits the site's address without naming a page, so every site's home page is called index.html.

24.1.1 Relative paths

The href and src values above are relative paths: they describe where a file is relative to the page. style.css means "in the same folder as this page." images/garden.jpg would mean "in the images folder, inside this page's folder," and ../style.css means "in the folder above this one."

Relative paths keep working when the whole folder moves, from your computer to a server, because the files stay in the same places relative to each other. You'll see what happens with the other kind shortly.

24.2 Where to Put It

A site made only of files, with no program running on the server, is called a static site, and several companies host static sites for free. The club's site is static: the forecast is fetched by the visitor's browser, not by the server. Here's the question, in a new chat with your learner profile from Lesson 23. Building a Browser Extension:

Netlify Drop is a good answer: no software, no Git, drag a folder, get an address. The other well-known free options are GitHub Pages, popular with programmers and tied to GitHub's way of storing code, and Cloudflare Pages. They all serve static sites well. An assistant will usually pick one; if you have a reason to prefer another, say so.

The club does have a reason. Later in the book, it will run code on Cloudflare's servers, with Cloudflare Workers, and keeping everything in one account will make that simpler. So, continuing the chat:

The approach is right: Cloudflare's direct upload takes a folder from your computer, with no Git. But check the steps against your screen. Cloudflare reorganizes its dashboard often, and the assistant hedged, sensibly, that the button "may also say" something else. At the time of writing, Cloudflare had been moving new projects from Pages toward Workers, which can also serve a folder of files, so you may be offered that path instead. Either works for a static site. What matters is the result: an address ending in .pages.dev or .workers.dev that shows your site.

A few things come with the free address automatically:

• HTTPS. The address starts with https://, and the connection is encrypted. You don't have to set anything up.
• Updates. To change the site, edit the files on your computer, then upload the folder again as a new deployment. The address stays the same.
• Your own domain, optionally. An address like collegecommunitygarden.org costs money, about $10 to $20 a year at the time of writing, and can be connected to the free hosting. It's not needed.

24.3 When It Works on Your Computer but Not Online

A very common first experience with publishing: the site is online, but it looks wrong. Here's one version of it:

That's exactly right. C:\Users\maya\Desktop\club\ exists on one computer. The fix is href="style.css" and src="garden.jpg". Some code editors insert absolute paths when you drag a file in, so it's worth checking.

Another difference catches people out. On Windows and Mac computers, file names usually aren't case-sensitive, so Garden.JPG and garden.jpg are the same file. On most web servers they're different files. A page that says src="garden.jpg" for a file named Garden.JPG works on your computer and breaks online. The simplest habit: use lowercase file names, with hyphens instead of spaces, like plant-spacing.html.

24.3.1 Finding what's missing

The developer tools will tell you exactly which files failed. Open them on the published site, and:

• Console lists errors, including files that couldn't be loaded.
• Network lists every file the page asked for, with its status. Reload the page with the Network panel open. A file shown in red, with the status 404, wasn't found. Its address shows you where the browser looked.

24.4 Everything You Publish Is Public

The assistant's note about who can see the site is worth repeating in full. Publishing a site sends every file in the folder to anyone who asks for it. That includes:

• Your code. Anyone can read your HTML, CSS and JavaScript in the developer tools. That's normal on the web, but it means a web page can never hold a secret, such as an API key or a webhook address.
• Every file in the folder, even ones no page links to. If a spreadsheet of members' contact details is sitting in the folder, it's online too, for anyone who guesses its name. Keep the site's folder for the site's files only.
• Anything in the pages. Before publishing, read the site as a stranger would. Members' names, phone numbers and schedules don't belong on a public page without their permission.

24.5 The Club's Site

Here's the club's site as three files, bringing together the home page from Lesson 19. How Web Pages Work and the forecast from Lesson 21. Asynchronous JavaScript. Save each one in the same folder, with these names, and open index.html in your browser. Then publish the folder.

index.html

<!doctype html>
<html>
  <head>
    <title>College Community Garden</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>College Community Garden</h1>
    <p>A student-run club where students and neighbors grow food together, share the harvest, and learn to garden sustainably. Everyone is welcome, and no experience is needed.</p>

    <h2>Upcoming Workdays</h2>
    <ul id="workdays"></ul>

    <h2>Rain in the Next Three Days</h2>
    <ul id="forecast">
      <li>Loading the forecast...</li>
    </ul>

    <script src="script.js"></script>
  </body>
</html>

style.css

body {
  font-family: Arial, sans-serif;
  background-color: #f4f9f4;
  margin: 20px;
  max-width: 700px;
}
h1 {
  color: #2e7d32;
}
ul {
  background-color: white;
  padding: 15px 30px;
  border: 1px solid #cde5cd;
}
.error {
  color: darkred;
}

script.js

const WORKDAYS = ["Saturday, May 1, 2027", "Saturday, May 15, 2027", "Saturday, May 29, 2027"]
const FORECAST_URL = "https://api.open-meteo.com/v1/forecast?latitude=40.25&longitude=-111.65&daily=precipitation_sum&timezone=auto&forecast_days=3"
const DAY_NAMES = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]

function showWorkdays() {
  const list = document.querySelector("#workdays")
  for (let i = 0; i < WORKDAYS.length; i++) {
    const item = document.createElement("li")
    item.textContent = WORKDAYS[i]
    list.appendChild(item)
  }
}

async function showForecast() {
  const list = document.querySelector("#forecast")
  try {
    const response = await fetch(FORECAST_URL)
    if (response.ok === false) {
      throw new Error(`the weather service replied with status ${response.status}`)
    }
    const data = await response.json()
    const dates = data.daily.time
    const rainAmounts = data.daily.precipitation_sum
    list.textContent = ""
    for (let i = 0; i < dates.length; i++) {
      // noon avoids the date shifting across time zones
      const date = new Date(`${dates[i]}T12:00`)
      const item = document.createElement("li")
      item.textContent = `${DAY_NAMES[date.getDay()]}: ${rainAmounts[i]} mm`
      list.appendChild(item)
    }
  } catch (error) {
    list.textContent = ""
    const item = document.createElement("li")
    item.className = "error"
    item.textContent = `The forecast isn't available right now (${error.message}).`
    list.appendChild(item)
  }
}

showWorkdays()
showForecast()

This version builds the workday list with createElement and textContent instead of innerHTML, so nothing in the list could ever be read as HTML. Once it's online, send the address to a friend and ask them to open it on their phone. That's the test that matters: it works on a computer that isn't yours.

24.6 Your Learner Profile

24.7 Summary

A website is a folder of files: index.html for the home page, with CSS and JavaScript in their own files, linked with <link rel="stylesheet"> and <script src>. Relative paths, like style.css, keep working when the folder moves to a server; absolute paths to your own computer break, and so do file names whose capitals don't match. Static hosting services such as Cloudflare Pages, Netlify and GitHub Pages publish a folder for free, with HTTPS included, and an assistant's steps for their dashboards should be checked against your screen. The Network panel shows which files didn't load. Everything in a published folder is public, code included, so a site can't hold secrets or private data. The club's website is now online. That's the end of Part III. Next, you'll take JavaScript into Microsoft Excel.