jake/hello-world-web
Watch
1
0
Fork
You've already forked hello-world-web
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
No description
13 commits 1 branch 0 tags 132 KiB
  • HTML 100%
Find a file
Exact
Repository files (latest commit first)
Filename Latest commit message Latest commit date
Jacob Schatzberg fc635f00ed Updated README
2026-09-22 15:59:11 -04:00
images Updated image 2026-09-22 15:31:24 -04:00
index.html Added URL preview for messaging platforms 2026-09-22 15:51:10 -04:00
README.md Updated README 2026-09-22 15:59:11 -04:00

README.md

hello-world-web

A Hello World page for MI 249, built and deployed entirely on self-hosted infrastructure instead of GitHub and Netlify.

Diagram of the self-hosted deployment pipeline

About

The page is plain HTML5 with no CSS, as the assignment requires. It shows a diagram of how the site gets from my editor to a visitor's browser, and it uses <head> metadata for search engines, link previews, and the browser tab icon.

How it's deployed

My apartment's internet doesn't allow port forwarding, so the site can't be served directly from home. Instead:

  1. Forgejo (self-hosted Git server) stores the repository. I push to it from my laptop.
  2. A webhook from Forgejo tells Coolify (self-hosted deployment platform) that there's a new commit.
  3. Coolify pulls the code, builds a container, and serves it behind its Traefik reverse proxy.
  4. Cloudflare hosts DNS for the domain and points it at a public AWS server.
  5. A NetBird reverse proxy on the AWS server receives HTTPS requests and sends them through a WireGuard tunnel back to my apartment, so no ports are open at home.
flowchart LR
    subgraph Home["My apartment (no port forwarding)"]
        Laptop -->|git push| Forgejo
        Forgejo -->|webhook| Coolify
        Coolify -->|builds container| Traefik
    end
    subgraph AWS["AWS (public IP)"]
        NetBird["NetBird reverse proxy"]
    end
    Browser -->|DNS lookup| Cloudflare
    Browser <-->|HTTPS| NetBird
    NetBird <-->|WireGuard tunnel| Traefik

Metadata in <head>

Tag Purpose
charset Uses UTF-8 so any character or emoji displays correctly
viewport Renders the page at the device's real width on phones
description The summary shown in search results
author Credits the page's author
robots Lets search engines index the page and follow its links
canonical Marks the official URL of the page
icon An emoji favicon for the browser tab, embedded as an SVG data URI
theme-color Tints the browser's address bar on mobile
og:* Open Graph tags that control the preview card on Discord, iMessage, Slack, etc.

Project structure

.
├── index.html          # The page
├── images/
│   ├── pipeline.svg    # Diagram source (editable)
│   └── pipeline.png    # Rendered diagram used on the page and in link previews
└── README.md

Running locally

Open index.html in a browser, or serve the folder:

python -m http.server

Then visit http://localhost:8000.

To regenerate the diagram after editing the SVG:

rsvg-convert -w 900 -h 420 images/pipeline.svg -o images/pipeline.png

AI usage disclaimer

I used Claude (Anthropic's AI assistant, through Claude Code) while working on this lab. It:

  • Suggested ways to meet the "exceptional work" criteria, adapted to my Forgejo and Coolify setup
  • Created the deployment pipeline diagram (images/pipeline.svg and images/pipeline.png) from my description of the setup
  • Drafted this README

I designed and set up the infrastructure myself (Forgejo, Coolify, NetBird, AWS and Cloudflare), chose what went on the page, and reviewed and edited everything the AI produced.