Pieter.lol

A modular personal website built with Eleventy.

Preview

Features

• Auto-generated social meta tags and social images (OpenGraph, Twitter)
• Auto-generated favicons in different formats and sizes, plus a web manifest
• Image optimization to modern formats (webp, png, svg)
• HTML, CSS, and JS minification (on production builds)
• Asset fingerprinting (on production builds)
• Automatic app syncing from external Git repositories

Structure

.
├── _site/                      # build output
├── src/
│   ├── _config/                # plugins and scripts
│   ├── _data/                  # global site data
│   ├── _includes/
│   │   ├── component/          # reusable components
│   │   ├── layout/             # page layouts
│   │   └── og-image/           # og-image templates
│   ├── apps/                   # standalone apps 
│   ├── assets/
│   ├── index.html
│   ├── privacy.md
│   ├── robots.njk
│   └── sitemap.njk
├── scripts/                    # scripts for pre or post build processing
│   ├── utils/
│   ├── clean-output.js
│   ├── minify-output.js
│   └── sync-apps.js
├── .env                        # environment variables
├── eleventy.config.js          # main configuration file
└── package.json

Setup

Requirements:

• Node.js >= 18
• npm
• git

git clone https://github.com/pieterjvt/pieter.lol
cd pieter.lol
npm clean-install

Environment variables

Create a .env file in the root:

PROD_SITE_URL=https://pieter.lol
DEV_SITE_URL=http://local.pieter.lol

UMAMI_SCRIPT_URL=https://cloud.umami.is/script.js
UMAMI_WEBSITE_ID=70696574-6572-2077-6173-206865726521

Eleventy modes

Mode	Behavior
development	Uses a placeholder analytics script
production	Minifies output and applies asset fingerprinting post-build

Set with ELEVENTY_ENV=development or ELEVENTY_ENV=production.

Apps

Apps are fully self-contained mini websites that live inside the main site. Assets are automatically rewritten and head tags (title, description, OpenGraph, etc.) are automatically added. Apps can optionally be synced from external Git repositories.

Each app lives in its own directory and must contain a matching <dirname>.11tydata.json file:

Example:

apps/
└── my-app/
    ├── my-app.11tydata.json
    ├── index.html
    └── assets/

Example config:

{
    "title": "My App",
    "description": "Does something cool",

    "repo": "https://github.com/you/my-app",
    "branch": "main"
}

Fields

Field	Required	Description
title	yes	App title
description	yes	Short app description
repo	no	Git repository used for syncing
branch	no	Git branch used for syncing

When repo is set, the app can be synced with:

npm run apps:sync -- <app-name>

When repo is omitted, the app is managed directly in the repository.

Usage

Command	Description
npm run dev	Start the local dev server (with live reload)
npm run build	Build in productioin mode (minified)
npm run build:dev	Build in development (minified)
npm run clean	Remove generated output
npm run minify	Minify generated files
npm run apps:sync	Sync all external apps
npm run apps:sync -- <name>	Sync a single app

Credits

Plugins

• eleventy-plugin-gen-favicons (Original favicon generator plugin)
• eleventy-plugin-og-image (OpenGraph image generator plugin)

Articles

• Create a sitemap for your Eleventy website (Sitemap/robots.txt)

Tools

• Haikei (Background)

License

This project is licensed under the MIT License.