Use algolia in your website
Tags: algolia
Published: 2021-09-14 10:22:33

In this post i will share  **How to use algolia for free plan**. so let's starting!!!

[here](https://doc.tigerzh.com) is my document website.

## Why aligolia

Vue & React official used [algolia](https://www.algolia.com/) it's free and open source! 

<div style="display:flex">
<img src='https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lmudxpxrak1uhin75jnx.png'/>
<img src='https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8eqgl67qmhvnwwtd4ulp.png'/>
</div>

DocSearch is split into crawler and front-end library.

Crawling is handled by the Algolia Crawler, which runs weekly by default, and you can then trigger new crawls yourself and monitor them directly from the Crawler interface, which also provides a live editor where you can maintain your configuration .
The front-end library is built on top of Algolia Autocomplete and provides an immersive search experience through its modals.

It may be because of free users, I did not succeed in finding my algolia registered application on the crawler management background, so I use the docker service to crawl the crawler and upload the data to the algolia Data Sources database

**practice process record**

- Apply for a registered account
- new application
- Create a new Indices data table

crawler service
Use docker directly here

Download the docker image docker pull algolia/docsearch-scraper
Start the dokcer crawler service according to the configuration
.env file
```shell
APPLICATION_ID=YOUR_APPLICATION_ID
API_KEY=YOUR_API_KEY
```

config.json The following configurations are just demos. Some APIs have been changed or discarded. Please refer to the configuration. New and old versions of APIs are discarded or changed and configuration reference documents
It is recommended to set up a site map here, which will capture more comprehensive websites, schedule regularly by updating the site map and setting actions, execute crawler tasks, and update index data.

```json
{
   "index_name": "Home",
   "start_urls": [
     "URL 1",
     "url n"
   ],
   "stop_urls": [],
   "maxDepth": 2,
   "aggregateContent": true,
   "selectors": {
     "lvl0": {
       "selector": "h1",
       "global": true,
       "default_value": "Documentation"
     },
     "lvl1": "h1",
     "lvl2": "h2",
     "lvl3": "h3",
     "lvl4": "h4",
     "lvl5": "h5",
     "text": "p, li, code"
   },
   "js_render": true,
   "js_wait": 4
}
```

Execute the path and start the docker service

```shell
docker run -it --env-file=your file path/.env -e "CONFIG=$(cat your file path/config.json)" algolia/docsearch-scraper
```
**follow my step:**

1. add new line in you `package.json`

```json
    "crawler": "node crawler.ts"
```
2. create `crawler.ts` in you project root dir:
```javascript
const fs = require('fs')
const child_process = require('child_process')
const data = require('./.vitepress/dist/hashmap.json')
const envPath = `${__dirname}/.env`
const configPath = `${__dirname}/config.json`

const urls = Object.keys(data).map((key) => {
  const url = key.split('_').join('/').split('md').join('html')
  return `https://doc.tigerzh.com/${url}`
})

const config = JSON.parse(fs.readFileSync('config.json', 'utf-8'))
config.start_urls = urls

fs.writeFileSync('config.json', JSON.stringify(config))
console.log(
  'algolia done, please exec docker command',
)
console.log(`docker run -it --env-file=${envPath} -e "CONFIG=$(cat ${configPath})" algolia/docsearch-scraper`)
```
3.done

and then you can running docker and exec commend