헥소(Hexo)에 댓글(Disqus, Gittalk)추가

댓글 기능

헥소(Hexo) 자체적으로 댓글 기능은 없습니다

테마별댓글기능

Hexo 테마에서 댓글기능을 제공하는 경우들이 많습니다.

book 테마의 경우 3가지 댓글 기능을 제공합니다
(Utterance · Disqus · Gitalk)
Icarus 테마의 경우 10가지 댓글 기능을 제공합니다
(Changyan · Disqus · DisqusJS · Facebook · Gitalk · Gitment · Isso · LiveRe · Utterance · Valine)

Disqus 적용하기

Disqus 가입

Disqus 는 댓글 기능을 제공하는 서비스 입니다. 무료로 일방문 5만 페이지뷰까지는 무료입니다

Site 생성하기

Disqus Admin 화면에서 New 버튼으로 사이트를 생성합니다.
Disqus Admin
댓글 기능을 적용할 사이트 정보를 입력합니다.
Shortname 정보가 가장 중요합니다. 나중에 config 에서 Shortname 정보를 사용합니다
Disqus Site example

테마 config 에 Shortname 추가

book 테마를 사용하는 경우 \source\_data\book.yml 에 google_analytics 설정에 구글애널리틱스 사이트에서 확인한 측정 ID 를 입력합니다

\source\_data\book.yml
1
2
3
4
comments:
disqus:
enable: true
shortname: skystudy

배포하기

npm run deployall 로 hexo 사이트를 배포 합니다

댓글기능확인

문서 하단에 Disqus 댓글 기능이 추가 되어있는 지 확인합니다
Blog Disqus 적용화면

Gitalk 적용하기

Gitalk은 Github Repository 의 Issue 를 활용해서 댓글처럼 사용할 수 있는 기능입니다.
Gitalk 을 사용하기 위해서는 Github 에서 설정을 해줘야 합니다

  1. gitalk 으로 사용할 repository 를 생성
  2. Github 에 접근할 수 있는 OAuth APP 을 생성
  3. Hexo config 에 gitalk 정보 설정

gitalk 으로 사용할 repository 를 생성

Github 에서 Repository 를 생성합니다.
저는 gitalk 라고 만들었습니다.

Github 에 접근할 수 있는 OAuth APP 을 생성

Github Setting Developer settings 에서 OAuth Appps 메뉴를 클릭합니다
My Hexo Comment 라는 New App 을 만들어 주면
Client IDClient secrets 라는 키가 생성됩니다

Hexo config 에 gitalk 정보 설정

book 테마를 사용하는 경우 \source\_data\book.yml 에 gitalk 설정에
Client ID 와 Client secrets 정보 등을 입력합니다

\source\_data\book.yml
1
2
3
4
5
6
7
8
9
10
comments:
gitalk:
enable: true
githubID: skyksit
repo: gitalk
ClientID: 5e844xxxxxxxxxxxx
ClientSecret: 1978ffdffa961xxxxxxxxxxxxx
adminUser: skyksit
labels: gitalk
distractionFreeMode: true
  • proxy 가 필요한 경우 외부로 공개된 proxy 들이 있습니다. 그걸 활용해서 사용하시면 됩니다.
    icarus 에서는 proxy 정보도 입력해야 하는 데 book 테마에서는 없습니다.
    proxy: 'https://shielded-brushlands-08810.herokuapp.com/https://github.com/login/oauth/access_token'

배포하기

npm run deployall 로 hexo 사이트를 배포 합니다