Amagaki – The best way to hand-code marketing sites

Template: header

Template: hero

The best way to hand‑code high‑fidelity marketing websites

Amagaki is a TypeScript-based website generator. It's fast, flexible, and extensible. It's more than Jekyll, less than Next.js or Gatsby – and perfect for hand-coding high-fidelity marketing websites.

Read manualarrow_forward Explore the starter

Template: spacer

Template: simpleMarkdown

Quick start

Amagaki is distributed as an npm package. When starting a new site from scratch,
we recommend using create-amagaki which uses the official
amagaki-starter.

shell

# Create a new Amagaki project interactively
npx create-amagaki

# Start the dev server
npm run dev

# Build the site
npm run build

If you are integrating into an existing project, you can install Amagaki directly.

shell

npm install --save @amagaki/amagaki

Template: spacer

Template: touts

Performance first

Performance metrics come with every build. Insights inform you of slowdowns with your site’s build time. See benchmarks.

Just write HTML, CSS, and TS

Amagaki lets you focus on the things that matter for marketing sites: building out the templates, making the styles pixel perfect, and maintaining the content. Avoid fussing with boilerplate configuration and routing on every project.

Not a frontend framework

Amagaki helps you follow best practices such as separating content and markup. You can pair it with the frontend framework of your choosing, if needed. Since it just generates HTML, you can integrate it into an existing project or system (even a totally proprietary one).

Extendible. Written in TypeScript.

Enhance Amagaki with the same language used to write your frontend. Leverage the full Amagaki API, which is documented, tested, and has auto-generated API Reference. Amagaki comes with Nunjucks for HTML templates, but supports unlimited template engines.

Locale aware

Localization features are a first party citizen. Generate localized variations of your website without complexity. Plus, you can change source strings without breaking translated copy, and automatically use translated copy when you receive it. Stop micro-managing your translations.

Content management flexibility

Architect your content structure, taxonomies, and relationships. Create custom content types. Bind content types to components. Amagaki sites let you focus on content architecture, binding that content to your site's reusable modules, and assembling it all together on pages.

Template: spacer

Template: simpleMarkdown

Why?

We know there are dozens and dozens of static site generators. Amagaki was built specifically for two reasons:

TypeScript. There aren’t a lot of robust TypeScript static site generators. Amagaki aims to be the best. We are betting on the evolution of TypeScript and the JavaScript ecosystem, and want to empower developers to use the same tools to extend Amagaki as they use to build their website.
A laser focus on the marketing website lifecycle. Marketing websites face certain challenges and sit somewhere in between blogs and webapps. For example, a popular tool like Jekyll may have too few features for a marketing website, and Next.js may have too many. Hugo and Grow are great, but they are in non-JavaScript languages. Something has to bridge the gap.

More on marketing sites

Marketing websites are often constructed with elements such as repeatable content types, reusable modules, frontend components, and translations. Amagaki makes it easy to separate content and views, allowing developers to follow this critical maintainability best practice. All while just writing HTML (templates), CSS (Sass), and JS (TypeScript).

And, often, stakeholders require developers to stage updates on a dime and push content updates rapidly. Amagaki facilitates this workflow with confidence.

Template: spacer

Template: simpleMarkdown

The editor (coming soon)

You’re using a static site generator, but you want to empower stakeholders with the ability to edit and publish content themselves; and you want to avoid a complicated headless CMS integration. That’s where Editor.dev comes in.

Amagaki was built to pair with Editor.dev – a robust, minimal configuration, user-friendly way to empower non-technical users to assemble pages, update copy, images, and translations, and interact with your website content – all without requiring integrations.

Template: spacer

Template: simpleMarkdown

The team

Amagaki is an independent project released under the MIT License largely maintained by Blinkk, a small web development studio. We use Amagaki to build projects for ourselves, our stakeholders, and partners.

Other projects

Template: spacer

Template: footer