Analytical Research and Sources Archive (AR&SA)
Method & Working Tools/AR&SA Website Build Plan

AR&SA Website Build Plan

4 min read

Purpose: publish the AR&SA Obsidian archive as a public website so people can read it in the browser instead of downloading Obsidian and a zip. Built entirely on tools you own, with no monthly cost.

Stack

  • Quartz 5: turns the Obsidian markdown into a website. Keeps wikilinks, graph view, backlinks, and full text search.
  • Cloudflare Pages: free hosting, automatic rebuilds, free SSL.
  • Claude Code: runs the technical steps on your machine so you talk instead of memorizing commands.
  • GitHub: stores the site source and triggers a rebuild on every update.

You own every file. Zero subscription.

Pages and how hard each is

  • Home: custom designed landing page. The main design effort.
  • Archive: the 300 plus notes with graph, search, backlinks. Quartz gives this for free. Easiest part.
  • Q and A: a static FAQ page. Easy, you write the questions.
  • Contact the author: easy. Either your email shown cleanly or a free form service like Formspree.
  • Copyright footer: one footer component applied to every page automatically.

Workflow, in order

  • Phase 0: setup

  • Install the working environment on your machine: Node.js v22, Git, Claude Code. Make GitHub and Cloudflare accounts. One time, boring.

  • Phase 1: Quartz running locally

  • Clone Quartz, install dependencies, run the dev server, confirm a blank site loads on localhost.

  • Phase 2: pour in the archive

  • Drop the markdown into the Quartz content folder. Wikilinks, graph, and backlinks work immediately. The only real labor is converting Charts plugin charts and Dataview queries to static, since those need Obsidian to render. Done case by case.

  • Phase 3: the look

  • Make it feel like a polished modern site instead of a default garden. Custom CSS theme, designed home page, GCT styling, footer. Most of the total time lives here.

  • Phase 4: the extra pages

  • Build Home, Q and A, About, Contact on top of the Phase 3 design system. About half a day once the design exists.

  • Phase 5: ship it

  • Push to a private GitHub repo, connect Cloudflare Pages. It builds and hosts automatically with free SSL. Keep it private behind a password while finishing, then flip public when ready. Custom domain whenever you want.

Update and sync workflow

The site is built from GitHub, not from Google Drive. Editing a note in Obsidian does nothing to the site on its own, even after it syncs to Drive.

To publish an update, the note has to reach GitHub, which triggers a Cloudflare rebuild in about a minute. Two ways:

  1. Manual: push the changed notes to the repo when ready.
  2. Button: a plugin like Quartz Syncer or Obsidian Git pushes selected notes to GitHub with one click.

This is a feature, not a flaw. The GitHub step is your publish gate, so drafts stay private and you choose what goes live and when. Keep Google Drive as your personal backup if you want. GitHub is the road to the website.

Timeline, honest

  • Working private site, archive browsable: a focused weekend.
  • Polished public ready version that looks modern: roughly one to two weeks part time, slower during exams.

Content import is fast. Design polish is what eats the hours.

Beautifying and external AI

Three real options:

  1. Custom CSS and components written directly, matched to a reference site you pick.
  2. Mock the look in Claude Design first, then implement it in Quartz.
  3. Heads up on tools like v0: they output React components, but Quartz uses its own component system, so they need translating, not pasting.

Cleanest path: pick a reference site you like plus custom CSS, optionally Claude Design for the mockup. The archive pages already look clean by default, so design effort focuses on Home, About, Q and A, Contact.

  • Obsidian has no claim on your content. Your notes are local plain text files you own. You can publish and license them freely. Using Obsidian gives them no more ownership than using Word would.
  • Your all rights reserved license protects your original analysis, not the source material you quote. Keep quotes tight and attributed so public republishing stays inside fair use. This is not legal advice.

First step, what to install

  1. Node.js v22 LTS from nodejs.org. This is the foundation everything else needs.
  2. Verify it installed: open a terminal and run node -v and npm -v. You want Node v22 or higher.
  3. Next session: install Git and Claude Code, then start Phase 1.

Open decisions for next session

  • One shared password for the private stage, or proper email logins per person.
  • Free pages.dev subdomain for now, or a custom domain.
  • A reference site or two whose look you want, so Phase 3 has a target.
0 backlinks0 words0 characters

Graph View

Backlinks

  • No backlinks found