Deploy Guide

Prerequisites

You need three things: a GitHub account (free), a Cloudflare account (free), and Node.js 18+ on your machine. No paid services required.

Step 1: Clone and Install

git clone https://github.com/danrichardson/loomwork.git my-site
cd my-site
git remote remove origin
git remote add origin https://github.com/YOUR-USER/YOUR-SITE.git
git remote add loomwork https://github.com/danrichardson/loomwork.git
npm install
npm run dev

You should see the site at http://localhost:4321.

Step 2: Clean Up Loomwork Files

Delete these — they’re loomwork repo files, not part of the framework:

rm MOBILE_README.md   # loomwork mobile editor docs
rm Notes.md           # author's dev notes
rm PROJECT.md         # loomwork project spec

Remove the placeholder content:

rm src/content/pages/about_Loomwork.mdx
rm src/content/pages/guide.mdx
rm src/content/pages/mobile-app.mdx
rm public/images/1771364152056-image.jpg

Create your own project README:

echo "# My Site" > README.md

Step 3: Rebrand

Edit these two files:

src/site.config.ts — Change the name, tagline, description, nav items, footer, and email.

src/styles/site.css — Override CSS variables for your colors and fonts:

:root {
  --color-accent: #2d6a4f;
  --font-heading: "Bitter", Georgia, serif;
}

Step 4: Replace Content

Delete the example pages in src/content/pages/ and create your own .mdx files. Each needs YAML frontmatter:

---
title: "Your Page Title"
description: "A short description for SEO."
section: "docs"
template: "default"
---

The file path becomes the URL. src/content/pages/docs/intro.mdx → /docs/intro.

Step 5: Deploy to Cloudflare

1. Create a new GitHub repo and push your site
2. Cloudflare Dashboard → Workers & Pages → Create → Connect to Git
3. Select your repo. Build settings:
   • Build command: npm run build
   • Build output directory: dist
4. Deploy.

Step 6: The Daily Workflow

From now on, your workflow is:

# Edit content in your editor
git add . && git commit -m "new post" && git push

Cloudflare auto-builds and deploys in ~30 seconds.

Staying Updated

When Loomwork gets framework updates (layouts, components, build fixes), pull them into your site:

git fetch loomwork
git merge loomwork/main

Framework files merge cleanly because you haven’t edited them. Your site-specific files (site.config.ts, site.css, content pages, wrangler.toml, index.astro, README.md) won’t conflict because loomwork only has template versions of those.

File Reference

Framework files (don’t edit in your site repo)

• src/layouts/* — Page layouts
• src/components/* — Reusable components (Callout, YouTube, etc.)
• src/styles/global.css — Base styles and CSS reset
• src/content.config.ts — Content collection schemas
• src/pages/[...slug].astro — Dynamic content route
• src/pages/404.astro — Not found page

Site files (yours to customize)

• src/site.config.ts — Name, nav, footer, fonts
• src/styles/site.css — Color and font overrides
• src/pages/index.astro — Homepage
• src/content/pages/* — All your content
• astro.config.mjs — Site URL
• wrangler.toml — Cloudflare project name and routes
• package.json — Project name
• README.md — Your project README (not provided by loomwork)

Page Templates

Template	Use for	Layout
default	Standard content pages	Centered, reading width
landing	Home/marketing pages	Wide, no sidebar
guide	Long-form guides	Sticky TOC sidebar (like this)
tool	Interactive tools	Minimal chrome, wide
longform	Deep dives, essays, series	Split-panel: fixed sidebar + scrollable

Using Components in MDX

import Callout from '../../components/Callout.astro';
import YouTube from '../../components/YouTube.astro';

<Callout type="warning" title="Heads up">
  This is a warning callout.
</Callout>

<YouTube id="dQw4w9WgXcQ" title="Tutorial" />