A simple, static blog — plain HTML files, one shared stylesheet, no build step.
.
├── index.html # Home page (list of posts)
├── about.html # About page
├── 404.html # Not-found page
├── posts/ # One HTML file per post
│ └── hello-world.html
├── css/style.css # All styling (light + dark)
├── js/theme.js # Dark mode toggle
├── assets/og/ # Per-page social-share cards (generated)
├── scripts/generate-og.mjs # Builds the social cards
├── CNAME # Your custom domain (for GitHub Pages)
└── .nojekyll # Tells GitHub Pages to serve files as-is
-
Copy
posts/hello-world.htmltoposts/your-post-name.html. -
Change the
<title>, the<h1>, the date, and the body text. -
Add a link to it near the top of the post list in
index.html:<li> <a href="/posts/your-post-name.html">Your title</a> <span class="post-meta">Month DD, YYYY</span> <p class="post-excerpt">One-line summary.</p> </li>
-
Generate the social-share card so the post has its own branded preview when shared on X, LinkedIn, etc. (uses the post's
og:titleas the headline andog:descriptionas the subhead):node scripts/generate-og.mjs
This regenerates
assets/og/<slug>.pngfor every page and points each page'sog:image/twitter:imageat its own card. Requiresrsvg-convert(install once withbrew install librsvg). -
Save, commit, and push. It's live in a minute.
python3 -m http.server 8000
# open http://localhost:8000-
Create a new repository on GitHub.
-
Push this folder:
git remote add origin https://github.com/<you>/<repo>.git git push -u origin main
-
In the repo: Settings → Pages → Build and deployment, set Source = Deploy from a branch, Branch =
main/ root, then Save. -
Put your domain in the
CNAMEfile (already scaffolded — replace the placeholder), and in Settings → Pages → Custom domain. -
At your domain registrar, point DNS at GitHub Pages:
- Apex domain (
example.com): fourArecords →185.199.108.153,185.199.109.153,185.199.110.153,185.199.111.153 - Subdomain (
blog.example.com): oneCNAMErecord →<you>.github.io
- Apex domain (
-
Wait for DNS, then enable Enforce HTTPS.