Static websites are great. They are fast, secure, and easy to deploy. But they are not without their limitations. One of the most common limitations is the lack of search capabilities. In this tutorial we will learn how to add search capabilities to any static site with Algolia.

What is Algolia?

Algolia is a search-as-a-service platform that provides a REST API to index and search data. It is a great solution for adding search capabilities to your static site.

Algolia setup

Creating an account and an application

If not done already we need to create an account with Algolia, then create an application, and create an Index.

There are three pieces of information we need from Algolia to get started:

  • Application ID: This is the unique identifier for your application.
  • Search Key: This is the key used to search the index.
  • Index Name: This is the name of the index we created.

Populating the index

In order to search the index we need to populate it with data, for now we will use the UI on Algolia to populate the index but in a real-world application you would probably want to use the Algolia API to populate the index. On the index page, click Add records then Enter manually and paste in the following data:

[
  {
    "title": "Lorem ipsum dolor sit amet",
    "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eros dolor, rutrum ut euismod quis, sagittis ut massa. Quisque lorem urna, vestibulum eget rutrum et, molestie id arcu. Vestibulum et imperdiet nulla. Proin vulputate dui ultrices enim aliquet bibendum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc sed cursus tortor. Curabitur maximus leo in magna volutpat, ut eleifend nisi vulputate."
  },
  {
    "title": "Praesent vitae risus cursus, maximus dolor sed",
    "description": "Praesent vitae risus cursus, maximus dolor sed, congue risus. Maecenas rhoncus sollicitudin mauris, ut rhoncus diam eleifend quis. Maecenas porttitor dignissim elit, vel tempor arcu sodales quis. Mauris a augue nisi. Sed leo neque, finibus in lobortis et, consectetur a odio. Suspendisse porta dui magna, at suscipit orci elementum vel. Quisque euismod efficitur erat at lobortis. Sed volutpat mi et turpis maximus scelerisque viverra nec justo. Mauris vitae nisl feugiat, finibus est ut, iaculis nibh. Nunc imperdiet, nunc vitae ornare venenatis, tortor eros condimentum urna, et fermentum turpis mauris sollicitudin augue."
  },
  {
    "title": "Mauris vehicula vel nulla scelerisque placerat",
    "description": "Mauris vehicula vel nulla scelerisque placerat. Sed non mauris vitae massa pretium sagittis at at neque. Curabitur quis ligula purus. Praesent in quam ac eros tristique sagittis. Suspendisse tincidunt magna et purus maximus, ac rhoncus lorem commodo. Fusce vitae mattis neque. Vestibulum vestibulum egestas elit, at porttitor neque tempor in. Nullam imperdiet dui sed sem volutpat, eu ultrices tellus tristique. Vestibulum commodo aliquet interdum."
  }
]

Adding search capabilities

Now that we have our Algolia credentials, we can add search capabilities to our site.

Adding algoliasearch-lite and instandsearch.js

We will use algoliasearch-lite to connect to Algolia and instantsearch.js to add search functionality to our site. For this we will add the script tags to our page to load the libraries directly from the CDN. If most cases you would want to use a package manager like npm or yarn to install the libraries, but let’s keep this simple for now.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/algoliasearch-lite.umd.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/instantsearch.production.min.js"></script>

Setting up search markup

The markup is fairly simple, we need two elements, one for the search input and one for the search results. To keep things organized we will place both elements inside a div with a class of search.

<div class="search">
	<div class="search-input"></div>
	<div class="results"></div>
</div>

The final step is to initialize the search, the following code will initialize the search and connect it to our Algolia index and configure instantsearch with our HTML elements:

// Those can be found in your Algolia account. Also don't worry about the security of those keys, they are public.
const ALGOLIA_APP_ID = "XXXXXXXXXX";
const ALGOLIA_SEARCH_KEY = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx";
const ALGOLIA_INDEX_NAME = "xxxxxxxxxxx";

const searchClient = algoliasearch(ALGOLIA_APP_ID, ALGOLIA_SEARCH_KEY);
const search = instantsearch({
	indexName: ALGOLIA_INDEX_NAME,
	searchClient
});

search.addWidgets([
	instantsearch.widgets.searchBox({
		container: ".search .search-input",
		placeholder: "Search",
		showReset: true,
		showSubmit: true,
		showLoadingIndicator: true
	}),
	instantsearch.widgets.hits({
		container: ".search .results",
		templates: {
			item: (hit) => {
				return `
				<div class="result">
					<h3>${hit._highlightResult.title.value}</h3>
					<p>${hit._highlightResult.description.value}</p>
				</div>`;
			},
			empty: "No results found."
		}
	})
]);

search.start();

The final code with some additional styles looks like this:

Conclusion

In this tutorial we learned how to use Algolia to add search capabilities to our site. We learned how to create an Algolia account, create an index and populate it with data. We also learned how to add search capabilities to our site using algoliasearch-lite and instantsearch.js.

If you’re interesting in automating the process of creating an Algolia index and populating it with data, you can check out my other tutorial on how to use the Algolia API to index static sites.