Marmalade
Marmalade is an opinionated JAMstack static site starter built on Next.js that generates a fully static blog or personal site with MDX, TypeScript, and Theme UI. It offers static export, multiple content directories, tagging, and RSS generation out of the box.
What is Marmalade?
Marmalade is a JAMstack starter template that combines Next.js static export with MDX content, TypeScript, and Theme UI styling. It takes Markdown and MDX files as input and produces a static website with generated RSS feeds, tag index pages, and a web app manifest, ready to deploy to Netlify or any static host. The project is maintained by the developer behind joebell.co.uk and published as an open-source GitHub repository.
Key Features
- Theme UI styling — Ships with a default theme and uses Theme UI's theme schema to enforce design tokens; all styling is CSS-in-JS.
- MDX content — Write posts and pages in MDX, processed with next-mdx-enhanced, which also supports extended front matter for richer metadata.
- Preact support — The starter can swap React for Preact in production builds to reduce bundle size.
- TypeScript — Written in TypeScript, giving static typing across the entire codebase.
- Multiple post directories — Organize content into separate posts folders, each with its own index page.
- Tagging system — Add tags to posts and automatically generate tag index pages.
- RSS feed generation — Automatically generate RSS feeds for your content.
- Deployment ready — Includes configuration and a getting-started guide for deploying to Netlify or your platform of choice.
Who is it for?
- Developers who want a lean JAMstack setup — Use Marmalade to scaffold a Next.js static site without Gatsby's plugin dependencies while still getting static optimization.
- Bloggers who want full control — Write in MDX, organize posts into multiple directories, and publish with RSS and tagging out of the box.
- Front-end developers exploring CSS-in-JS — The default Theme UI setup demonstrates how to apply design tokens and theming systems.
- Personal site owners — Build a portfolio or blog with static export and deploy to Netlify.
What can you do with Marmalade?
- Set up a static blog — Create MDX posts in multiple directories, add tags, and automatically generate an RSS feed.
- Build a personal portfolio — Use the Next.js static export to produce a fast, SEO-friendly site with a custom Theme UI design.
- Experiment with a Gatsby-like workflow — If you're curious about what happens behind Gatsby's plugin magic, Marmalade offers a transparent Next.js alternative.
Pros and cons
- Pros: Next.js static export; MDX with next-mdx-enhanced; TypeScript, ESLint, Prettier, and Commitizen preconfigured; built-in RSS and manifest generation.
- Cons: The project is marked as a work in progress — tests, accessibility audits, and features like custom layouts are still on the to-do list, and development has been paused since June 2020.
Alternatives
- Gatsby — a React-based static site generator with a plugin ecosystem and GraphQL data layer, which the author also uses for their personal site.
FAQ
Why does this project exist?
The author created Marmalade to push themselves out of their comfort zone and understand what goes on behind the scenes of tools like Gatsby. It reflects their personal preference for how to build front-end projects, and they encourage others to try new tools.
Why not just use Gatsby?
The author likes Gatsby and uses it for their personal site, but they wanted to explore Next.js's static export feature to see what happens behind the scenes. Marmalade was born from that exploration.
Why do you use CSS-in-JS with Theme UI?
The author previously used SASS but now prefers CSS-in-JS because it allows them to use a theme schema to reinforce design tokens across the project, which feels cleaner and more maintainable to them.
Why not use Chakra-UI?
Chakra UI is bound to the Styled System Theme Specification and Emotion, so it was not compatible with the author's goals for this starter. They chose Theme UI instead because it is framework-agnostic and fits the design-token approach.
