11ty Serverless Search
11ty Serverless Search is an Eleventy starter project that demonstrates how to build a site search feature using the 11ty Serverless plugin, combining local content with external API data. It is created by Stephanie Eckles and published as a public repository under the 11ty-starter topic.
What is 11ty Serverless Search?
This template is a working example of adding on-demand search to an Eleventy static site. It takes local markdown posts and external JSON data from a dev.to profile, merges them into a custom collection, and serves search results through the 11ty Serverless plugin. The output is an HTML page rendered on request, so no pre-generated search index or third-party search service is required. It runs on any host that supports 11ty Serverless, such as Netlify.
Key Features
- 11ty Serverless integration — Uses the official 11ty Serverless plugin to render search results dynamically, enabling full-text search over site content without a client-side search library.
- Hybrid local and external data — Merge local post data with external JSON fetched from a dev.to profile to search across both sources in one query.
- Prebuild data generation — A Node script runs before start/build to generate local data as an array of post objects, working around 11ty Serverless's current limitation with typical collections.
- Custom 11ty filter — Search logic is implemented as an 11ty filter that scans the combined collection and returns matching results.
- Development server —
npm startruns Eleventy with hot reload at localhost:8080, including reload on Sass changes. - Production build —
npm run buildoutputs minified, autoprefixed CSS, and the command can be used as the Publish command on Netlify. - Sass and PostCSS — Styles are built with Sass and processed with PostCSS for autoprefixing.
- Companion resources — The README links to a11y-color-tokens for accessible color palettes, an egghead course for learning Eleventy, social-image generation plugin, and the full-featured 11ty Netlify Jumpstart.
Who is it for?
- Eleventy developers who want to understand how to use the Serverless plugin for dynamic features on a static site.
- Blog and documentation site owners who need search over local content plus external sources without installing a dedicated search engine.
- Learning-focused developers who want to study how to combine local data with external API calls inside an 11ty serverless function.
What can you do with it?
- Add site search to a personal blog: Index your markdown posts and show results on a serverless-rendered search page.
- Combine external content with local pages: Pull a list of articles from a dev.to profile and make them searchable alongside local posts.
- Explore 11ty Serverless patterns: Use this example as a base to build other serverless features like dynamic pages, form handling, or API-backed pages.
How does it work?
The project runs a prebuild or prestart Node script that serializes local post data into a JSON array. When a search query is requested, the 11ty Serverless plugin triggers a function that builds a custom collection from this local data plus external JSON fetched at runtime from a dev.to profile. The combined collection is passed through an 11ty filter that matches the query against the post content and returns a rendered results page.
FAQ
Does 11ty Serverless Search require Netlify?
The template is designed to work with 11ty Serverless, which can be deployed to hosts that support serverless functions; Netlify is explicitly mentioned as a deployment target, and the production build command is suitable as a Netlify Publish command. Other hosts with serverless support may also work.
What data sources does the search include?
The search covers local markdown posts that are processed by the prebuild script, plus external content fetched from Stephanie Eckles' dev.to profile. The two sources are merged into one collection before filtering.
How is the search implemented?
Search is done server-side via an 11ty filter. When a request comes in, the serverless function collects the local and external data, applies the filter to find matching items, and returns an HTML page with the results.
Is there any client-side JavaScript required?
The search results are rendered by the 11ty Serverless plugin on the server, so the page is delivered as pre-rendered HTML. The repository does not include a client-side search library; the filtering logic lives entirely in the 11ty filter.
