Gatsby starter blog with Lunr.js site search is a blog starter built on Gatsby that adds client-side full-text search to Gatsby's official starter blog.
What is the Gatsby starter blog with Lunr.js?
This template is a fork of Gatsby's official starter blog that integrates Lunr.js search from the outset. It takes Markdown blog post files as input and builds a static Gatsby blog that includes a client-side search index, so visitors can query the full text of posts without any backend search service. The project runs on the Gatsby framework and is hosted as a public repository on GitHub by Luke Whitehouse. A live demo is available at https://gatsby-starter-blog-with-lunr.netlify.com/.
Key Features
This starter combines the standard Gatsby blog experience with a search engine preconfigured for the site's content.
- Lunr.js site search — a client-side full-text search index built into the blog, allowing visitors to search posts without a separate search service.
- Based on the official Gatsby starter blog — inherits the standard blog structure, Markdown support, and Gatsby best practices.
- Quick start for developers — supports the
gatsby newcommand with the repository URL, thengatsby developfor local development. - GraphiQL built in — the development server exposes a GraphQL explorer at
http://localhost:8000/___graphqlfor querying content data. - One-click Netlify deployment — a "Deploy to Netlify" button is included in the README, enabling direct deployment from the GitHub repository.
- Learning resource — the project is intended to teach how Lunr.js works; a companion blog post "Gatsby Site Search with Lunr.js" explains how to build the search from scratch.
Who is it for?
This template suits developers and site owners who want a no-server search solution for a Gatsby blog.
- Gatsby developers who want to add search to a blog without integrating a third-party search service.
- Blog owners who need a simple, self-contained search solution that runs entirely in the browser.
- Developers learning Lunr.js who want a working reference implementation inside a real Gatsby project.
What can you do with it?
Beyond serving a blog, this starter makes it easy to search content and learn Lunr.js integration.
- Add search to a new blog: Start from this template and publish Markdown posts; visitors can search the full text of those posts.
- Study Lunr.js integration: Read the companion blog post and explore the repository to see exactly how the search index is built and queried.
- Deploy quickly: Use the Netlify deploy button to publish a live blog with search in a few clicks.
How does the template work?
Create a new site with the Gatsby CLI by running gatsby new my-blog-starter https://github.com/lukewhitehouse/gatsby-starter-blog-with-lunr. Then run gatsby develop to start the site at http://localhost:8000. Edit files under src/pages/ and the browser updates in real time. The search index is generated during the build from the blog's Markdown content.
FAQ
Is this starter free to use?
Yes, the project is open source and available on GitHub. You can use it as a starting point for any Gatsby blog.
Does the search work without a server?
Yes, Lunr.js runs in the browser, so the search index is served as static files and queries happen client-side.
What do I need to run this locally?
You need Node.js and the Gatsby CLI installed. The README documents the standard Gatsby gatsby develop workflow.
Is there a live demo?
Yes, the repository description points to a Netlify deployment at https://gatsby-starter-blog-with-lunr.netlify.com/.
How is this different from the official Gatsby blog starter?
This starter is a direct fork of the official starter with Lunr.js search integrated and a tutorial post explaining the implementation.
