11ty-Serene

11ty-Serene is a minimal landing-page theme with an integrated blog, built on the Eleventy static site generator and styled with Sass.

What is 11ty-Serene?

11ty-Serene is a static-site theme that combines a single-page landing layout and a blog inside one Eleventy project. It takes content written as Eleventy templates and data files, plus styles written in Sass, and outputs a deployable static site of HTML and CSS. The theme was created and published by GitHub user CLCK (CLCK0622) and its official repository description reads: "A minimal theme for a landing page and an integrated blog. Built with 11ty and Sass." Because it is built on Eleventy, the theme requires no client-side JavaScript framework; the build system compiles everything to plain files.

Key Features

• Eleventy foundation — Built on 11ty, a JavaScript static site generator that turns markdown, templates, and data into static HTML.
• Sass styling — Styles are written in Sass (SCSS) and compiled to CSS, with a dedicated watch:css script for automatic recompilation during development.
• Landing page and blog — The theme provides a minimal landing page structure plus an integrated blog, so a project site and article publishing coexist in one repository.
• pnpm-first scripts — All commands use the pnpm package manager by default: pnpm install to install dependencies, pnpm run build to compile the site, pnpm run start to run a local development server, and pnpm run watch:css to watch and compile Sass.
• Simple structure — The repository keeps its file and folder organization minimal, making it easy to trace how the build is wired.

Who should use 11ty-Serene?

• Static-site developers who want a ready-made Eleventy setup with Sass preconfigured can clone this theme instead of wiring up their own build pipeline.
• Open-source project maintainers can use the landing page to introduce a project and the blog section to post announcements and updates from the same codebase.
• Designers who prefer Sass can edit the theme's SCSS files and use the included watcher to see CSS changes instantly, keeping the styling workflow in their familiar tooling.

What can you do with 11ty-Serene?

• Launch a project site quickly: copy the theme and customize the landing page text and links to publish a single-page home for an app or library without building a custom layout.
• Publish blog posts alongside your landing content: add posts using Eleventy's standard content folder, and they become part of the same static output as the landing page.
• Use it as a learning base: read through the small codebase to see how an 11ty and Sass project is organized, then adapt it for your own templates.

How does 11ty-Serene work?

The repository comes with a standard installation and development workflow. After cloning, run pnpm install to fetch dependencies. For development, run pnpm run watch:css in one terminal and pnpm run start in another; the first recompiles Sass on changes while the second serves the site locally. When ready to ship, run pnpm run build to produce the final static output.

FAQ

Does 11ty-Serene include a blog?

Yes. The repository description explicitly states the theme is for "a landing page and an integrated blog," so you get both page and blog functionality in the same Eleventy project.

What is the default package manager for this theme?

All scripts use pnpm by default. The install, build, start, and watch commands are all run through pnpm, so you should have pnpm (and a Node.js environment) available.

What commands do I need for local development?

After installing dependencies, open two terminals. Run pnpm run watch:css to compile Sass on the fly, and pnpm run start to start the local development server.

What does the build process output?

Running pnpm run build uses Eleventy to generate a static site from the theme's templates and content, and Sass to compile stylesheets, producing a deployable set of HTML and CSS files.

Who created 11ty-Serene?

The theme was made by CLCK, whose GitHub account is CLCK0622. The repository link is included in the project documentation.