Show GN: 프론트엔드 JS 없이 구현하는 깃허브 블로그 댓글 기능
(github.com/nemorize)프론트엔드에서 어떠한 JS 코드도 서빙하지 않는 블로그를 목표로 시작했습니다.
기존 블로그에 giscus를 사용한 댓글 기능이 있어,
JS 없이 댓글 기능을 구현하는 것이 큰 걸림돌이었는데요.
Cloudflare Workers와 GitHub Actions를 사용하여 댓글 기능을 구현했습니다.
아래의 흐름에 따라 작동합니다.
- 클라우드플레어 워커에 호스팅된 댓글 폼을 출력합니다.
- 사용자는 해당 댓글 폼을 통해 깃허브 계정으로 로그인하고, 댓글을 제출합니다.
- 워커는 제출받은 댓글 내용을 이스케이프하고, 깃허브 액션의 workflow dispatches API를 통해 그 내용을 깃허브로 전달합니다.
- 깃허브 액션은 전달받은 내용을 토대로 게시글 HTML 파일에 댓글 코드를 추가하고, 그 변경사항을 커밋합니다.
- 커밋된 결과물은 깃허브 페이지 액션의 배포 절차에 따라 프로덕션에 반영됩니다.
3-5번의 절차에 따라 반영되는데 걸리는 약간의 지연시간은...
그냥 안내 문구 하나 추가하는 것으로 퉁쳤다. 워드프레스 같은 블로그 플랫폼에는 "관리자 검토 후 댓글 공개" 같은 기능이 보편화 되어 있으므로, 그 정도 딜레이는 관리자가 검토하는 척 하기로 했다. 이 글을 보는 당신만 모른척하면 된다.
UX 측면에서 해??결했습니다ㅎㅎ
개인 수준의 작은 블로그에서, 굳이 굳이 JS를 사용하지 않겠다는 목표가 있었을 때에나 유의미한 방향이라, 그저 재미로 봐 주셨으면 좋겠네요😅
아래 링크에서 직접 테스트 해 볼 수 있습니다!
https://nemorize.me/blog/202507/blog-renewal