Devvoo

앞으로 포스팅은 velog에…
https://velog.io/@root-devvoo/posts

📝 들어가며

다른 분들의 포스팅을 참고하여 github.io 블로그를 커스터마이징해서 만족스럽게 사용하고 있던 중 블로그 내 검색 기능도 적용하고 싶어서 구글링을 해보았다.

minimal-mistakes 테마에서는 lunr(default), algolia, google 등의 총 3가지 기반의 검색 기능을 지원하는데, 그 중 Algolia기반의 검색 기능이 가장 좋다는 것을 접하고 적용 방법에 대해 또 찾아보았다.

잘 찾아지지 않던 중 한 포스팅을 발견하였고, 그 글을 참고해서 검색 기능을 잘 적용시켰다!
(참고한 글 : 깃블로그에 검색 기능을 추가해보도록 하자)

그러나, 최근 글이 아니어서 다소 헤매면서 했다.
그래서, 참고한 글을 바탕으로 적용했던 과정들을 이 글에 최신화 시켜보고자 한다.

⚙️ 과정

검색 기능 추가를 위해 총 5단계에 걸쳐서 진행된다.

  1. Algolia 가입 & API 발급
  2. _config.yml 파일 수정
  3. Gemfile 파일 수정
  4. Travis CI 가입 및 적용
  5. Rakefile 수정

Algolia 가입 & API 발급

Algolia(https://www.algolia.com/) 사이트에 들어갑니다.

image

우측 상단 Start free 버튼을 눌러줍니다.

image

이메일 주소로 가입하거나, 구글, 깃허브 계정을 연동해서 가입할 수 있습니다.
(여기서는 구글 계정을 연동해서 진행)
(개인적으로 했을 때는 깃허브 계정을 연동해서 진행했습니다. 깃허브 계정을 연동해서 하시는게 아마 가장 편하실 거라고 생각됩니다.)

연동할 구글 계정을 누르면 아래와 같은 화면이 뜹니다.

image

first name에 자신의 성, Last name에 이름을 영문으로 넣어주고,
저는 그냥 Backend 개발자이고, Algolia를 그냥 테스트하기 위해서 사용한다고 넣어주었습니다.
(각자에 맞게 알아서 작성하고) Domain 란에는 자신의 github.io 블로그 주소를 입력해주면 됩니다.
그리고, 검색 데이터 서버가 자동으로 일본으로 잡혀있습니다.
(양식 하단에 있는 change를 누르면 바꿀 수 있는데 우리나라 근처에 홍콩, 일본, 싱가폴 정도 밖에 없음)
저는 그냥 바꾸지 않고 진행했습니다.

Complete signup 버튼을 클릭합니다

image

좌측이 선택되있는 상태로 Continue 버튼을 누릅니다.

image

Skip to dashboard 버튼을 클릭합니다.
아래와 같은 화면이 나옵니다.

image

좌측 하단 중간에 표시한 버튼을 클릭합니다.

image

indices 클릭

image

들어가면 처음에는 이렇게 아무것도 없을 것입니다.
Create Index를 눌러 새로운 인덱스를 추가해줍시다!

image

먼저 Index name을 입력해야하는데, 띄어쓰기는 “_“(언더바)로 구분하라고 합니다.
저는 github_blog 라고 했습니다. 작성했으면 Create 버튼을 눌러줍니다.

그리고, Algolia에서 가장 중요한 API Keys를 확인하러 갑니다.

image

좌측 하단 톱니바퀴 모양을 클릭합니다.

image

API Keys 클릭

image
(보안을 위해 마스킹 처리했습니다)

이 페이지를 따로 켜두고, _config.yml 파일에 작성해줄겁니다.
(뒷 부분들에서도 필요하니 적용하는 과정 동안에는 이 창을 잘 띄워놓아주세요)

_config.yml 파일 수정

image
저는 편의상 VS Code 로컬 환경에 셋팅해놓고 작업했습니다

minimal mistakes 테마를 사용하시는 분들은 _config.yml 파일에 들어가셔서 search를 찾아보시면 기본이 false로 되어있는데, 이것들을 true로 변경해줍니다.
search_full_content는 전체 내용도 포함해서 검색해주는 것으로 이것도 true로 변경합니다.
그리고, search_provider는 algolia로 입력해주세요.

그 다음, 위와 같이 아까 띄워놨던 API Keys 창을 보면서 algolia 부분을 설정해줘야합니다.

image

  • application_id는 API Keys 화면에서 맨 위에 있는 Application ID를 입력
  • index_name은 Indices 메뉴에서 만들었던 인덱스 이름을 입력 (제 경우는 github_blog)
  • search_only_api_key는 두번째에 있는 Search-Only API Key를 입력

(위 이미지를 참고해주세요!)

Gemfile 수정

Gemfile은 최상단 폴더에 있는 Gemfile 파일입니다.
Gemfile에 아래와 같이 내용을 추가해줍시다.

image

source "https://rubygems.org"

gem "github-pages", group: :jekyll_plugins

gem "tzinfo-data"
gem "wdm", "~> 0.1.0" if Gem.win_platform?

# If you have any plugins, put them here!
group :jekyll_plugins do
  gem "jekyll-paginate"
  gem "jekyll-sitemap"
  gem "jekyll-gist"
  gem "jekyll-feed"
  gem "jemoji"
  gem "jekyll-include-cache"
  gem "jekyll-algolia"
end

저는 위 코드와 똑같이 작성해주었습니다. 사람마다 다를 수 있다고 하니 참고하세요!!!

Travis CI 가입 및 적용

Travis CI 회원가입을 위해 Travis CI 사이트에 접속해줍니다.

image

메인 화면에서 Start Today 버튼을 눌러줍니다.
(만약 안보이실 경우 메인화면 아래로 조금 스크롤 내려보시면 있는 Sign Up 버튼 누르시고 회원가입 창으로 들어가시면 됩니다!)

image

깃허브 계정으로 연동해서 가입하기 버튼을 눌러줍니다.
깃허브 계정과 연동하는 창이 뜨고, 연동을 시켜줍니다.
(반드시 검색기능을 추가할 github.io 블로그 레파지토리가 존재하는 깃허브 계정이어야 합니다.)
그럼 연동된 깃허브 계정과 연결된 메일로 github에서 확인메일이 하나 옵니다.
메일을 열어 링크에 들어가서 확인해보면

image

위와 같이 연결되었음을 확인할 수 있습니다. 확인했으면 이 창은 닫으면 됩니다.

그와 동시에 Travis CI에서도 환영한다는 메일과 함께 계정에 대해 Confirm을 요청하는 메일도 아래와 같이 올겁니다.

image

버튼을 눌러 Confirm 해줍니다. 이렇게 해서

image

위와 같이 activate 됐다는 메일까지 받으면 확실히 회원가입이 된 것입니다.

image

그럼 이 화면에서 settings를 눌러줍시다.

(제 깃허브 아이디는 포스팅을 위해 새로 만든 것이므로 신경쓰지말고 무시하세요!!!)

image

누르면 바로 Repositories 부분의 화면이 위와 같이 나올겁니다.
여기서, Activate 버튼을 눌러줍시다!

그리고 아래와 같이 창이 뜨면

image

Only select repositories를 눌러주고, Select repositories를 클릭하여 자신의 github.io 블로그 저장소를 선택해줍니다.

image

확실히 선택된 것을 확인했으면 Approve & Install 버튼을 눌러줍니다.

그러면 시간이 지나고 아래와 같이 저장소가 나옵니다.

image

저장소 이름 우측에 있는 settings를 눌러줍니다.

image

저는 이렇게 4가지를 활성화시켜줬습니다.

image

그리고 여기서 가장 중요한 것!!! Environment Variables에 ALGOLIA_API_KEY를 추가해주는 겁니다.
Name 텍스트 박스에 ALGOLIA_API_KEY 라고 입력해주시고,
Value는 아까 유지해놨던 algolia의 API Keys 화면에 가셔서

image

빨간색으로 작게 표시해놓은 Admin API Key를 복사하는 버튼을 눌러주시고 Value에 붙여넣기 해줍니다.

image

(Value는 보안상 마스킹 해놓음) 위와 같이 입력하시면 되겠습니다. 그리고 Add를 눌러 추가해줍니다.

image

추가되었음을 확인했습니다.

image

그런데 위에 경고문이 떠있네요… 결제 요금제를 설정해야한다고 합니다.
(깃허브 계정 아이디가 다른건 신경쓰지말고 무시하세요! 포스팅을 위해 새로 판 아이디입니다)

위와 같이 우측 상단 버튼을 클릭하여 Settings에 들어가줍니다.

image

그리고, 둘 중에 아무거나 버튼 하나를 눌러줍니다.

버튼을 누르시면 아래와 같은 창이 뜹니다.

image

Monthly Plans를 누르시면 free trial 옵션이 있을겁니다. select plan을 해주시고

image

그리고, 무료 요금제를 쓰더라도 결제 정보를 꼭 입력해달라고하니… 입력해줍시다.
이름, 이메일 주소, 청구될 주소를 입력해줍니다.

VAT ID 같은 경우 꼭 입력해주라고 하니 꼭 입력을 해야하는데… 이게 사업자등록번호라고 하네요, 저는 사업자등록번호가 없으니 test라고 입력해주었습니다. (구글링해보니 이렇게 입력해줘도 무방하다고 보여집니다.)

Proceed to Payment 버튼을 눌러주면 카드 번호를 입력하라고 합니다… 하…;;

image

이거 입력 안하면 진행이 안되니 해외 결제가 되는 본인 명의의 체크/신용카드 정보를 입력해줍시다. 입력해주고 Validate my account를 누르면 아래와 같은 화면이 나옵니다.

image

위 그림을 보시면 Consume paid credits for OSS 부분은 어차피 무료 요금제니까 그냥 기본값인 ON으로 켜놓습니다. 이렇게 해야 자동으로 블로그 내 검색 색인에 대한 빌드가 되면서 검색 기능이 제대로 동작합니다.

무료 플랜에서 크레딧이 다 떨어지면 꼭 고객센터에 메일을 보내셔서 비상업 용도임을 
확인받으시고, 추가 크레딧을 받으세요! 
댓글로 편하게 질문 남겨주셔도 됩니다 :)

가입하는 과정이 상당히 간단할 줄 알았는데 저는 찾아보고 삽질하느라 시간이 많이 걸렸습니다.

이렇게 가입과 셋팅을 다 끝냈으면 이제 얼마 안남았습니다!!!

Rakefile 수정

마지막으로 github.io 블로그 폴더를 다시 열어주시고, Rakefile 파일을 열어줍니다.

image

# Generate the site
sh "bundle exec jekyll build"

# Run Algolia 
sh "bundle exec jekyll algolia"

파일 맨 아래 라인으로 가셔서 위와 같이 입력해줍니다.

※ 혹시 이렇게 까지 하고, Commit & PUSH 및 배포했는데

x표시가 되면서 Travis CI 에서 에러가 발생한다면?

저도 이 에러 때문에 당황했습니다;;

github.io 블로그 폴더의 최상단에 위치한 .travis.yml파일을 열어줍니다.

image

language: ruby
cache: bundler
gemfile: Gemfile
before_install:
  - gem install bundler
script:
  - bundle exec jekyll algolia --config _config.yml
branches:
  only:
    # Change this to gh-pages if you're deploying using the gh-pages branch
    - master
rvm:
 - 2.4

위 처럼 작성해주고 다시 commit & push를 하니 정상적으로 검색 기능이 동작하는 것을 확인했습니다.(제 블로그 검색 기능 써보시면 아실겁니다 :))

에러가 발생하는 이유는 gemfile과 config 파일이 정상적으로 지정이 안되어 있어서, 그리고 bundler 설치를 안해서였다고 합니다.

에러 부분은 사용자 각자에 따라서 많은 에러가 다르게 발생할 수 있으니 에러 로그를 보면서 진행하셔야 된다는 점 잊지 않으셨으면 좋겠습니다!

🔐 참고한 자료

방문해보세요 ☞ xinfolab님 포스팅 : 깃블로그에 검색 기능을 추가해보도록 하자
(덕분에 블로그 내 검색 기능 잘 설정했네요~ 감사합니다! 🙏)

맨 위로 이동하기

Leave a comment

You may also enjoy