Full-Text Search for Websites Using Algolia

About 593 wordsAbout 2 min

2025-03-12

1. Introduction

I was using local search for my notes, but there were always some contents that couldn't be found. After searching online, I found the third-party search service, Algolia DocSearch, to implement full-text search for my personal website.

2. Algolia

The official VuePress documentation uses Algolia search. The biggest advantage of using Algolia is its convenience: it automatically crawls the website content and builds an index. You only need to apply for an Algolia service, add some code to the website, just like adding analytics code, and then you can have full-text search functionality.

3. Implementing Full-Text Search

1. Apply for the Algolia DocSearch Service

Go to the Algolia DocSearch Apply website, fill in your website address, email, repository address, and other information, and submit the application.

Note: The website address must be public, complete, and stable. If the website is still in the testing phase, the chances of approval are low.

2. Respond to the Confirmation Email

Once your application is approved, Algolia DocSearch will send a confirmation email to the email address you provided in the previous step. You will need to reply confirming that you are responsible for the website's development and maintenance and can modify the website's code.

Reply content: Thanks! I am the maintainer of the website, I can modify the code.

After that, the next day, you'll receive an email containing the appId, apiKey, and indexName, which are needed to configure the website framework:

3. Activate the Search Service

The email from Algolia DocSearch includes the appId, apiKey, and indexName that need to be configured in your website framework. My note template already provides this configuration, and other frameworks are similar:

The email also provides a link to accept the invitation. After setting a password (the account is the email you used when applying), you can log in to Algolia.

After logging in, select the corresponding project, which should have the same name as the indexName:

Click "Go To Crawler" (the blue button in the image above) to enter the crawler backend, which will prompt you to visit the new website:

Click to enter the crawler:

If the number in the red box in the image above is 0, proceed to the next step:

Click "Editor" on the left menu to view and edit the crawler code. Pay attention to the pathsToMatch path in the code (the white box in the image), which is obviously incorrect. It has an extra docs. Change it to the correct website path https://biji.675222.xyz/**:

The reason is that our website homepage is https://biji.675222.xyz/, and the content we want to search is also here.

After making the modification, run a test (as shown in the red box in the image). If data is successfully extracted (as shown in the yellow box in the image), click the "Save" button in the top-right corner to save the code. Then, return to the "Overview" section and click "Restart crawling" in the top-right corner to re-crawl the data.