Skip to content

README.md

Latest commit

 

History

History
132 lines (113 loc) · 4.1 KB

README.md

File metadata and controls

132 lines (113 loc) · 4.1 KB
Raw

Pieter.lol

A modular personal website built with Eleventy.

Preview

Website 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

Articles

Tools

License

This project is licensed under the MIT License.