Deploy on GitHub Pages

Goal for this step

Publish Harbor Notes on the public web. The Part 4 snapshot already contains the polished static site. Your job is to put those files in a GitHub repository and turn on GitHub Pages.

When you finish, anyone with the link can open your home page, About page, and first post without installing anything. That moment—your files becoming a real URL—is the payoff for the whole project.

What you should already know

You need a GitHub account and a finished set of static files from Part 3 or the Part 4 snapshot. A little Git familiarity helps, but the commands below are enough to follow along.

You should understand that GitHub Pages hosts static files. It will not run a custom Python or Node server for this project, and you do not need one.

Concepts in plain language

Deployment means copying your project to a place that serves it to the internet. For Harbor Notes, that place is a GitHub repository with Pages enabled.

Project sites usually live at a URL shaped like https://YOUR_USERNAME.github.io/REPO_NAME/. Because the site is not always at the domain root, relative links and relative CSS paths are safer than absolute paths that assume / is your site.

The repository root should contain index.html directly. If you accidentally publish a nested folder as the site root, visitors may see a directory listing or broken links. Copy the contents of the Part 4 folder, not the folder name itself, into the new repository.

Put files at the repository root, then push

Create a new empty repository on GitHub, then copy the Part 4 site files so index.html, about.html, styles.css, and posts/ sit at the top level.

Initialize Git if needed, commit, and push to main. Use your own username and repository name in the remote URL. After the push succeeds, open repository Settings → Pages, choose Deploy from a branch, and select main with the / (root) folder.

git init
git add .
git commit -m "Publish Harbor Notes static blog"
git branch -M main
git remote add origin https://github.com/YOUR_USERNAME/harbor-notes.git
git push -u origin main

Confirm the live URL and what you should see

Wait a minute for Pages to build, then visit https://YOUR_USERNAME.github.io/REPO_NAME/. You should see Harbor Notes with working navigation and styled text.

Click About and the first post. If CSS is missing on the live site but worked locally, look for absolute paths or a wrong Pages folder setting. Relative asset paths, as used in this project, usually survive deployment cleanly.

You can still serve the Part 4 snapshot locally while you prepare the repository. Local preview remains useful even after the site is live.

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

Common mistakes

Pushing the outer course folder so the live site root contains 04-Deploy-GitHub-Pages/index.html instead of index.html. Always publish the contents.

Choosing the wrong Pages branch or folder in Settings leaves the site unpublished or serves an old tree. Confirm main and / (root).

Editing locally but forgetting to commit and push means the public URL will not change. Pages only sees what is in the repository.

Checklist and practice tip

Practice tip: make a tiny text edit on the home page, commit, push, and refresh the live URL after the Pages build finishes. Watching one change go live teaches the edit → publish loop better than any paragraph can.

• Repository root contains index.html, about.html, styles.css, and posts/
• Pages source is set to the main branch root
• Home, About, and the first post load on the live URL
• Stylesheet loads on every live page
• A later edit + push updates the published site after rebuild