Adding Search
Table of Contents
Last updated August 4, 2025.
I just added search functionality to this site using Pagefind, and I'm impressed by how straightforward it was to implement privacy-respecting search on a static site.
Why Add Search?
As my content grows, I wanted visitors to easily find specific topics without clicking through navigation or browsing tags. Search fills that gap by letting people jump directly to relevant content.
Why Pagefind?
Pagefind won because it aligns with my site's philosophy:
- No external dependencies - everything runs client-side
- Privacy-first - no tracking or data sent to third parties
- Minimal JavaScript - only ~10KB when actively searching. I wish I could have found a zero JavaScript solution but the site will degrade gracefully if Javascript is disabled - they will get a message saying search is unavailable if they attempt to use the search functionality. Everything else will be the same. The JavaScrript will only load when using the /search page.
- Easy configuration - automatically indexes during build
Implementation
The setup was simple:
- Install Pagefind:
npm install -D pagefind - Update build script:
npx @11ty/eleventy && npx pagefind --site _site - Create search page with the Pagefind UI component
- Add to navigation between Archive and Work With Me
Technical Details
Pagefind automatically:
- Indexes all HTML content during the build process
- Excludes navigation and footer (via
data-pagefind-ignore) - Focuses on main content areas (via
data-pagefind-body) - Generates search files served statically alongside the site
The search works entirely offline once loaded - no server required.
Performance Impact
- Build time: Adds ~0.07 seconds to the build process
- File size: ~10KB JavaScript (only loads when searching)
- Index size: Minimal - just the content that matters
- Search speed: Near-instant results as you type
User Experience
The search interface is clean and focused:
- Real-time results as you type
- Page titles with relevant excerpts
- Direct links to matching content
- Keyboard navigation support
- Respects system preferences (dark mode, reduced motion)
Why This Matters
Adding search demonstrates that static sites don't have to sacrifice functionality for performance and privacy. You can have fast, secure, user-friendly features without compromising on principles.
Try it out: Search this site for terms like "reviews", "values", or "minimalism".
Resources
- Pagefind documentation
- Eleventy integration guide
- Source code (open source)
The best part? This entire feature addition took less than 30 minutes to implement and perfectly fits the site's existing design and performance goals.
- ← Previous
Adding a /now Page - Next →
Adding a /uses Page