How to Add Static Site Search Without Databases: A Step-by-Step Guide

Discover how to add powerful search to your HTML website without backend databases using Lunr.js, Algolia, or custom JSON indexes. Perfect for static template users.

Why Add Search to a Static Site?

Picture this: you've built a beautiful portfolio, blog, or documentation site using a premium HTML template from HTMLY's blog collection. The design is stunning, content is rich, but visitors can't find specific information. While static sites are fast and secure, they lack the dynamic search of database-driven platforms like WordPress. Adding static site search bridges that gap—enhancing user experience, improving navigation, and keeping visitors engaged without sacrificing simplicity.

Whether you're running a local city guides blog with hundreds of posts or a product catalog, a reliable search function is no longer optional. In this guide, you'll learn three proven methods to implement search on a static website—no databases required.

The Challenge: No Backend, No Problem

Traditional search relies on a server-side database that indexes content and returns results. Static sites, however, consist only of HTML, CSS, and JavaScript files served directly from a CDN or host. There's no application server to process queries. Fortunately, modern techniques allow us to perform searches entirely on the client side or via external APIs. The key is to create a search index that the frontend can consume.

Option 1: Client-Side Search with JavaScript Libraries

The most popular approach is using a lightweight JavaScript library that builds a search index from your site's content and runs queries in the browser. Lunr.js is a go-to solution: it's small (about 8KB gzipped), fast, and works like a mini search engine. Here's how it works:

  • You provide a JSON array or scrape your pages for text content.
  • Lunr creates an inverted index using tokenization, stemming, and scoring.
  • Searches are performed instantly without network requests.

This method is perfect for sites with up to a few hundred pages. Since the index is loaded with the page, it adds to the initial payload, so it's not ideal for very large collections. For a portfolio site like Voidbeats Music Portfolio with a few dozen projects, Lunr is an excellent fit.

Step-by-Step: Implementing Lunr.js on Your Static Site

Let's walk through setting up Lunr.js on a basic HTML template. We'll create a search index from an array of page data and display results dynamically.

1. Include the library: Add Lunr.js via CDN in your or before closing .

<script src="https://unpkg.com/lunr/lunr.js"></script>

2. Prepare your search data: Create a JavaScript object or JSON file containing the content you want to index. For example:

const documents = [
  {
    "id": 1,
    "title": "Getting Started with HTML Templates",
    "body": "Learn how to customize premium HTML templates for your business...",
    "url": "/post/getting-started"
  },
  {
    "id": 2,
    "title": "Top 10 Landing Page Designs",
    "body": "Discover the best landing page layouts...",
    "url": "/post/landing-pages"
  }
];

If you have many pages, you can generate this JSON automatically with a build script or manually maintain a search index file.

3. Build the index: Initialize Lunr and add each document.

const idx = lunr(function () {
  this.ref('id');
  this.field('title');
  this.field('body');
  
  documents.forEach(function (doc) {
    this.add(doc);
  }, this);
});

4. Set up the search interface: Create an input field and results container in your HTML.

<input type="text" id="search-input" placeholder="Search...">
<div id="results"></div>

5. Execute searches and display results: Add an event listener to the input and run queries against the index.

document.getElementById('search-input').addEventListener('input', function () {
  const query = this.value;
  if (query) {
    const results = idx.search(query);
    const resultsContainer = document.getElementById('results');
    resultsContainer.innerHTML = results.map(result => {
      const doc = documents.find(d => d.id == result.ref);
      return `
${doc.title}
`;
    }).join('');
  } else {
    document.getElementById('results').innerHTML = '';
  }
});

That's it! You now have a fully functional static site search that works offline and doesn't require any backend. Customize the styling to match your template.

Option 2: Third-Party Search Services

If you need more advanced features like typo tolerance, faceted filtering, or instant results, consider a dedicated search service. Algolia, Elasticsearch (via hosted solutions), or Pagefind offer robust APIs that index your site externally. These services are ideal for larger sites or when you need professional search analytics.

Using Algolia for Instant Search

Algolia provides a generous free tier and a JavaScript client that makes integration a breeze. Here's an overview:

  1. Sign up for an Algolia account and create an index.
  2. Upload your data—either manually via dashboard, using an API client, or a crawler—to populate the index.
  3. Add the Algolia InstantSearch widget to your page.

This approach offloads all search processing to Algolia's infrastructure, keeping your site lightning-fast. However, it introduces an external dependency and may incur costs if your usage exceeds the free plan.

Option 3: Build a Simple Search Index with JSON

If you prefer a minimal, dependency-free solution, you can create a plain JSON file that maps keywords to page URLs. This is the most basic form of static site search and works well for very small sites.

For instance, create a search.json file like this:

[
  {
    "terms": ["html", "template", "guide"],
    "url": "/guide.html"
  },
  {
    "terms": ["business", "landing", "page"],
    "url": "/business-landing.html"
  }
]

Then, use JavaScript to fetch this JSON and check if the user's query matches any term. While primitive, it requires zero libraries and can be implemented in minutes.

Choosing the Right Approach

Your choice depends on the scale of your site and desired user experience:

  • Small sites (<50 pages): Lunr.js or JSON index offer excellent performance without external services.
  • Medium sites (50–500 pages): Lunr is still viable if you compress the index; or use Pagefind, which creates a static search bundle during build.
  • Large sites (500+ pages): Algolia or similar services are recommended for speed and advanced features.

Consider the maintenance effort: with Lunr, you must rebuild the index when content changes; with services, the index updates automatically if you set up crawling.

Optimizing Your Static Site Search

Regardless of the method, keep these tips in mind:

  • Index only relevant content: Avoid bloating the index with navigation, footer, or boilerplate text. Use data attributes or a dedicated content field.
  • Implement debouncing: For client-side search, throttle user input to prevent excessive computations and improve responsiveness.
  • Provide clear feedback: Show a loading state if you're fetching an external index, and display "No results found" when appropriate.
  • Optimize for mobile: Ensure the search input and results are touch-friendly.
  • Remember accessibility: Add ARIA labels and keyboard navigation support.

Conclusion

Adding static site search to your HTML website is simpler than ever. Whether you opt for a lightweight library like Lunr.js, a hosted service like Algolia, or a custom JSON solution, you'll dramatically improve the usability of your template-based site. Start with the method that matches your technical comfort and scale, and don't let the lack of a database hold you back. With these tools, your static site can offer a dynamic, app-like experience—keeping visitors engaged and coming back for more.