[Hugo] 블로그에 조회수와 좋아요 기능 추가하기

✌️개요

---

이번엔 휴고 블로그에 조회수와 좋아요 기능을 추가해봅시다

 

참고로 저는 Hugo블로그 소스를 윈도우PC로 옮겼습니다

이유는

• 우분투에 자꾸 권한문제가 생기는데 `brew`로 설치한 패키지라서 권한 주기가 복잡했습니다
• 어차피 호스팅도 GithubPages를 이용하기 때문에 소스가 서버PC에있을 필요가 없습니다
• 윈도우도 Hugo를 설치할 수 있습니다
• 저번에 호스팅 구성을 하면서 저장소에 소스도 다 올렸기 때문에 클론만 받으면 뚝딱 옮겨지니 옮기는게 낫다고 판단했습니다

 

🖥️ 환경

• Hugo: `0.124.1`
• Theme: `Blowfish`
• OS: `Windows 11`

테마마다 구성 방법이 다를것이기 때문에 다른 테마를 사용하시는분은 제 글을 보고 따라하시면 안될 수 있습니다!

 

🔥구성

---

 

먼저 사용중인 `Blowfish`테마의 문서를 살펴봅시다

Firebase: Views & Likes

 

Firebase를 이용하는것을 알 수 있습니다

하나씩 따라가 봅시다

Firebase 웹사이트에 가서 로그인 or 가입 먼저 해주고

새 프로젝트 만들기를 선택해줍니다

Firebase | Google's Mobile and Web App Development Platform

 

이름도 대충 지어주고 계속 넘어가 봅시다

 

애널리틱스 위치는 대한민국으로 선택했습니다

조직의 국가 또는 리전으로 설정하라고 합니다

이 설정값을 기반으로 수익 보고서의 통화를 설정한다고 합니다

 

그리고 조금 기다리면 프로젝트 준비가 완료됐다는 화면이 나옵니다

 

여기서 한번 블로그 소스의 `config\_default`경로에있는 `params.toml`파일을 한번 열어봅시다

그리고 `[firebase]`섹션에 가보면 주석처리된 채워야할 변수들이 보입니다

이걸 채워봅시다

 

다시 Firebase의 프로젝트 메인 페이지로 돌아와서 웹앱을 추가합시다

 

발급받은 SDK구성은 프로젝트 설정 페이지에서 다시 확인할 수 있습니다

 

그럼 발급받은 구성값으로 `params.toml`을 채워줍시다

 

이렇게 채워줬습니다

 

자 이제 DB가 필요하기때문에 Firebase프로젝트에 `Firestore`를 구성해야합니다

프로젝트 메인페이지에서 Cloud Firestore를 클릭하고 들어가봅시다

 

데이터베이스 만들기 선택

 

물리적 위치를 선택해야하는데 후에 변경할 수 없다고 합니다

개인 블로그고 글로벌 서비스 생각은 딱히 없으니 서울로 하겠습니다

 

프로덕션 모드로 만들어줍시다

 

조금 기다리면 준비가 완료됩니다

완료됐으면 규칙 탭으로 와서 아래 규칙을 복붙하고 게시해줍니다

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if request.auth != null;
    }
  }
}

 

아직 남았습니다

이제 인증 서비스를 구성해야합니다

왼쪽 탭에서 `빌드 - Authentication`메뉴로 들어갑시다

그리고 시작하기를 눌러봅시다

 

로그인 방법에서 익명을 활성화하고 저장해줍시다

 

🍎작동 확인

---

자! 드디어 구성이 끝났습니다

테스트를 위해 로컬에 Hugo를 작동시켜봅시다

Hugo 소스 루트폴더에서 터미널에 아래 명령을 입력시켜 작동시킵니다

hugo server --cleanDestinationDir

 

그리고 `localhost:1313`으로 접속합니다

테스트용 포스트로 들어가보면 전에는 로딩이 안되던 조회수와 좋아요가 로딩되는것을 확인할 수 있습니다

좋아요 버튼에 따라 숫자도 올라갑니다

 

Firebase에도 올라갔는지 확인해야겠죠?

Firebase 프로젝트 페이지에서 Firestore 메뉴에 들어가서 확인해봅시다

좋아요와 조회수가 저장된것을 확인할 수 있습니다

 

Autentication 메뉴도 확인해봅시다

잘 연동된것을 확인할 수 있습니다

 

이제 변경한 소스를 Github저장소에 `push`하고 깃허브 Actions가 알아서 배포해주기를 기다립시다

배포 완료를 확인하고 접속해서 확인해줍시다

 

로컬호스트로 테스트한 값과 같이 누적은 안되지만 정상 작동을 확인할 수 있을겁니다

 

💸요금은?

---

클라우드 서비스를 이렇게 막 추가하니

"나도 모르게 청구되는거 아니야?" 라는 걱정이 들 수 있습니다

Firebase는 요금제로 운영되며 기본적으로 무료 요금제인 Spark가 할당됩니다

 

당연히 무료 요금제는 제한이 있습니다

저희가 사용하는 서비스인 인증과 Firestore의 제한 사항을 확인해보면

인증은 월간 활성 사용자수 50k/월 입니다

월 활성 사용자 수가 5만이 넘을 수준이라 생각든다면 업그레이드를 고려해볼 수 있겠습니다

 

Firestore요금은 꽤 넉넉합니다

누군가 좋아요 테러만 하지않으면 넘을일은 크게 없어보입니다

 

혹시나 사용량을 초과하더라도 서비스가 중지되지 요금이 부과되진 않습니다

갓 구글이네요

 

 

🍎결론

---

이제 Hugo블로그에 기본적으로 소통이 가능한 블로그로서의 기능은 다 준비가 됐습니다

여기서 더이상 손댈일은 없을것 같습니다

 

다만 블로그 이전은 아직 고려중입니다 쓰다보니 티스토리가 참 괜찮네요

그래도 블로그를 구축해보는 경험은 좋았습니다

 

끝!