brennan.day

Brennan Kenneth Brown's IndieWeb blog built with Eleventy. Essays, poetry, and musings on writing, technology, and the human experience.
Visit the website

RSS · GitLab · Contact

Tech Badges

IndieWeb Badges

Personal Badges

About

This is a personal blog following IndieWeb principles:

• Own your domain - https://brennan.day (via Porkbun)
• Own your data - Static site, plain text, version controlled
• Own your identity - Domain as primary identity
• Microformats2 markup (h-card, h-entry, h-feed)
• Webmentions support via webmention.io
• RSS/Atom feeds

Table of Contents

• About
• Table of Contents
• Getting started
• Add your files
• Integrate with your tools
• Collaborate with your team
• Test and Deploy
• Tech Stack
• Prerequisites
• Installation
• Local Development
  • Initial Setup
  • Build for Production
• Project Structure
• Writing Content
  • New Blog Post
  • New Page
• IndieWeb Features
  • Microformats2
  • Webmentions
  • RSS Feed
  • SEO & Discoverability
  • Accessibility
  • Code Syntax Highlighting
  • Enhanced Markdown Features
  • Related Posts
  • Search
• Deployment
  • Quick Netlify Setup
  • Custom Domain (Porkbun)
• Configuration
• Custom Filters
• License
• Inspiration & Credits
• Contact

Getting started

This repository is a personal Eleventy site. For local setup, see:

• Installation
• Prerequisites
• Local Development

Add your files

Content lives in src/posts/ and src/pages/. See Writing Content for the expected front matter and examples.

If you're pushing an existing clone to GitLab, the upstream remote should be:

git remote add origin https://gitlab.com/brennankbrown/brennan.day.git
git branch -M main
git push -uf origin main

Integrate with your tools

This project is designed to work well with GitLab and Netlify.

• GitLab integrations can be configured in your project settings.
• Netlify deployment is covered under Deployment.

Collaborate with your team

This is primarily a personal site, but if you collaborate:

• Use merge requests for changes.
• Use issues for tracking work.

Test and Deploy

Builds are handled via npm run build (see Deployment). If you wire up CI in GitLab, use Node.js 18+.

Tech Stack

• Static Site Generator: Eleventy v2.0+
• Template Engine: Nunjucks
• Content: Markdown with front matter
• Styling: Custom CSS (Gruvbox-inspired color scheme)
• Hosting: Netlify
• Repository: GitLab
• Domain: Porkbun

Prerequisites

• Node.js 18+ and npm
• Git

Installation

Install dependencies with npm install (see Local Development).

Local Development

Initial Setup

# Clone the repository
git clone https://gitlab.com/brennankbrown/brennan.day brennan.day
cd brennan.day

# Install dependencies
npm install

# Start development server
npm start

The site will be available at http://localhost:8080 with live reload enabled.

Build for Production

npm run build

Output will be in the _site/ directory.

Project Structure

brennan.day/
├── src/                    # Source files
│   ├── _data/             # Global data files
│   │   ├── site.json      # Site configuration
│   │   └── webmentions.js # Webmention fetcher
│   ├── _includes/         # Layouts and partials
│   │   ├── layouts/
│   │   │   ├── base.njk   # Base template
│   │   │   ├── post.njk   # Blog post layout
│   │   │   └── page.njk   # Static page layout
│   │   └── partials/
│   │       ├── header.njk # Site header
│   │       ├── footer.njk # Site footer
│   │       └── sidebar.njk # Sidebar content
│   ├── assets/
│   │   ├── css/           # Stylesheets
│   │   ├── js/            # JavaScript files
│   │   └── images/        # Images
│   ├── posts/             # Blog posts (Markdown)
│   ├── pages/             # Static pages (Markdown)
│   ├── index.njk          # Homepage
│   ├── archive.njk        # Archive page
│   ├── tags.njk           # Tags listing
│   └── feed.njk           # RSS/Atom feed
├── .eleventy.js           # Eleventy configuration
├── package.json           # Dependencies
├── TODO.md                # Project TODO list
├── CHANGELOG.md           # Change log
└── README.md              # This file

Writing Content

New Blog Post

Create a new Markdown file in src/posts/:

---
title: Your Post Title
date: 2025-12-17T10:00:00-07:00
tags: [tag1, tag2, tag3]
layout: layouts/post.njk
---

Your post content here in Markdown.

New Page

Create a new Markdown file in src/pages/:

---
title: Page Title
---

Your page content here.

Pages automatically inherit the layouts/page.njk layout via pages.json.

IndieWeb Features

Microformats2

All posts and pages include proper microformats2 markup:

• h-card for author identity (sidebar and post bylines)
• h-entry for blog posts and pages
• h-feed for post collections (homepage, archive, tag pages)
• Proper dt-published dates in ISO 8601 format
• Author information embedded in each post
• Category/tag markup with p-category

Test your markup at indiewebify.me

Webmentions

Webmentions are fetched from webmention.io at build time.

Setup:

1. Sign up at webmention.io
2. Authenticate with IndieAuth
3. Add your token to environment variables:

   export WEBMENTION_IO_TOKEN=your_token_here
   

For Netlify deployment, add the token in Site Settings → Environment Variables.

RSS Feed

The RSS/Atom feed is available at /feed.xml and is auto-discovered via <link> tags in the HTML head.

SEO & Discoverability

• XML Sitemap: /sitemap.xml for search engines
• robots.txt: Proper search engine directives
• humans.txt: Credits and team information
• security.txt: Security contact information at /.well-known/security.txt
• Open Graph: Rich social media previews
• Twitter Cards: Optimized Twitter sharing
• Canonical URLs: Prevent duplicate content issues

Accessibility

This site follows WCAG 2.1 AA standards:

• Skip link for keyboard navigation
• ARIA labels on all landmarks
• Semantic HTML structure
• Focus indicators on interactive elements
• prefers-reduced-motion support
• Screen reader utilities
• Sufficient color contrast

Code Syntax Highlighting

Code blocks are automatically highlighted using Eleventy's syntax highlighting plugin with a custom Gruvbox-inspired theme:

```javascript // Supported languages include JS, Python, HTML, CSS, and many more const greeting = "Hello, World!"; console.log(greeting); ```

Enhanced Markdown Features

This site supports extended markdown capabilities for rich content creation:

Mathematical Expressions - Render LaTeX equations using KaTeX:

• Inline math: $E = mc^2$
• Block math: $$\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}$$

Emoji Support - Use emoji shortcodes that automatically convert:

• :smile: → 😊
• :heart: → ❤️
• :thumbsup: → 👍

Footnotes - Standard markdown footnote syntax:

Here's a statement with a footnote[^1].

[^1]: This is the footnote content.

Mermaid Diagrams - Create beautiful diagrams with Mermaid syntax:

graph TD;
A[Start] --> B{Decision};
B -->|Yes| C[End];
B -->|No| D[Loop];

Styled Components - Custom CSS classes for:

• Alert boxes (info, warning, danger)
• Button variants (primary, secondary, outline)
• Color utilities (primary, secondary, success, danger)
• Enhanced typography (kbd, details, mark, etc.)

See the style guide for a complete demonstration of all markdown features.

Related Posts

Each blog post automatically displays up to 3 related posts based on shared tags. If no related posts are found, recent posts are shown instead.

Search

Full-text search is powered by Pagefind, a static search library that runs entirely in the browser:

• Visit /search/ or click Search in the navigation
• Searches across all posts and pages
• Fast, privacy-friendly (no external services)
• Automatically updated on each build

Deployment

Quick Netlify Setup

1. Connect your GitLab repository to Netlify
2. Configure build settings:
   • Build command: npm run build
   • Publish directory: _site
3. Add environment variables:
   • WEBMENTION_IO_TOKEN: Your webmention.io token
4. Configure custom domain at Porkbun (DNS settings in deployment guide)
5. Enable HTTPS (automatic via Let's Encrypt)

Custom Domain (Porkbun)

Point your Porkbun DNS to Netlify:

• Add Netlify's nameservers OR
• Create CNAME record pointing to your Netlify subdomain

Configuration

Site configuration is in src/_data/site.json:

• Site metadata (title, description, URL)
• Author information (name, bio, social links)
• Navigation menu
• IndieWeb endpoints (webmention, pingback)

Custom Filters

Eleventy filters available in templates:

Date Filters:

• readableDate - Human-friendly date (e.g., "December 17, 2024")
• htmlDateString - HTML date format (YYYY-MM-DD)
• isoDate - ISO 8601 format for machine reading

Content Filters:

• readingTime - Calculate estimated reading time
• excerpt(limit) - Generate text excerpt
• truncate(length) - Truncate text with ellipsis

Collection Filters:

• filterTagList - Remove utility tags
• filterByTag(tag) - Get posts with specific tag
• head(n) - Get first n items

IndieWeb Filters:

• getWebmentionsForUrl - Get webmentions for a URL
• webmentionsByType - Filter by mention type (like, repost, reply)

Recommendation Filters:

• relatedPosts(currentPost, limit) - Find related posts based on shared tags

License

Content is licensed under CC BY-SA 4.0.

Code is licensed under AGPL-3.0 and available for reference, but please use this as a resource to build your own site rather than cloning this one wholesale.

Inspiration & Credits

• Eleventy by Zach Leatherman
• IndieWeb community
• weblog.lol for the initial prototype
• omg.lol for inspiration

Contact

• Website: https://brennanbrown.ca
• Email: mail@brennanbrown.ca
• Mastodon: @brennanbrown@me.dm
• Bluesky: @brennanbrown.ca

---

Built with ❤️ on Treaty 7 Territory (Calgary, Alberta)