antcooper.com

A small static blog. Markdown files go in, a website comes out. Built with Eleventy, published to GitHub Pages by GitHub Actions on every push to main.

Writing a new post

Writing and publishing is designed to be frictionless — whether on a Mac or on an iPad in Working Copy:

1. Drop images into assets/images/

Place any photos or screenshots directly into assets/images/:

• Paths: Always reference images using root-relative paths like /assets/images/photo.png.
• Automatic optimization: You don't need to resize or convert anything manually. Eleventy automatically generates responsive WebP variants (400px, 800px, 1200px) at build time.
• Original size: Keep originals under ~2000px wide so the git repository stays lightweight.
• Downloadable files: PDFs, ZIPs, and other downloads go in assets/files/ (linked as /assets/files/document.pdf).

2. Create the markdown file in posts/

Add a new markdown file to posts/. The filename becomes the URL slug:

• posts/my-new-post.md publishes at /blog/my-new-post/.

3. Add the front matter

Every post starts with a YAML front matter block between --- lines:

---
title: "Printing straight into Evernote on macOS"
description: A quick tip to send a PDF straight to Evernote from the print dialog.
date: 2025-12-08
tags:
  - macOS
  - Evernote
image: /assets/images/banner.jpg
imageAlt: Print dialog with Evernote quick action selected
# featured: true
# featuredNote: Send PDFs to Evernote directly from the print dialog.
# redirectFrom:
#   - /2025/12/08/printing-straight-into-evernote-on.html
---

The post itself starts here, in normal markdown.

Field	Required	What it does
title	yes	Heading, page title, and the link on the home page. Wrap in quotes if it contains : or #.
date	yes	YYYY-MM-DD. Controls post ordering and archive grouping.
description	no	Intro lead paragraph under the title, home page summary, search results, and link previews.
tags	no	List of tags. Creates /tags/<tag>/ pages automatically.
image	no	Banner/hero image shown at the top of the post (e.g. /assets/images/photo.jpg). Also sets Open Graph & Twitter card previews.
imageAlt	no	Alt text describing the banner image for accessibility.
redirectFrom	no	List of legacy URLs to forward here (e.g. old micro.blog addresses).
featured	no	Set to true to pin this post as the yellow sticky note on the home page. If multiple posts are marked, the newest wins.
featuredNote	no	Short line shown on that note. Falls back to description if omitted.

Careful with # and : — if a title or description contains either, wrap the whole value in double quotes, or YAML will misread it: title: "Mapping § to # on a British keyboard"

4. Linking images in your article

Always use root-relative paths starting with /assets/images/:

• Hero / Banner Image (Top of post): Set image and imageAlt in the front matter (see table above). It renders above the article body and automatically populates social card previews.
• Inline Body Images & Captions: Reference the path in standard markdown, with an optional italic line directly beneath for a styled, centered caption:

  ![Description of the picture for screen readers](/assets/images/my-screenshot.png)
  *An optional italic line directly underneath becomes the caption.*

5. Preview & Publish

1. Preview locally (optional):

   npm start

   Open http://localhost:8080.
2. Publish: Commit and push to main:

   git add posts/ assets/images/
   git commit -m "Add new post: My Post Title"
   git push origin main

   GitHub Actions will automatically run the build and publish the site to GitHub Pages in about a minute.

Editing the site itself

I want to change...	Look in
Colours, fonts, spacing	assets/css/style.css — the tokens at the very top cover most of it
Site title, description, nav button	_data/site.js
Page structure	_layouts/base.njk, post.njk, page.njk
The home page listing	index.njk
How many posts per page	size: 3 in index.njk's front matter
About text	pages/about.md
Build behaviour	eleventy.config.js

Running it locally (optional — Mac only)

npm install
npm start

Then open http://localhost:8080. It reloads as you save.

To do a one-off production build into _site/:

npm run build

How publishing works

.github/workflows/deploy.yml runs on every push to main: it installs dependencies, runs the Eleventy build, and uploads _site/ to GitHub Pages. If a build ever fails, the previous version of the site stays up and the Actions tab will show what went wrong.

Going live on antcooper.com

The site currently publishes to https://antcooper.github.io/. antcooper.com still points at micro.blog, and nothing here affects it until you change DNS.

The custom domain is deliberately not set yet: as soon as GitHub Pages knows about it, the github.io address starts redirecting there — which would leave you unable to preview. So the switch is one step, done when you're ready:

1. At your DNS provider, point antcooper.com at GitHub Pages. Four A records on the apex:

   185.199.108.153
   185.199.109.153
   185.199.110.153
   185.199.111.153
   

   And a CNAME for www pointing to antcooper.github.io.

2. Add a file called CNAME in the root of this repository containing exactly:

   antcooper.com
   

   Commit and push it. The build already knows to copy that file through, and GitHub Pages picks up the domain from it.

3. In the repo's Settings → Pages, tick Enforce HTTPS once the certificate has been issued (usually within an hour).

Until step 2 happens, antcooper.github.io serves the site normally.

URLs and redirects

Posts live at /blog/<filename>/. The old micro.blog addresses (/2025/12/08/printing-straight-into-evernote-on.html) still work: each post lists them under redirectFrom, and the build generates a small forwarding page for each one. Feeds stayed where they were, at /feed.xml and /feed.json, so existing subscribers don't notice the move.