brennan.casa Bookmarks, links, and stream-of-consciousness journaling https://brennan.casa en-us Setting up this secondary site https://brennan.casa/notes/first-note/ Sat, 18 Jul 2026 00:00:00 GMT Just setting up brennan.casa as a secondary site for more casual content. Bookmarks, links, and stream-of-consciousness notes. My main site brennan.day will continue to be for more polished essays and writing. This site uses 11ty with a brutalist design approach. Semantic HTML, minimal CSS, good contrast, and accessibility first. Blog Workflow Part 1: Project Structure https://brennan.casa/notes/blog-workflow-part-1/ Sun, 19 Jul 2026 00:00:00 GMT This is Part 1 of a 3-part series documenting the blog workflow. This part covers the project structure, template architecture, and semantic HTML structure. Project Structure brennan.casa/ ├── src/ # Source directory (input for 11ty) │ ├── _data/ # Global data files │ │ └── metadata.json # Site metadata (title, description, URL) │ ├── _includes/ # Reusable template components │ │ ├── layouts/ # Page layout templates │ │ │ ├── base.njk # Base HTML layout │ │ │ └── post.njk # Blog post/note layout │ │ └── partials/ # Reusable partials │ │ ├── head.njk # HTML head (meta tags, CSS, RSS) │ │ ├── header.njk # Site header with logo and nav │ │ ├── nav.njk # Navigation menu │ │ └── footer.njk # Site footer │ ├── bookmarks/ # Bookmarks section │ │ └── index.njk # Bookmarks listing page │ ├── css/ # Stylesheets │ │ └── styles.css # Main stylesheet │ ├── favicon/ # Favicon files (copied to output) │ ├── notes/ # Notes section │ │ ├── index.njk # Notes listing page │ │ └── *.md # Individual note files │ ├── posts/ # Posts section │ │ └── *.md # Individual post files │ ├── feed.njk # RSS feed template │ └── index.njk # Homepage ├── _site/ # Generated output (gitignored) ├── .eleventy.js # 11ty configuration ├── package.json # Node.js dependencies and scripts └── .gitignore # Git ignore rules Template Architecture & Modularization The site uses a hierarchical layout system with Nunjucks templates: base.njk: The main layout that provides the HTML structure Includes partials/head.njk for the <head> section Includes partials/header.njk for the site header Includes partials/footer.njk for the site footer Renders {{ content | safe }} for the main content area post.njk: Extends base.njk for blog posts and notes Sets layout: layouts/base.njk in frontmatter Adds article wrapper with title and date Renders the Markdown content Partials are reusable components included across multiple pages: head.njk: Meta tags, CSS links, favicon links, RSS feed, Open Graph and Twitter card metadata header.njk: Site logo, title, and navigation nav.njk: Navigation menu (Bookmarks, Notes, RSS, brennan.day) footer.njk: Copyright and license information Content is organized into two main collections: Posts: Located in src/posts/, accessed via collections.posts Notes: Located in src/notes/, accessed via collections.notes Semantic HTML Structure Layout Elements: <div class="wrapper">: Container for header, main, and footer <main>: Primary content area (page-specific content) <header>: Site header with logo and navigation <nav>: Navigation menu with unordered list of links <footer>: Site footer with copyright and license info Content Elements: <article>: Self-contained content (blog posts, notes) <h1>: Main heading (article title, site title in header) <h2>: Section headings (in index pages) <p>: Paragraphs <small>: Smaller text (dates, footer license info) <ul>: Unordered lists (navigation, content listings) <li>: List items <a>: Hyperlinks <img>: Images with alt text for accessibility Semantic Benefits: Screen readers can navigate by semantic elements. And the clear document structure helps maintainability for future development. Markdown to HTML Example Here's how a simple Markdown file transforms into semantic HTML through the 11ty build process: Input: Markdown File (src/notes/example.md) --- layout: layouts/post.njk title: Example Note date: 2026-07-19 tags: [note] --- This is a sample note to demonstrate the semantic HTML structure. ## Key Points - First important point - Second important point - Third important point The site uses semantic elements for better accessibility. Output: Generated HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Example Note</title> <link rel="stylesheet" href="/css/styles.css"> </head> <body> <div class="wrapper"> <header> <div class="header-content"> <a href="https://brennan.casa"> <img src="/favicon/android-chrome-512x512.png" alt="brennan.casa logo" class="site-logo"> <h1>brennan.casa</h1> </a> </div> <nav> <ul> <li><a href="/bookmarks/">Bookmarks</a></li> <li><a href="/notes/">Notes</a></li> <li><a href="/feed.xml">RSS</a></li> </ul> </nav> </header> <main> <article> <h1>Example Note</h1> <p><small>July 19, 2026</small></p> <p>This is a sample note to demonstrate the semantic HTML structure.</p> <h2>Key Points</h2> <ul> <li>First important point</li> <li>Second important point</li> <li>Third important point</li> </ul> <p>The site uses semantic elements for better accessibility.</p> </article> </main> <footer> <p>© 2026 brennan.casa</p> </footer> </div> </body> </html> Next Steps Continue to Part 2: Build Process & Deployment to learn about the build process, deployment workflow, and server configuration. Blog Workflow Part 2: Build Process https://brennan.casa/notes/blog-workflow-part-2/ Sun, 19 Jul 2026 00:00:00 GMT This is Part 2 of a 3-part series documenting the blog workflow. This part covers the build process, deployment workflow, and server configuration. Build Process 11ty Configuration (.eleventy.js) The .eleventy.js file configures the build process: Passthrough Copy: CSS and favicon files are copied to output without processing Custom Filters: dateDisplay: Formats dates in "Month Day, Year" format rssDate: Formats dates for RSS feeds (UTC string) stripHtml: Removes HTML tags from content Collections: posts: Collects all Markdown files in src/posts/ notes: Collects all Markdown files in src/notes/ Directory Configuration: Input: src/ Output: _site/ Build Commands # Install dependencies npm install # Build the site (generates _site/ directory) npm run build # Start local development server with hot reload npm run serve # Deploy to NFS server npm run deploy Deployment Workflow Local Development Edit content in src/ directory (Markdown files, Nunjucks templates, CSS) Run npm run serve to start local development server View changes at http://localhost:8080 11ty watches for file changes and automatically rebuilds Building for Production Run npm run build to generate static HTML in _site/ The build process: Processes Nunjucks templates Converts Markdown to HTML Applies layouts and partials Copies CSS and favicon files Generates RSS feed Creates the complete static site in _site/ Deploying to NFS Server The npm run deploy command uses rsync to sync the _site/ directory to the NFS server: rsync -avz --delete _site/ brennanbrown_bren@ssh.nyc1.nearlyfreespeech.net:/home/public/ -a: Archive mode (preserves permissions, times, symbolic links) -v: Verbose output -z: Compress data during transfer --delete: Delete files on server that don't exist in _site/ Server Details SSH Host: ssh.nyc1.nearlyfreespeech.net Username: brennanbrown_bren Document Root: /home/public/ URL: https://brennan.casa Server Type: Apache 2.4 Static Content (No PHP, CGI, or Daemons) Deployment Workflow The deployment workflow is: Make changes to source files in src/ Run npm run build to generate static HTML Run npm run deploy to sync to NFS server Changes are live at https://brennan.casa Next Steps Continue to Part 3: Content Creation & Git Workflow to learn about creating content and the Git workflow. Return to Part 1: Project Structure & Architecture for information about the project structure and template architecture. Blog Workflow Part 3: Making Posts https://brennan.casa/notes/blog-workflow-part-3/ Sun, 19 Jul 2026 00:00:00 GMT This is Part 3 of a 3-part series documenting the blog workflow. This part covers making posts and the Git workflow. Making Posts Create a new Markdown file in src/notes/ (e.g., new-note.md) Add frontmatter:--- layout: layouts/post.njk title: Your Title date: YYYY-MM-DD tags: [note] --- Write content in Markdown The note automatically appears in the notes index and homepage Modifying Templates Edit Nunjucks templates in src/_includes/ Changes apply to all pages using those templates Layout changes affect all pages using that layout Partial changes affect all pages including that partial Git Workflow The _site/ directory is gitignored since it's generated during build. Only source files are tracked in Git. When deploying: Commit changes to source files Build locally with npm run build Deploy with npm run deploy The generated _site/ is synced to the server The workflow from making posts to deployment: Create or edit content in src/ directory Test locally with npm run serve Commit changes to Git Build with npm run build Deploy with npm run deploy Changes are live at https://brennan.casa Previous Parts Return to Part 1: Project Structure & Architecture for information about the project structure and template architecture. Continue from Part 2: Build Process & Deployment for information about the build process and deployment workflow. Blog Workflow Part 4: Hosting Options https://brennan.casa/notes/blog-workflow-part-4/ Sun, 19 Jul 2026 00:00:00 GMT This is Part 4 of a 4-part series documenting the blog workflow. This part compares different hosting options: NearlyFreeSpeech.net, Netlify, and self-hosting. When choosing where to host your static site, you have three main options. Each has different trade-offs in cost, features, security, and control. NearlyFreeSpeech.net (NFS) NFS is a pay-as-you-go hosting provider that offers full SSH access and a managed environment. Cost Non-Production: $0.01/day (for personal sites, experiments). Storage: $1.00 per GiB-month. Bandwidth: Included in base charge (1 GiB/day for non-production, 10 GiB/day for production). Minimum deposit: $0.25 to get started. View detailed pricing | Pricing estimator Features Full SSH & SFTP access. PHP, Python, Node.js, Ruby, and 25+ programming languages. MySQL (MariaDB) support. Custom control panel. Managed environment with security updates. Automatic backups included. No long-term contracts. Learn more about NFS hosting Pros Extremely cheap for small static sites. Full SSH access gives you complete control. Managed environment (they handle OS updates, security patches). Pay only for what you use. Reliable since 2002. Your content lives on their servers but you have full access. Cons Costs money (even if very little). No built-in CI/CD or git integration. No built-in forms or webhooks. Requires manual deployment (or you set up your own automation). No free tier. Best For People who want full control via SSH. Those comfortable with command-line tools. Sites that need custom server configurations. People who value independence and are willing to pay a small amount for it. Netlify Netlify is a modern hosting platform focused on static sites with built-in CI/CD, forms, and other developer-friendly features. Cost Free: $0 forever (300 credits/month). View detailed pricing | How credits work Features Automatic builds from Git. Deploy previews for every branch/PR. Built-in forms (free and unlimited). Webhooks and build hooks. Global CDN (100+ edge locations). Serverless functions. Edge functions. Automatic HTTPS. DDoS protection. Password protection. Analytics and monitoring. Learn about Netlify platform | Forms documentation Pros Generous free tier. Excellent developer experience. Built-in CI/CD and git integration. Forms and webhooks work out of the box. Global CDN for fast performance. Automatic HTTPS and security. Great for team collaboration. Cons No SSH access to servers. Your content lives in their infrastructure. Vendor lock-in (harder to migrate away). Credits system can be confusing. Less control over server configuration. Privacy concerns (they can see your traffic). Best For Teams and developers who want convenience. Sites that need forms and webhooks. Projects with frequent deployments. People who want modern tooling and don't need SSH access. Self-Hosting Self-hosting means running your own server at home or on a VPS you control. Cost Hardware: One-time cost (repurposed computer: $0-500, dedicated server: $200-2000). Electricity: $5-20/month depending on hardware. Internet: You already pay for this. Domain: $10-15/year (optional). VPS alternative: $5-20/month (DigitalOcean, Linode, etc.). Features Complete control over everything. No vendor lock-in. Can run any software you want. Your data stays on your hardware. Unlimited storage (limited only by your hardware). No monthly fees (after initial hardware cost). Security Risks Self-hosting introduces significant security challenges. Port forwarding exposes your server directly to the internet, every open port is another attack vector. Your home IP address is exposed, making you a target for DDoS attacks. Increased attack surface means you're responsible for all security. No centralized security management means each service needs individual hardening. AI-powered scanners probe infrastructure within minutes of going online.Supply chain compromises can affect your dependencies. Ransomware crews now target small organizations including homelabs. Learn about port forwarding risks | Practical cybersecurity for self-hosters Privacy Concerns Your home IP address is public. ISP can see all your traffic. No built-in DDoS protection. You're responsible for all data protection. Potential legal liability for whatever you host and if your server is compromised. Security Requirements If you self-host, you must implement: Reverse proxy with HTTPS (Let's Encrypt) Firewall allowing only necessary ports (80/443) fail2ban or similar intrusion detection SSH key authentication (disable password auth) No database or management ports exposed Monitoring and logging Security checklist for self-hosters | Secure gateway setup Alternatives to Port Forwarding Instead of exposing ports directly: Tailscale: Mesh VPN for personal access, encrypted, no open ports, but not for public services. WireGuard: Self-hosted VPN, full control, but requires one port forwarded. Learn about Cloudflare Tunnel alternatives Pros Complete independence and control. No monthly fees (after hardware). Your data stays on your hardware. Can customize everything. No vendor lock-in. Privacy (if configured correctly). Cons Significant security responsibility. Requires technical expertise. Hardware costs and electricity. Your home IP is exposed (unless using tunnel). No built-in DDoS protection. You handle all maintenance and updates. Single point of failure (your hardware). Best For People with strong technical skills. Those who value complete independence above all else. People willing to invest time in security. Privacy-conscious individuals who understand the trade-offs. Self-Hosting Guide For a guide on setting up your own homelab on inexpensive hardware, see Homelab For the Beginner: You Can Self-host Your Own Server on $50 Hardware by me. This guide covers finding hardware, setting up the OS, configuring SSH, Docker, monitoring, backups, and deploying services step-by-step. Summary Comparison Feature NFS Netlify Self-Hosting Cost $0.01-0.50/day Free - $20+/month $0-20/month (hardware/electricity) SSH Access ✓ Full ✗ None ✓ Full Git Integration Manual setup ✓ Built-in Manual setup Forms Manual setup ✓ Built-in (free) Manual setup Webhooks Manual setup ✓ Built-in Manual setup CDN Basic ✓ Global (100+ locations) Manual setup Security Managed Managed Your responsibility DDoS Protection Basic ✓ Included Manual setup Control High Medium Complete Privacy Medium Low (vendor sees traffic) High (if configured correctly) Learning Curve Medium Low High Maintenance Low Very Low High Recommendation Choose based on your priorities: Choose NFS if you want SSH access, control, and are willing to pay a small amount for a managed service. Choose Netlify if you want convenience, modern tooling, and don't need SSH access. Choose Self-Hosting if you have strong technical skills, value complete independence, and are willing to invest time in security. For most people starting out, I recommend beginning with Netlify's free tier to learn the basics, then moving to NFS if you need SSH access or want more control. Self-hosting is best reserved for those with significant technical expertise and a strong commitment to security. Previous Parts Return to Part 1: Project Structure for information about the project structure and template architecture. Continue from Part 2: Build Process for information about the build process and deployment workflow. Continue from Part 3: Making Posts for information about making posts and the Git workflow. Blog Workflow Introduction https://brennan.casa/notes/blog-workflow/ Sun, 19 Jul 2026 00:00:00 GMT This blog is built with 11ty (Eleventy), a static site generator that transforms Nunjucks templates and Markdown files into a static HTML site. The site is deployed to a NearlyFreeSpeech.net (NFS) server via rsync. This workflow provides a simple and efficient process for maintaining a static blog: Edit content locally in Markdown and Nunjucks Build with 11ty to generate static HTML Deploy via rsync to NFS server No server-side dependencies or database required Fast, secure, and easy to maintain Who This Guide Is For This documentation is for people who want to maintain their own independent website with full control over their content. It's inspired by the Hardcore IndieWeb philosophy by Adam Newbold, which emphasizes that if your content doesn't primarily exist on your own hard drive, you don't fully control it. For Absolute Beginners If you're new to web development and want the simplest possible approach, I recommend starting with Adam's Hardcore IndieWeb guide. His approach uses only: A text editor A file transfer tool A web host You'll write HTML directly and upload files manually. This is the most straightforward path to complete independence and requires no technical dependencies. For Those Comfortable with Command Line Tools If you're comfortable with the command line and want to add some automation while maintaining independence, this 11ty workflow is for you. It adds: Static site generation for automatic HTML building Markdown support for easier content authoring Template system for consistent layouts Automated deployment via rsync You still maintain full control, as your content lives on your hard drive in Markdown files, and the generated HTML is fully portable. Part 1: Project Structure Covers the project structure, template architecture, and semantic HTML structure. Read Part 1 → Part 2: Build Process Covers the build process, deployment workflow, and server configuration. Read Part 2 → Part 3: Making Posts Covers making posts and the Git workflow. Read Part 3 → Part 4: Hosting Options Compares NearlyFreeSpeech.net, Netlify, and self-hosting for your static site. Read Part 4 →