amagaki-starter

A minimal starter project that uses the Amagaki website generator.

Getting started

The easiest way to start this project from scratch is to use Create Amagaki which clones this project and sets it up for you.

npx create-amagaki

Features

• Reusable page modules in Preact (TSX).
• Responsive media elements using <degu-image> and <degu-video>.
• Per-partial CSS splitting.
• TypeScript compilation with tree-shaking for minimal payloads.
• Opinionated autofixing and linting.

Commands

# Install dependencies.
npm install

# Run the development server.
npm run dev

# Build the static site.
npm run build

Creating pages

This project uses the @amagaki/amagaki-plugin-page-builder. The plugin generates the core markup for each page and manages partials.

Partials are standalone, isolated modules that can be mixed and matched to approach page building by assembling reusable modules.

1. Create partials by adding files in the following locations:

• CSS: /src/partials/{partial}/{partial}.sass
• Preact: /src/partials/{partial}/{partial}.tsx

1. Create pages by mixing and matching partials:

• Document: /content/pages/{page}.yaml

Previewing modules

Visit http://localhost:3000/preview/ to preview a gallery of all partials available to use. Modules can be built and previewed independently of pages.

Other tips

• Use the ? hotkey to show keyboard shortcuts.