ONCE is an Eleventy starter theme for building personal websites and blogs, combining the Eleventy static site generator with the Bulma CSS framework and PurgeCSS for performance.
What is ONCE?
ONCE is a personal theme built on Eleventy, a static site generator, with styling provided by BulmaCSS. It takes content written in Markdown (or other formats supported by Eleventy) and produces a static site with layouts for pages, posts, an index page, tag pages, and a custom 404 error template. The theme also includes preprocessing steps that minify HTML, CSS, and JavaScript, and remove unused CSS with PurgeCSS. It is available as a GitHub repository, and the demo is hosted on Netlify.
Key Features
- Layouts — Includes specific templates for pages (
minimal-post.njk), posts (post.njk), an index, tag pages, and an error 404 page, all using the Nunjucks templating engine. - Sitemap — Automatically generates a sitemap for search engine discovery.
- Search by titles — Provides a client-side search feature that matches page and post titles.
- Share buttons — Adds social sharing buttons to posts.
- Social profile links — Displays links to your social profiles.
- Ad blocks — Dedicated blocks for advertisements or other custom content, configured in the
eleventy.jsfile. - Cookie advice — Shows a cookie consent notice for EU compliance.
- Asset optimization — Minifies CSS, JS, and HTML, and removes unused CSS using PurgeCSS.
- Config file — Centralizes site settings in
_data/config.jsonfor easy editing.
Who is it for?
ONCE is for developers who want a lightweight personal site or blog with a clean, minimal design. It suits those already comfortable with Eleventy and looking for a ready-made structure with Nunjucks layouts. It is also for site owners who need built-in features like share buttons, cookie consent, and ad blocks without installing many separate plugins.
What can you do with ONCE?
- Personal bloggers: Use the post layout and tag pages to publish articles, and the sitemap feature helps with SEO.
- Developers: Extend the theme by adding custom CSS in
/src/_css/custom.cssand custom JavaScript in_includes/scripts.js. - Site owners: Place advertising or custom content in the ad blocks by editing
eleventy.js, and configure social links in the config file.
How does ONCE work?
Run npm run serve to start the development server with live reload, or npm run build to generate a production-ready static site. The build process runs PurgeCSS to strip unused Bulma styles, minifies all output, and generates the sitemap. Site-wide settings live in _data/config.json, so you can update the site name, navigation, and social links without touching layouts.
FAQ
Is ONCE free to use?
The repository does not specify a license, but it is published as a public repository and linked to a live demo, indicating it is freely available for personal use.
What templating language does ONCE use?
ONCE uses Nunjucks (.njk) templates for layouts. The main layout files are minimal-post.njk and post.njk.
How do I add custom CSS?
Place your own styles in the custom.css file located in the src/_css/ directory. It will be processed and minified during the build.
How do I configure social links?
Edit the _data/config.json file to set up your social profile URLs and other site configuration.
Does ONCE support tags and categories?
Yes, the theme includes dedicated tag pages, so you can group posts by topic and generate tag archive pages.
