Skip to content

blinkk/amagaki-starter

main
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

amagaki-starter

NPM Version GitHub Actions TypeScript Style Guide

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

Website screenshot

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.