Posts and Pages

Goal for this step

Turn Harbor Notes from one file into a small site. You will add an About page, create a first post inside a posts/ folder, and update navigation so every page can reach the others.

After this part, a visitor can land on the home page, open a post, read About, and get back home without using the browser’s Back button. That is the heart of a multi-page website.

What you should already know

You need the Part 1 layout, or the matching snapshot. You should recognize how an anchor tag’s href points at another address.

Folders will matter now. If that idea is new, think of your site like a binder: the home page and About page live in the front section, and posts live in their own tabbed section.

Concepts in plain language

A relative link points to another file using a path from the current file’s location. From the site root, about.html means “the About file beside me.” From inside posts/, you need ../about.html, which means “go up one folder, then open About.”

Grouping posts under posts/ keeps the root tidy as you add more articles. Home can stay a list of links and summaries, while each post gets its own page with a full title, date, and body.

Reuse the same header and footer pattern on every page. Static HTML does not share templates automatically, so you copy the shell carefully. Matching navigation on each page is what makes the site feel like one product.

Add About, a first post, and a home list

Create about.html with the same header, nav, and footer pattern. In main, write a short introduction to Harbor Notes—who the site is for and what kinds of notes you plan to publish.

Create the folder posts/ and add hello-world.html. Give the post a clear h1, a publication date with time datetime, and a few paragraphs of original content.

On the home page, replace the placeholder paragraph with a post list. Each item can include the title link, the date, and one summary sentence. Update every nav so About points at the real file, and so post pages can reach Home and About with correct relative paths.

<ul class="post-list">
  <li>
    <a href="posts/hello-world.html">Hello, Harbor Notes</a>
    <time datetime="2026-03-01">March 1, 2026</time>
    <p>Why a tiny static blog is a great first publishing project.</p>
  </li>
</ul>

<!-- inside posts/hello-world.html -->
<a href="../index.html">Home</a>
<a href="../about.html">About</a>

Run the snapshot and verify

Serve the Part 2 folder and click through the whole loop: Home → post → Home, and Home → About → Home. Also open the post first and use the nav links from there.

Every link should land on a real page with no 404. If a link fails, look at the current file’s folder and recount how many ../ steps you need. Relative paths are the usual culprit.

git clone https://github.com/michaeldunga1/fcc-static-blog.git
cd fcc-static-blog/02-Posts-and-Pages
python3 -m http.server 8000
# Then visit http://localhost:8000

Common mistakes

Writing href="index.html" from inside posts/ looks for a file that does not exist in that folder. From a post, home is ../index.html.

Creating posts/hello-world.html but linking to hello-world.html from the home page skips the folder and breaks the list.

Changing the header on only one page leaves visitors with inconsistent menus. When you edit navigation, update every HTML file that copies the shell.

Checklist and practice tip

Practice tip: draw a tiny map of your files on paper—root files on one line, posts underneath—and draw arrows for each link. If an arrow crosses a folder boundary, the path usually needs ../.

• about.html exists and is linked from nav
• posts/hello-world.html opens from the home list
• Post pages can navigate back home and to About
• Each page reuses the same header/footer pattern
• No navigation link returns a missing-page error