Introduction

Every blog needs a first post, and what better way to break in a new site than to document how it was built? This post walks through the architecture and tooling behind Screeching Into The Void — a blog built for long-form written content like book reviews and essays, where academic-style citations are a first-class feature.

The stack is straightforward: Quarto for authoring and static site generation,¹ GitHub Actions for continuous integration,² and CloudFlare Pages for hosting.³

Why Quarto?

Quarto is an open-source scientific and technical publishing system that turns markdown into polished HTML, PDF, and other formats.⁴ For a blog focused on long-form writing, Quarto offers several advantages over other static site generators:

1. Native citation support. Quarto uses Pandoc’s citation engine under the hood, which means you can write [@AuthorKey2024] in your markdown and get properly formatted references in any citation style.⁵ This blog uses the Chicago Notes-Bibliography style, which renders citations as footnotes with a full bibliography at the end — a natural fit for essays and media criticism.

2. Bootswatch theme integration. Quarto ships with 25 Bootswatch themes⁶ and supports light/dark theme pairing out of the box.⁷ This site uses the flatly and darkly pair, which are designed to work together with matching typography and spacing.

3. Markdown-first workflow. Posts are plain .qmd files (Quarto-flavored markdown) with YAML front matter. No JavaScript framework, no build toolchain beyond Quarto itself.

Architecture

The deployment pipeline follows a pattern that Quarto’s CI documentation describes as “Local Execution with CI Rendering”⁸ — though in this case there’s no computational code to execute locally, since all posts are pure prose.

┌─────────────┐     ┌───────────────┐     ┌──────────────┐
│ Write .qmd  │────▶│ GitHub Actions│────▶│ CloudFlare   │
│ + refs.bib  │     │ quarto render │     │ Pages        │
│ git push    │     │ pages-action  │     │ serves _site │
└─────────────┘     └───────────────┘     └──────────────┘

steps:
  - uses: actions/checkout@v4
  - uses: quarto-dev/quarto-actions/setup@v2
  - run: quarto render
  - uses: cloudflare/pages-action@v1
    with:
      apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
      accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
      projectName: screechingintothevoid
      directory: _site

Site Structure

The blog uses a date-organized directory structure for posts:

posts/
└── 2026/
    ├── 001-hello-world/
    │   ├── index.qmd
    │   └── refs.bib
    └── 002-next-post/
        ├── index.qmd
        └── refs.bib

Year folders provide top-level grouping, and three-digit zero-padded sequence numbers give filesystem ordering within each year. This is a deliberate trade-off: Quarto’s URLs are tied directly to the filesystem path,¹³ so the directory structure is the URL structure. The resulting URLs look like /posts/2026/001-hello-world/.

The home page uses Quarto’s listing feature¹⁴ with a recursive glob pattern to discover all posts regardless of nesting depth:

listing:
  contents: "posts/**/index.qmd"
  sort: "date desc"
  type: default
  categories: true

Navigation is kept minimal — just a top navbar¹⁵ with the site title, an About page link, search, and the automatic light/dark theme toggle. No sidebars, no complex hierarchy. It’s a blog, not a documentation site.

Citations and the Chicago Notes-Bibliography Style

Each post gets its own refs.bib file containing BibTeX entries for that post’s references. A shared posts/_metadata.yml file sets the citation style globally using the Chicago Notes-Bibliography CSL file,¹⁶ so individual posts don’t need to repeat the configuration.

The Chicago Notes-Bibliography style was chosen because its footnote-based format is the standard for humanities writing — essays, literary criticism, and media analysis. Citations appear as numbered footnotes that expand into full references in a bibliography at the end, keeping the prose clean while providing rich source detail.¹⁷

Post Scaffolding

New posts are created with a single command using mise,¹⁸ a polyglot task runner:

mise run new-post "My Post Title"

This runs a bash script that auto-detects the current year, finds the next sequence number, slugifies the title, and creates the directory with a boilerplate index.qmd and empty refs.bib. Posts are created as drafts by default — set draft: false in the front matter when ready to publish.

How This Blog Was Actually Built: Spec-Driven Development with OpenSpec

The entire setup described in this post — every config file, workflow, and script — was implemented by an AI coding assistant (GitHub Copilot)¹⁹ following a structured specification process using OpenSpec.²⁰

proposal.md → design.md + specs/**/*.md → tasks.md → implementation

What’s Next

With the infrastructure in place, the focus shifts to what matters: writing. Future posts will cover book reviews, essays, and other long-form explorations — all written by a human, with citations.