0%

Hexo blog에서 Algolia 검색 적용하기

몇 가지 문제가 있어서 일부 내용 수정 후 재 포스팅합니다.

Hexo blog를 간만에 업데이트 하다가..

너무 오랜만에 포스팅을 해본다.
다른 곳으로 이직을 하게 되어 다니던 회사는 퇴사를 하고 이제 약 1주일 정도 시간이 남아서 여태 쌓여있던 블로그 포스팅 내용을 정리할 겸 글을 업데이트 한다.

내가 사용하는 Hexo Theme 중 Archer 업데이트를 안해서 한번 업데이트 하려다가 만드신 분 데모 사이트에서 아주 신박한 것을 보게 되었다.

사실 이 블로그를 사용하기 전에는 티스토리네이버블로그를 사용하였는데 거기는 포스트 검색 등 각 편의 기능이 잘 되어 있어 편리했다.
그런데 Hexo는 다 직접 개발해야 해서 이런 부분이 불편했는데…검색이 되다니..
사실 Tag나 Category 기능은 있으나 마나한 기능인것 같…

무튼 그래서 나도 이번 기회를 통해 Algolia를 적용해보기로 했다.

아참…이번 포스팅부터는 경어체 -> 구어체 로 변경하였다. (쓰다보니 이게 더 편해서?)


사전 환경

먼저..
현재 작업을 하는 것은 Mac OS 환경이고, Hexo의 Archer Theme 기준이다.


Algolia 가입, 그리고 필요 정보 가져오기.

Algolia에 대해서는 공식 홈페이지에서 알아보고…
가입을 하여 API-Key, applicationId, indexName 세 가지 정보를 얻어야 한다.
일단 가입을 하자.

그리고 나서 메인 상단의 Dashboard 항목으로 이동하자.
먼저 indexName 을 만들어 주자.

위 사진에서 처럼 사이드 메뉴의 Indices 항목을 클릭하면 index 정보들이 나오고 여기서 우측 상단의 new Index 버튼을 클릭하자.

그럼 위 사진에서 처럼 인덱스 이름을 적는 다이얼로그가 뜨는데 적당히 적어둔다.
예를 들면…my_blog 이런 식으로?

그 다음에는 API-Key다.

사이드 메뉴의 API Keys 탭을 클릭하면 Application ID 정보를 확인할 수 있고, Admin API Key 정보를 알아둔다. (자물쇠 버튼 클릭하면 보인다.)


Hexo 플러그인 설치 및 적용하기

먼저 아래와 같은 플러그인을 설치해준다.

1
2
3
npm install --save hexo-algolia
npm i hexo-generator-json-content --save
npm i --save hexo-wordcount

그리고 나서 hexo 디렉토리의 _config.yml 파일을 열람한다.

맨 하단에 아래와 같은 정보를 추가해준다.

1
2
3
4
5
algolia:
applicationID: Your applicationId
apiKey: Your Key (아까 admin key)
indexName: indexName (아까 획득한 것)
chunkSize: 5000

그리고 Mac의 터미널을 열고 아래의 명령어를 수행해준다.

export HEXO_ALGOLIA_INDEXING_KEY=’아까 획득한 API-key’
(만약 위에 것이 안될 경우 아래의 것으로도 해보자)
export HEXO_ALGOLIA_INDEXING_KEY=아까 획득한 API-key 에 admin-key 사용

이렇게 입력하고 난 뒤 아래 명령어를 수행하면 인덱싱 작업이 진행된다.

hexo algolia

이렇게 완료된 뒤, archer 테마의 _config.yml 값 중 algolia_search의 enable 값을 true로 설정해준다.

그리고 나서 실행을 해주면…

위와 같이 잘 동작한다~