Eleventy basics on vanderworp.org

type: note | domain: technology | topic: software | lang: en | pub: 2025-12-07

Ultimately, I wanted static HTML. I was tired of the complexity of WordPress, so I did some research and came to the conclusion that eleventy (or 11ty) was a perfect fit – if NASA and CERN use it, then it's good enough for me ;-).

Anyone who wants static HTML these days will quickly end up with 11ty. The principle is not difficult. Templates are added to easy-to-write markdown files, which are converted to HTML.

There are plenty of ways to work around the things I miss from WordPress. No more absurdly complex HTML code, just clarity and structure. And without the overhead of a database, it's lightning fast.

Structure

This site runs with a very simple setup:

• Content lives in markdown files under src/
• Layouts live under src/_includes/layouts/
• Output is HTML and is written to _site/
• Markdown is rendered with markdown-it plus:
  • markdown-it-prism for static code highlighting
  • MathJax for $\LaTeX$-style math ($...$, $$...$$)
• A customised rsync script sends the results directly to the Nginx web server.

Basic commands

In the project root:

# build the site once
npm run build

# build and serve locally, with live reload
npm run serve

Representation

Text, syntax highlighting

;; Lisp example
(setq atxt "Ola Cola!")
(princ atxt)

Styles

Two examples, style &ci (command input) and &warn (warning):

Code:

This is &ci{$ ls -la} and here &warn{Warning!}

Sample:

This is $ ls -la and here Warning!

With:

&ci and &warn are just classes defined in .css.

Math

\LaTeX \xrightarrow[MathJax]{render-with} E = mc^2

Rendered Inline ($...$): $\LaTeX \xrightarrow[MathJax]{render-with} E = mc^2$

Display ($$...$$):

$$\LaTeX \xrightarrow[MathJax]{render-with} E = mc^2$$