Set up search

Simply Static included two different search solutions. A file-based local search index based on Fuse.js and API integration with Algolia.

Once activated, Simply Static will generate the search index on each full static export automatically.

Configuration

You should start with the configuration of the search in Simply Static -> Settings Search. First, you need to decide whether or not you want to use the search integration and which solution you want to use: Fuse.js or Algolia.

You should also add your static URL here as it’s the one that replaces the URL of your current dynamic WordPress website in the search results.

Indexing

You can configure what Simply Static should index and display within the search results. It provides some defaults, but you can use pretty much any HTML tag you like.

You can also exclude specific URLs or just patterns from indexing to optimize the search experience for your visitors.

Shortcode (Fuse.js)

When using the Fuse.js integration you get a shortcode that you can use to display the search field with an autocomplete search. This is not the case with Algolia, as you can set it directly to an HTML tag (your current search input for example).

The shortcode will look like this (depending on your theme):

Algolia

To use Algolia for the search integration you need an account at Algolia. The service is free to use as long as you don’t have more than 10.000 searches per month.

Create Index

Once you have created an account at Algolia, go to search and click on “Create Index”. A little box will appear that you can fill out with the necessary information:

API Keys

Next, we have to get the API keys. Click on your profile picture in the top-right -> Settings and then click on “Manage Applications”:

Click on “New Application” and follow the dialog to set up your project:

Once you have finished the setup go into your project and click on “API Keys”:

Add API Keys to Simply Static

Here you can copy the necessary information to fill out the fields in Simply Static -> Settings -> Search -> Algolia:

Add the Application ID, Admin API Key, and Search-Only API Key from your project. Add the name of the index you have used while setting up the index in your Algolia account.

CSS-Selector

You can get the CSS-Selector of your search input field directly from your website. Open your browser console and inspect your current search box. Here is an example of the TwentyTwenty WordPress theme: