Mighty

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-IL and layout flips), plus semantic HTML and keyboard-friendly behavior.
• Complete one-pager sections — Includes About, Services, Portfolio, Contact, footer, plus generated robots.txt and 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.json to 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.css and swap the included Catamaran and Fredericka the Great webfonts for your own (with fallback system fonts).
• Deploy to any static host — Run npm run build to generate the www directory, then host it on Vercel (one-click deploy), Netlify, Render, or Cloudflare Pages.
• Add a personal imprint — Fill in src/imprint.md with 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.