[Hugo] 블로그에 utterances를 이용한 댓글기능 추가하기

✌️개요

---

어느덧 배포까지 성공했으나

댓글기능이 없어서 소통을 할 수 없습니다

이제 댓글 기능을 추가해봅시다

 

🖥️환경

Hugo : `0.124.1`

Theme : `Blowfish`

 

 

🔥본문

---

⚙️서비스 선택

먼저 선택지는 크게 2가지가 있습니다

• Disqus
• Utterances

📌결론부터 말하자면 저는 Utterances를 썻습니다

 

처음엔 제가 설치한 테마인 blowfish 테마의 문서를 찾아갔는데

Hugo 빌트인 Disqus템플릿이 있다고 하더라고요

🧠: "빌트인 템플릿이 있으면 Disqus가 무조건 쉽겠네 !"

라고 생각해서 바로 시도해봤습니다

...

하지만 포기했습니다

 

Disqus를 걷어찬 이유는 2가지 (제 기준입니다)

• Disqus웹의 UI의 뎁스가 진짜 어지럽습니다 뭘 찾아가지 못하겠어요
• Hugo의 문서도 뭐 되게 불친절합니다.
  • (설정파일만 몇갠데 어느 설정파일에 넣으라는건지도 모르겠고 예시가 너무 부족해요)

 

그래서 검색을 해보니 대부분이 Utterances를 쓰는걸 알았고 Utterances로 적용했습니다.

 

 

💾Utterances 적용

Utterance는 GitHub issue를 사용하여 정적 웹사이트에 댓글 시스템을 추가하는 데 사용되는 오픈 소스 댓글 서비스입니다.

신박한 방법이네요

 

Utterance 사이트에 가서 시키는대로 해봅시다

configuration 섹션부터 보시면 됩니다

 

🏃‍♂️ 깃허브 레포지토리 (저장소) 선택

댓글을 저장할 저장소를 선택해야 합니다.

권한은 public이어야 합니다.

기존 블로그의 저장소여도 상관은 없다고 합니다만

위에 적은대로 저장소의 이슈기능으로 댓글을 저장하기때문에,

이슈가 계속 쌓일거고 보기 불편해질겁니다.

 

따라서

저는 blog-comments라는 저장소를 새로 개설했습니다.

 

🏃‍♂️ 이후 선택할 것들

저는 테마 빼고는 전무 디폴트로 뒀습니다

필요하시다면 천천히 읽어보시고 선택하시면되고 디폴트로둬도 문제될건 없습니다

 

테마의 종류는 아래 사진에 있습니다

테마 종류

테마를 하나 선택해보면 보고있는 페이지의 테마가 해당 테마로 바껴서

미리 테마를 볼 수 있습니다

저는 Gruvbox Dark로 선택했습니다

 

다 선택했으면 맨 밑에 Enable Utterances 섹션에 코드가 생성돼있습니다

일단 다른거 먼저 합시다

 

🏃‍♂️저장소에 Utterances앱 설치

이 링크로 들어가서 저장소에 앱을 설치해 줍시다

 

저는 이미 설치해서 버튼이 Configure인데,

설치 전에는 초록 버튼의 Install이었나 그럴겁니다

버튼을 누르고, 댓글을 저장할 저장소에만 설치해줍시다

 

🏃‍♂️블로그 설정 파일 수정

 

여기부터는 블로그의 테마에따라 방법이 다릅니다.
저는 제가 설치한 Blowfish 테마의 방법만을 설명합니다.

 

아까전에 봤던 Blowfish 문서룰 보니 `params.toml`파일의 `showcomments`속성을 `true`로 설정하고,

`layouts/partials/comments.html` 파일을 추가해달라고 합니다.

시키는대로 해보겠습니다.

 

먼저 `params.toml`파일에 `[article]`섹션에 가서

맨 밑에 `showcomments = true` 를 추가해줍니다.

 

그리고 `/themes/blowfish/layouts/partials/` 경로에 `comments.html` 파일을 생성해줍니다

생성한 `comments.html`에 아까 Utterances사이트에서 생성됐던 html코드를 넣어줍니다.

다른거 필요없이 그 코드만 넣어주면 됩니다.

 

`comments.html`을 어디서 어떻게 불러오는지 궁금하다면

`/themes/blowfish/layouts/_default/single.html` 파일을 한번 열어봅시다.

맨 밑으로 가보면 이런 부분이 있습니다.

    {{ if .Params.showComments | default (.Site.Params.article.showComments | default false) }}
    {{ if templates.Exists "partials/comments.html" }}
    <div class="pt-3">
      <hr class="border-dotted border-neutral-300 dark:border-neutral-600" />
      <div class="pt-3">
        {{ partial "comments.html" . }}
      </div>
    </div>
    {{ else }}
    {{ warnf "[BLOWFISH] Comments are enabled for %s but no comments partial exists." .File.Path }}
    {{ end }}
    {{ end }}

 

`showcomments` 속성이 `true` 이고, `partials/comments.html` 파일이 존재한다면

`comments.html`파일을 불러와서 글의 끝에 넣어주는 부분을 확인할 수 있습니다.

 

 

🏃‍♂️ 블로그 가동 및 작동 확인

이제 Hugo를 로컬에서 가동해봅시다

이미 만들어진 포스트들의 html도 재생성돼야 변경사항이 적용되기 때문에

플래그를 같이 넣어줍니다

`--cleanDestinationDir` 플래그를 넣으면 public/ 폴더 아래에 있는 파일들을 전부 재구축합니다.

hugo server --cleanDestinationDir

 

이제 `localhost:1313`으로 접속해서 아무 포스트나 들어갑니다

그리고 바닥으로 스크롤 해봅시다

 

🎉댓글창이 생겼습니다 !

테스트로 댓글을 하나 남겨봅시다

그리고 댓글용 저장소를 한번 가봅시다

 

이렇게 이슈가 하나 등록된걸 볼 수 있습니다.

이런식으로 댓글은 저장소의 이슈로서 저장됩니다.

 

 

 

🍎결론

---

이렇게 Hugo블로그에 댓글창까지 적용해봤습니다.

티스토리 게시글들도 Hugo로 복사하고싶은데 일일히 손으로 옮기자니 엄두가 안나네요

그치만 언젠간 이주할 생각입니다

 

다음엔 좋아요와 조회수를 적용해 볼 계획입니다.

 

 

🔗참조

---

 

Hugo에 Comment 추가하기 (Utterance) :: Ibiza

 

Hugo 블로그 댓글 기능 추가: utterances | HoonTaek Lee