블로그에 붙힐만한 댓글 라이브러리로는 Disqus, Commento, livere 등이 있지만 깃헙 페이지라 Gitment를 사용하고 싶었다.
사전 준비
Github > Settings > Developer settings > OAuth Apps 메뉴로 들어가 새로운 OAuth App 을 만들어준다.
Client ID 와 Client Secret 을 저장해 놓고 Authorization callback URL 은 Homepage URL 과 같은 주소를 입력한다.
# Application name
GracefulLight
# Homepage URL
https://gracefullight.github.io
# Application description
GracefulLights Blog
# Authorization callback URL
https://gracefullight.github.io
소스 추가
원하는 페이지에 소스를 추가한다.
<script src="https://cdn.jsdelivr.net/npm/[email protected]/js/browser/bluebird.core.min.js"></script>
<section class="comments" id="comments">
<div id="gitment_thread"></div>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/style/default.css"
/>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gitment.browser.js"></script>
<script>
var gitment = new Gitment({
id: "Gitment 를 구분할 아이디 (ex: 페이지 제목 또는 포스팅 일시)",
owner: "github 아이디 (ex: gracefullight)",
repo: "repository 명 (ex: gracefullight.github.io)",
oauth: {
client_id: "위에서 발급 받은 client_id",
client_secret: "위에서 발급 받은 client_secret",
},
});
gitment.render("gitment_thread");
</script>
</section>
gitment.min.js 파일은 없으므로, 직접 minify 해서 사용하면 된다. bluebird (promise) core 를 추가한 이유는, IE 에서 gitment 를 지원해야하기 때문이다.
옵션 관리
위 4개 옵션 외에 추가로 옵션을 더 줄 수 있다. desc 와 labels 정도가 추가되면 좋을 것 같다.
댓글 쓰기
깃허브 아이디로 로그인한 뒤 Initialize Comments 를 누르고 댓글을 작성하면 된다.