Git기반의 CMS로 정적사이트에 글쓰기 에디터 달기

정적(Static) 웹사이트라 함은... 정적으로 로딩되는 사이트이다. 다르게 말하면 페이지를 로딩하는데 html파일을 불러오는 것 외에 서버와의 통신은 하지 않는다는 것이다. 대부분의 Github 기반의 블로그가 이런 방식으로 만들어져있다. (Github page 혹은 Netlify, Vercel을 통해 배포하는 사이트들이 보통 이런 케이스이다)

이런 방식의 사이트는 정보를 일방적으로 게시하는 페이지는 만들 수 있지만 게시판이나 방명록처럼 사용자가 직접 글을 올리는 페이지를 만들기는 쉽지 않다. (다만 꼼수를 쓰면 가능은 할지도 모른다.) Git based CMS는 여러 꼼수(?) 중 하나로, 이 방식을 통해 사이트 내에서 에디터를 통해 글쓰기가 가능하다.

대부분의 사람들은 사이트 관리를 기성블로그(네이버,티스토리)를 사용하거나 워드프레스나 그누보드 같은 걸로 관리하고 더 나아가서 개발에 대한 지식이 있는 사람들은 github에 직접 푸쉬하는 식으로 사용하기 땜에 이런 방식까지 굳이 사용하는 사람은 거의 없고 잘 알려진 방식은 아니다. 그래도 블로그나 사이트를 Static Page로 직접 만들어 발행하는 사람이라면 흥미로운 방법이다. (대부분 Github Page나 Netlify, Vercel 같은걸로 배포하는 사이트들)

기본적인 원리는 에디터 페이지가 있고 거기서 글을 써서  등록하는 버튼을 누르면 깃허브에 해당 글을 push하고 다시 빌드 및 배포되는 과정을 자동화한 것이다.
이 과정에서 내 깃허브 레포에 글을 등록할 권한이 필요하니 인증이 필요한데 간단한 방법으로는 github oauth로 인증하는 것을 생각해볼 수 있다. 그런데 이마저도 netlify에서 netlify Identify 라는 기능을 제공한다. 이걸 쓰면 netlify계정을 통해 인증을 진행하면 깃허브 레포에 푸쉬를할 수 있도록 해준다. netlify를 로그인할 때 github 계정을 사용할 수 있기때문에 결과적으로는 깃허브 계정으로 사이트에 로그인 하는 것처럼 보인다.
정확히는 Git Gateway라는 기능을 사용하고 있다.
그리고 netlify에서 cms 에디터도 제공하고 있다. Decap CMS 였는데 언젠가부터 이게 Netlify CMS가 됐다. 뭔가 적극적으로 도입하고 있는 것처럼 보인다.
(참고: Netlify CMS to Become Decap CMS: What You Need to Know)
Gatsby, Nextjs 등 유명한 프레임워크의 Starter도 제공한다.

Vercel에서도 에디터와 github 인증을 구현하면 git gateway를 써서 인증하도록 만들 수 있을 것 같다. 이걸 위해서 Next.js 기반의 페이지에 Static CMS 라이브러리를 사용하고, 인증 절차를 직접 커스터마이즈 하려니 삽질이 쉽지가 않았다.
서버리스 함수를 만들어서 인증을 진행하는 코드를 넣었는데 인증 이후의 콜백이 잘 넘어가지않는다.(가물가물하지만 일단 기록해둠)
과거에는 이방식을 사용한 사람들이 있는 걸로 보이는데 잘 안되어서 일단 덮어둔 상태이다.

이런 CMS 라이브러리가 몇가지 있는데 사용법이 비슷한걸 봐서 뿌리는 같은 것 같다.

아래는 Git based CMS들이다.
내가 다 써본 것은 아니다.

• Static CMS
• Decap CMS
• Netlify CMS
• Tina CMS
• Crafter CMS
• CloudCannon
• Contentrain

이외에도 더 있는데 리서치하면서 추가해보겠다.

Geekflare, Devcontentops, Jamstack.org에서도 git-based cms를 소개하고있으니 참고로 하면 될거같다.

이런 방식으로 커뮤니티가 아닌 관리자가 콘텐츠를 올리고 관리하는 페이지(주로 블로그나 업체 소개 사이트, 랜딩페이지 등)는 쉽게 만들 것 같다.
이 방법을 알게 되고나서 굉장히 희열을 느꼈다. 잘 사용해서 좋은 사이트를 만들 수 있길 바라며 글을 마친다.