Portfolio Website — Linda Adel

Oil painting artist portfolio. Astro 6 SSG with Keystatic CMS.

Stack

Astro 6.4.8 — static output (output: "static")
Keystatic — local git-backed CMS, loaded only in dev via NODE_ENV=development
React — only for Keystatic admin UI (@astrojs/react)
TypeScript, plain CSS (no Tailwind)
Pastel pink-purple palette (see global.css vars)

Key Files

File	Purpose
`astro.config.mjs`	Astro config — react + conditional Keystatic integration
`keystatic.config.ts`	CMS schema — paintings collection + about singleton
`src/content.config.ts`	Custom loaders for both collections (reads `.yaml` directly)
`src/site-config.ts`	All site strings: name, email, tagline, location, etc.
`src/styles/global.css`	All styles — pastel palette, responsive breakpoints

Content Layer — Pure YAML, No Frontmatter

Both collections use pure .yaml files (no --- frontmatter). Keystatic's format: "yaml" (the default) expects the entire file to be valid YAML. Astro uses custom loaders that parse YAML directly.

Paintings (src/content/paintings/*.yaml): title, image, year, medium, dimensions, featured, description — all top-level YAML keys. Custom yamlGlobLoader discovers .yaml files, parses each, stores by filename stem as entry ID.

About (src/content/about/index.yaml): photo, bio as top-level YAML keys. Custom about-loader reads the single file. Bio paragraphs split on \n\n.

Why Custom Loaders

Keystatic's format: "md" passes entire files to js-yaml, which throws on --- frontmatter delimiters ("expected a single document"). Using format: "yaml" avoids this, but Astro's built-in loaders don't support .yaml files. Custom loaders bridge the gap.

Shared yamlGlobLoader(base, pattern, ctx) function in src/content.config.ts handles discovery, parsing, and hot reload for any YAML-based collection.

Dev Workflow

npm run dev       # NODE_ENV=development astro dev
npm run build     # static build (Keystatic excluded)
npm run preview   # preview static build

Keystatic admin at /keystatic — only available in dev mode.

Important

Restart dev server after changing keystatic.config.ts (Vite caches it). If things break, delete node_modules/.vite/ and .astro/.
All content files are pure YAML — no --- frontmatter. Don't add it.
Don't use Keystatic fields.document() — Astro's content layer doesn't support .mdoc extension.
All artist-facing strings in src/site-config.ts — edit there, not in templates.
Dev command: NODE_ENV=development astro dev — required for Keystatic integration to load.

2.7 KiB Raw Blame History