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
• DNS Security: Deflect.ca nameservers for DDoS protection
• 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

Digital Security & DDoS Protection

This site uses Deflect.ca for DNS management and DDoS protection. Deflect is a Canadian social enterprise by eQualitie that provides free DDoS mitigation and website security services to civil society organizations, independent media, and human rights groups worldwide.

Founded in 2011, Deflect protects organizations facing digital threats and censorship, supporting approximately 2% of the global internet population annually. Their work has defended sites like Black Lives Matter, Ukrainian independent media, and countless human rights organizations against cyber attacks.

By using Deflect.ca nameservers, this site contributes to supporting digital security for vulnerable communities while ensuring resilience against DDoS attacks and censorship.

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 using Deflect.ca nameservers for enhanced DDoS protection:

• Configure Deflect.ca nameservers in your Porkbun domain settings
• Deflect will proxy traffic to Netlify while providing DDoS mitigation
• Alternative: 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)