Superdapo is an Eleventy (11ty) starter kit for building static blogs and websites, derived from Mike Riethmuller's Supermaya template and redesigned with full-screen page layouts, distinct header and footer styles, and additional common pages. It outputs a static, server-rendered site from Markdown, SCSS, and JavaScript content, and it runs on the Eleventy static site generator with Netlify deployment support.
What is Superdapo?
Superdapo is an Eleventy starter kit that takes Markdown files, SCSS stylesheets, and JavaScript modules as input and produces a static, server-rendered HTML site. It was built as a fork of Mike Riethmuller's Supermaya template, with the repository description indicating it powers the personal site davidporkka.com. The kit includes the standard blog features of Supermaya — posts, pages, pagination, tags, and static output — and adds a redesigned full-screen visual style, mobile and tablet layouts, social icons, and security headers in its Netlify configuration.
Key Features
- Full-screen page designs — Superdapo changes the visual approach of Supermaya with full-screen layouts for pages, plus a different header, footer, home page, and page title design.
- Additional common pages and social icons — The starter includes more of the standard pages a typical website needs, along with social media icon components.
- Yarn and .toml security headers — The project uses the Yarn package manager instead of NPM, and the Netlify configuration file includes security headers.
- Blog standard features — Inherits Supermaya's posts and pages, pagination, tags, and static server-rendered content.
- RSS feed and service worker — A built-in RSS feed is generated, and a service worker provides offline content support.
- Lazy loading images and critical CSS — Images are lazy-loaded by default, and critical CSS generation is available but disabled for performance until enabled in site data.
- On-the-fly SCSS and JavaScript compilation — SCSS is compiled by 11ty into site data and static files, while JavaScript is transpiled from ES6 to ES5 by Webpack, with entry points configured in site/_data/js.js.
- Optional KeystoneJS integration — Comments, claps, reading list, and login features can be enabled by connecting a KeystoneJS API, with each feature toggled in site/_data/site.js.
Who is it for?
- Static site developers who want a well-structured Eleventy starter with theming, data-driven navigation, and a modern build approach without a separate build step.
- Bloggers and personal site owners looking for a full-screen design template that includes RSS, service worker offline support, and easy deployment to Netlify.
- Developers who want user-generated content — Superdapo can be paired with a KeystoneJS backend to add comments, claps, reading lists, and login without abandoning the JAMstack architecture.
What can you do with Superdapo?
- Launch a personal blog or portfolio — Write posts and pages in Markdown, configure navigation and site information in site/_data, and publish a static site with tags, pagination, and RSS.
- Add interactive features incrementally — Deploy KeystoneJS to Heroku, connect the API, and toggle comments, claps, reading list, or login on per-page or site-wide.
- Customize the design — Edit SCSS files under site/src/scss, change the color theme via the
themekey, and compile entry points listed in site/_data/css.js.
How does Superdapo work?
After cloning the repository, run yarn eleventy --serve to start the development server at http://localhost:8080. Content is written in Markdown and templates, SCSS and JavaScript are compiled on-the-fly by 11ty and Webpack, and the output is a fully static site. Before going live, remove the robots.txt file to allow search engines to index the site.
FAQ
Do I need KeystoneJS to use Superdapo?
No. The core blog and website features work without any backend. The Keystone integration is optional; if you skip it, you get a standard static site and can add a KEYSTONE_API environmental variable later.
How do I enable comments and other rich features?
Deploy the Keystone JAMstack plus starter kit to Heroku, copy your Keystone API URL, and deploy Superdapo to Netlify. Then toggle each feature (comments, claps, reading list, login) in the keystone key of site/_data/site.js.
What package manager does Superdapo use?
Superdapo uses Yarn as its package manager, unlike the original Supermaya template which uses NPM. Run yarn eleventy --serve for local development.
How do I change the color scheme?
Set an alternative theme by modifying the theme key in site/_data/site.js. The default is black and white, and alternative themes are supported.
How can I let search engines index my site?
The repository includes a robots.txt that blocks crawling. After adding your content, delete the robots.txt file to allow search engines to index your site.
