Mighty is a minimal Eleventy (11ty) starter template for building one-pager or landing sites, aimed at freelancers and small businesses who want a fast, SEO-friendly web presence.
What is Mighty?
Mighty is a static-site starter built on Eleventy, the JavaScript-based static site generator. It takes content from three sources — a pair of JSON data files (src/_data/settings.json and src/_data/texts.json) holding site details and homepage copy, and a Markdown file (src/imprint.md) for the imprint/privacy page — and outputs a fully static one-pager in a www directory. The project was released by GitHub user ironnysh under the MIT/CC BY-NC-SA 4.0 License. It is intentionally minimal: the only dependencies are Eleventy itself, with no additional frameworks or build tools.
Key Features
- Responsive, fluid layout — The layout adapts to screen widths without using a single media query, keeping the CSS lean.
- Minimal architecture — Just HTML, CSS, and vanilla JavaScript; no React, Vue, or any other client-side framework is required.
- Advanced SEO built in — Open Graph meta tags for Facebook/Twitter sharing and JSON-LD structured data for search engine rich results.
- Lite YouTube embeds — A small script (
liteYoutube.js) prevents YouTube iframes from loading until the user clicks the placeholder image, improving initial page speed. - Automatic image optimization — A GitHub Action (calibreapp/image-actions) compresses JPG/WebP images on pull requests; the repo also includes a pre-optimized dithering example hero image.
- Built-in performance and security — Code is minified, fonts are subsetted (e.g., Fredericka the Great drops from 110 kB to 36 kB), and caching/security headers are configured.
- Accessible and semantic markup — The template provides RTL support (set language to
he-ILand layout flips), plus semantic HTML and keyboard-friendly behavior. - Complete one-pager sections — Includes About, Services, Portfolio, Contact, footer, plus generated
robots.txtand imprint/privacy pages.
Who is it for?
- Freelance designers and developers — Use it to spin up a portfolio one-pager quickly, then replace the sample content and images with your own.
- Small business owners — Publish a landing page with services, contact details, and a hero image without needing to maintain a content management system.
- Eleventy newcomers — Because it sticks to core 11ty features only, it serves as a learning project for understanding how a static site generator organizes data, layouts, and templates.
What can you do with it?
- Customize all text in one place — Edit
src/_data/texts.jsonto change the homepage headline, About paragraphs, Services titles, Portfolio summaries, and even YouTube video IDs. - Adapt branding and fonts — Change colors via CSS variables in
src/_includes/utilities/style.cssand swap the included Catamaran and Fredericka the Great webfonts for your own (with fallback system fonts). - Deploy to any static host — Run
npm run buildto generate thewwwdirectory, then host it on Vercel (one-click deploy), Netlify, Render, or Cloudflare Pages. - Add a personal imprint — Fill in
src/imprint.mdwith your business details and contact info; GDPR and data protection references are generated automatically from the JSON data.
How does Mighty work?
Clone the repository, run npm install, then npm start to launch a local development server at http://localhost:8080. Edit the JSON data files and Markdown as described in the README, and run npm run build to generate a production-ready static site. A GitHub Action automatically compresses any new JPG/WebP images you commit.
Pricing
Mighty is open source and free to use under a dual MIT/CC BY-NC-SA 4.0 License. There are no paid tiers or account requirements; you only pay for your chosen static hosting provider.
FAQ
Is Mighty free?
Yes, Mighty is released under the MIT/CC BY-NC-SA 4.0 License, so you can use it for personal or commercial projects without paying a license fee.
How do I change the content?
Most homepage text lives in src/_data/texts.json and src/_data/settings.json. Edit the values next to keys like title, summary, and videoID; the site regenerates automatically when you run the development server.
Does Mighty support languages other than English?
Only if you adjust the language code in src/_data/settings.json. For example, setting it to he-IL switches the layout to right-to-left. You may also need to supply fonts that support your chosen script.
Can I use Mighty for a multi-page site?
No, Mighty is designed specifically as a one-pager. The homepage loads About, Services, and Portfolio sections, and the only separate pages generated are the imprint and robots.txt. For a larger site you'd need to add routes yourself.
Why does my YouTube video not load until I click it?
That's the Lite YouTube script in src/_includes/utilities/liteYoutube.js. It deliberately defers embedding until a user clicks the placeholder, which cuts down on initial page JavaScript and speeds up load time.
