publishing-astro-websites

Name: publishing-astro-websites
Author: SpillwaveSolutions

43installs5forks

How to install publishing-astro-websites?

spillwavesolutions/publishing-astro-websites-agentic-skill/publishing-astro-websites

$npx -y skills add SpillwaveSolutions/publishing-astro-websites-agentic-skill --skill publishing-astro-websites

Installs into the current project.

Summary

Comprehensive guidance for building and deploying static websites with the Astro framework. This skill should be used when asked to "create astro site", "deploy astro to firebase", "set up content collections", "add mermaid diagrams to astro", "configure astro i18n", "build stati

Files · 1

View on GitHub

SKILL.md

1	# Publishing Astro Websites
2
3	Build fast, content-driven static websites with Astro's zero-runtime SSG approach, partial hydration, and extensive Markdown support.
4
5	## Contents
6
7	- [Quick Start](#quick-start)
8	- [When Not to Use](#when-not-to-use)
9	- [Project Structure](#project-structure)
10	- [SSG vs SSR vs Hybrid](#ssg-vs-ssr-vs-hybrid)
11	- [Content Collections](#content-collections) — Legacy, Content Layer API, Custom Loaders
12	- [Syntax Highlighting](#syntax-highlighting) — Shiki, Transformers, Expressive Code
13	- [Diagram Integration](#diagram-integration) — Mermaid, PlantUML, Dark Mode Theming
14	- [Client-Side Search](#client-side-search) — Pagefind (controls, weighting), Fuse.js
15	- [Versioned Documentation](#versioned-documentation) — Starlight, Multi-version
16	- [Internationalization](#internationalization-i18n) — Routing, Fallbacks
17	- [Common Patterns](#common-patterns) — Pagination, Tags, RSS, Forms
18	- [Performance Best Practices](#performance-best-practices) — Prefetching, Critical CSS
19	- [Deployment](#deployment) — Firebase URL Config, GitHub Pages
20	- [Pre-Deploy Checklist](#pre-deploy-checklist)
21	- [Testing & Quality](#testing--quality) — Vitest, Playwright, Link Checking
22	- [Troubleshooting](#troubleshooting)
23
24	## Quick Start
25
26	```bash
27	# Create new project (use Blog template for Markdown sites)
28	npm create astro@latest
29
30	# Development
31	npm run dev # Local server at http://localhost:4321
32	npm run build # Generate static files in dist/
33	npm run preview # Preview production build
34	```
35
36	## When Not to Use
37
38	This skill focuses on static site generation (SSG). Consider other approaches for:
39
40	- Real-time data applications - Use SSR mode with database connections
41	- User authentication flows - Requires server-side session handling
42	- E-commerce with dynamic inventory - Use hybrid mode or full SSR
43	- Single-page applications (SPAs) - Consider React/Vue frameworks directly
44
45	For hybrid SSG+SSR patterns, see Astro's adapter documentation.
46
47	## Project Structure
48
49	```
50	src/
51	components/ # Astro, React, Vue, Svelte components
52	content/ # Content Collections (Markdown/MDX)
53	config.ts # Collection schemas
54	docs/ # Example collection
55	layouts/ # Page wrappers with slots
56	pages/ # File-based routing
57	public/ # Static assets (images, fonts, favicons)
58	astro.config.mjs # Framework configuration
59	```
60
61	## SSG vs SSR vs Hybrid
62
63	\| Mode \| When Pages Render \| Use Case \|
64	\|------\|-------------------\|----------\|
65	\| SSG (default) \| Build time \| Blogs, docs, marketing sites \|
66	\| SSR \| Each request \| Dynamic data, personalization \|
67	\| Hybrid \| Mix of both \| Static pages + dynamic endpoints \|
68
69	For pure static sites, use default `output: 'static'` - no adapter needed.
70
71	## Content Collections
72
73	### Legacy Pattern (Astro 4.x)
74
75	Define schemas in `src/content/config.ts`:
76
77	```typescript
78	import { defineCollection, z } from "astro:content";
79
80	export const collections = {
81	docs: defineCollection({
82	schema: z.object({
83	title: z.string(),
84	description: z.string().optional(),
85	tags: z.array(z.string()).optional(),
86	order: z.number().optional(),
87	draft: z.boolean().default(false)
88	})
89	})
90	};
91	```
92
93	### Content Layer API (Astro 5.0+)
94
95	New pattern with `glob()` loader - up to 75% faster builds for large sites:
96
97	```typescript
98	// src/content.config.ts (note: different filename)
99	import { defineCollection } from 'astro:content';
100	import { glob } from 'astro/loaders';
101	import { z } from 'astro/zod';
102
103	const blog = defineCollection({
104	loader: glob({ pattern: '*/.md', base: './src/data/blog' }),
105	schema: ({ image }) => z.object({
106	title: z.string(),
107	pubDate: z.coerce.date(),
108	draft: z.boolean().default(false),
109	cover: image(), // Validates image exists
110	author: reference('authors'), // Cross-collection reference
111	})
112	});
113
114	export const collections = { blog };
115	```
116
117	### Advanced Schema Patterns
118
119	```typescript
120	schema: ({ image }) => z.object({
121	cover: image(), // Validates image in src/
122	category: z.enu

People who liked this also viewed

6 picks

Type

publishing-astro-websites

43installs5forks

View on GitHub

How to install publishing-astro-websites?

spillwavesolutions/publishing-astro-websites-agentic-skill/publishing-astro-websites

$npx -y skills add SpillwaveSolutions/publishing-astro-websites-agentic-skill --skill publishing-astro-websites

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Publishing Astro Websites
2
3	Build fast, content-driven static websites with Astro's zero-runtime SSG approach, partial hydration, and extensive Markdown support.
4
5	## Contents
6
7	- [Quick Start](#quick-start)
8	- [When Not to Use](#when-not-to-use)
9	- [Project Structure](#project-structure)
10	- [SSG vs SSR vs Hybrid](#ssg-vs-ssr-vs-hybrid)
11	- [Content Collections](#content-collections) — Legacy, Content Layer API, Custom Loaders
12	- [Syntax Highlighting](#syntax-highlighting) — Shiki, Transformers, Expressive Code
13	- [Diagram Integration](#diagram-integration) — Mermaid, PlantUML, Dark Mode Theming
14	- [Client-Side Search](#client-side-search) — Pagefind (controls, weighting), Fuse.js
15	- [Versioned Documentation](#versioned-documentation) — Starlight, Multi-version
16	- [Internationalization](#internationalization-i18n) — Routing, Fallbacks
17	- [Common Patterns](#common-patterns) — Pagination, Tags, RSS, Forms
18	- [Performance Best Practices](#performance-best-practices) — Prefetching, Critical CSS
19	- [Deployment](#deployment) — Firebase URL Config, GitHub Pages
20	- [Pre-Deploy Checklist](#pre-deploy-checklist)
21	- [Testing & Quality](#testing--quality) — Vitest, Playwright, Link Checking
22	- [Troubleshooting](#troubleshooting)
23
24	## Quick Start
25
26	```bash
27	# Create new project (use Blog template for Markdown sites)
28	npm create astro@latest
29
30	# Development
31	npm run dev # Local server at http://localhost:4321
32	npm run build # Generate static files in dist/
33	npm run preview # Preview production build
34	```
35
36	## When Not to Use
37
38	This skill focuses on static site generation (SSG). Consider other approaches for:
39
40	- Real-time data applications - Use SSR mode with database connections
41	- User authentication flows - Requires server-side session handling
42	- E-commerce with dynamic inventory - Use hybrid mode or full SSR
43	- Single-page applications (SPAs) - Consider React/Vue frameworks directly
44
45	For hybrid SSG+SSR patterns, see Astro's adapter documentation.
46
47	## Project Structure
48
49	```
50	src/
51	components/ # Astro, React, Vue, Svelte components
52	content/ # Content Collections (Markdown/MDX)
53	config.ts # Collection schemas
54	docs/ # Example collection
55	layouts/ # Page wrappers with slots
56	pages/ # File-based routing
57	public/ # Static assets (images, fonts, favicons)
58	astro.config.mjs # Framework configuration
59	```
60
61	## SSG vs SSR vs Hybrid
62
63	\| Mode \| When Pages Render \| Use Case \|
64	\|------\|-------------------\|----------\|
65	\| SSG (default) \| Build time \| Blogs, docs, marketing sites \|
66	\| SSR \| Each request \| Dynamic data, personalization \|
67	\| Hybrid \| Mix of both \| Static pages + dynamic endpoints \|
68
69	For pure static sites, use default `output: 'static'` - no adapter needed.
70
71	## Content Collections
72
73	### Legacy Pattern (Astro 4.x)
74
75	Define schemas in `src/content/config.ts`:
76
77	```typescript
78	import { defineCollection, z } from "astro:content";
79
80	export const collections = {
81	docs: defineCollection({
82	schema: z.object({
83	title: z.string(),
84	description: z.string().optional(),
85	tags: z.array(z.string()).optional(),
86	order: z.number().optional(),
87	draft: z.boolean().default(false)
88	})
89	})
90	};
91	```
92
93	### Content Layer API (Astro 5.0+)
94
95	New pattern with `glob()` loader - up to 75% faster builds for large sites:
96
97	```typescript
98	// src/content.config.ts (note: different filename)
99	import { defineCollection } from 'astro:content';
100	import { glob } from 'astro/loaders';
101	import { z } from 'astro/zod';
102
103	const blog = defineCollection({
104	loader: glob({ pattern: '*/.md', base: './src/data/blog' }),
105	schema: ({ image }) => z.object({
106	title: z.string(),
107	pubDate: z.coerce.date(),
108	draft: z.boolean().default(false),
109	cover: image(), // Validates image exists
110	author: reference('authors'), // Cross-collection reference
111	})
112	});
113
114	export const collections = { blog };
115	```
116
117	### Advanced Schema Patterns
118
119	```typescript
120	schema: ({ image }) => z.object({
121	cover: image(), // Validates image in src/
122	category: z.enu

People who liked this also viewed

6 picks

Type