Onze

Getting Started with Onze

2026-08-21T12:00:00Z

Welcome to Onze, a clean and minimal blog template for Eleventy inspired by the classic Lanyon/Poole theme.

Features

Sidebar navigation
Pagination
Related posts based on tags
Syntax highlighting (Prism.js)
Color themes
Dark mode
SEO out of the box
Responsive design
GitHub Pages deploy workflow included

Quick Start

Clone this repository
Run npm install
Run npm run dev to start the development server
Edit _data/site.json to configure your site

Post ordering

Posts are sorted by date (newest first). If you have multiple posts on the same day, use a full datetime to control the order:

date: 2026-08-21T03:00:00  # appears before
date: 2026-08-21T02:00:00  # appears after

Learn more

Markdown Examples — See how content renders in this template
Organizing Posts — Different ways to organize your post files
Deploy to GitHub Pages — How to set up automatic deploys
SEO Out of the Box — Built-in SEO features and how to customize them
Themes and Dark Mode — Color themes and dark mode configuration
Syntax Highlighting — Code blocks with language highlighting
Translation — How to translate the template to your language

This is a sample post. Feel free to delete it and start writing your own content.

Markdown Examples

2026-08-21T11:00:00Z

This post demonstrates the Markdown rendering capabilities of the Onze template.

Text Formatting

You can write bold, italic, ~~strikethrough~~, and inline code.

Blockquotes

This is a blockquote. You can use it to highlight important information or quotes from other sources.

Lists

Item one
Item two
- Nested item
Item three

First step
Second step
Third step

Code Blocks

function greet(name) {
  return `Hello, ${name}!`;
}

console.log(greet("World"));

Links and Images

Check out the Eleventy documentation for more information.

Tables

Feature	Status
Pagination	✅
Related Posts	✅
RSS Feed	Planned

That's it! You now have a good overview of how content renders in this template.

Deploy to GitHub Pages

2026-08-21T10:00:00Z

Onze was built with GitHub Pages in mind. The repository already includes a GitHub Actions workflow (.github/workflows/deploy.yml) that builds and deploys your site automatically on every push to main.

How to set up

Push this repository to GitHub
Go to Settings → Pages
Under Build and deployment, set the source to GitHub Actions
That's it — the next push to main will trigger the deploy

No extra configuration needed. Just write your posts, push, and your site is live.

Organizing Posts

2026-08-21T10:00:00Z

You can organize your post files inside the blog/ folder however you prefer. The URL is always generated from the date in the front matter and the folder name (slug).

Examples

All of these produce the same URL pattern /blog/2026/08/your-post/:

blog/your-post/index.md
blog/2026/your-post/index.md
blog/2026/08/your-post/index.md

Choose whatever structure keeps your files organized for you. The output URL will always be consistent.

Translation

2026-08-21T07:00:00Z

Onze is written in English by default, but all user-facing text is configurable through _data/site.json.

Language

Set the lang field to change the site language. This affects the <html lang> attribute and the date formatting:

{
  "lang": "pt-BR"
}

Labels

All UI text comes from the labels field:

{
  "labels": {
    "older": "Anteriores",
    "newer": "Recentes",
    "readMore": "Leia mais",
    "relatedPosts": "Posts Relacionados"
  }
}

Navigation

Navigation items are also in site.json:

{
  "nav": [
    { "label": "Início", "url": "/" },
    { "label": "Sobre", "url": "/about/" }
  ]
}

What changes with `lang`

<html lang="pt-BR"> — helps search engines and screen readers

Date Format

The date format is configurable via the dateFormat field using dayjs patterns:

{
  "dateFormat": "YYYY-MM-DD"
}

Common patterns

Pattern	Output
`MMMM D, YYYY`	August 21, 2026 (default)
`YYYY-MM-DD`	2026-08-21
`DD/MM/YYYY`	21/08/2026
`MMM D, YYYY`	Aug 21, 2026
`D MMMM YYYY`	21 August 2026

Translation

Month and day names are automatically translated based on the lang field. The date locale is powered by dayjs. Check the available locales to see supported languages.

No code changes needed. Just edit site.json and your site is translated.

Syntax Highlighting

2026-08-21T06:00:00Z

Onze supports syntax highlighting out of the box using Prism.js. Just specify the language after the opening triple backticks.

JavaScript

function fibonacci(n) {
  if (n <= 1) return n;
  return fibonacci(n - 1) + fibonacci(n - 2);
}

const result = fibonacci(10);
console.log(`Fibonacci(10) = ${result}`);

HTML

<nav class="sidebar-nav">
  <a class="sidebar-nav-item active" href="/">Home</a>
  <a class="sidebar-nav-item" href="/about/">About</a>
</nav>

CSS

.post-title {
  margin-bottom: 0.25rem;
  font-size: 2rem;
  color: #313131;
}

@media (prefers-color-scheme: dark) {
  .post-title {
    color: #e6edf3;
  }
}

Bash

git clone https://github.com/maicoqb/eleventy-template-onze.git my-blog
cd my-blog
npm install
npm run dev

JSON

{
  "title": "Onze",
  "tagline": "A minimal Eleventy blog template",
  "darkMode": true,
  "theme": ""
}

Themes and Dark Mode

2026-08-21T05:00:00Z

Onze includes color themes inherited from Lanyon and automatic dark mode support.

Color Themes

To change the color theme, set the theme field in _data/site.json:

{
  "theme": "theme-base-08"
}

This applies the theme class to the <body> element, changing the sidebar and link colors.

Available themes

Class	Color
(empty)	Default (dark sidebar)
`theme-base-08`	Red
`theme-base-09`	Orange
`theme-base-0a`	Yellow
`theme-base-0b`	Green
`theme-base-0c`	Cyan
`theme-base-0d`	Blue
`theme-base-0e`	Magenta
`theme-base-0f`	Brown

Leave the theme field empty for the default dark sidebar.

Dark Mode

Dark mode is enabled by default and activates automatically based on the user's system preference (prefers-color-scheme: dark).

To disable dark mode, set darkMode to false in _data/site.json:

{
  "darkMode": false
}

Dark mode applies to all elements: body, sidebar, headings, links, code blocks, pagination, and related posts.

SEO Out of the Box

2026-08-21T04:00:00Z

Onze comes with SEO essentials built in. No plugins or extra configuration needed.

What's included

Meta description — Automatically generated from the post content (first 30 words). You can override it by adding description to the front matter.
Open Graph tags — Title, description, URL, type, and image for social sharing (Facebook, LinkedIn, WhatsApp).
Twitter Cards — Proper card markup for Twitter/X.
Canonical URL — Prevents duplicate content issues.
Sitemap — Automatically generated at /sitemap.xml with all pages.
robots.txt — Allows all crawlers and points to the sitemap.
RSS feed — Atom feed at /feed.xml with full post content.

Custom description

Add a description field to your post's front matter to override the automatic excerpt:

---
title: My Post
description: A custom description for search engines and social sharing.
---

Post image

Add an image field to set the Open Graph image for a specific post:

---
title: My Post
image: /public/images/my-post-cover.png
---

If no post image is set, the default image from _data/site.json is used.

Onze

Getting Started with Onze

Features

Quick Start

Post ordering

Learn more

Markdown Examples

Text Formatting

Blockquotes

Lists

Code Blocks

Links and Images

Tables

Deploy to GitHub Pages

How to set up

Organizing Posts

Examples

Translation

Language

Labels

Navigation

What changes with lang

Date Format

Common patterns

Translation

Syntax Highlighting

JavaScript

HTML

CSS

Bash

JSON

Themes and Dark Mode

Color Themes

Available themes

Dark Mode

SEO Out of the Box

What's included

Custom description

Post image

What changes with `lang`