블로그 제작기 겸, 도메인 및 이미지 서버 연결하기

어느 날 갑자기, 예전에 야심찬 마음으로 포크해 두고 Github Pages에 연결만 해 둔 채 잊고 있었던 jekyll 블로그가 생각났습니다. 그냥 방치하기에는 아까웠기도 하고, 무언가 학습하거나 제작한 일기를 여기에 작성해두면 좋지 않을까 싶었어요. 마침 최근에는 아이디어 겸 의욕이 좀 돌아서 무언가 만들어보려 하고 있었거든요.

그래서, 오랜만에 꺼내서 한번 쓰자고 생각한 겸, 블로그도 좀 다듬고, 이것저것 연결도 했습니다. 이 글은 그것에 대한 일기입니다. 가이드보다는 주저리에 가까워요.

---

위에서도 말했 듯, 어느 날 갑자기 의욕이 돌아서 블로그를 만들 겸 좀 꾸며봤습니다.

다만 Github Pages를 통한 도메인은 뭔가 너무 평범?해보이는 느낌이기도 하고, 같은 이유로 네이버나 Velog같은 블로그 전문 플랫폼은 괜히 손이 안가더라고요. 뭘 잘 아는 놈도 아닌데 말이죠.

그래서 블로그 플랫폼이 아닌, 내 전용 블로그를 가지고 싶다. 이왕이면 도메인도 하나 사보고, 밖에서도 편집 가능했으면 좋겠다. 라는걸 목표로 만들었습니다.

---

우선 도메인부터.

우선, 블로그 사이트의 주소를 바꾸기 위해서는 도메인부터 구입해야 합니다. 그래서 예전에 봤었던 Google Domains를 보려고 했는데.. 여기는 문을 닫았더라고요.

그래서 많이 사용되는 도메인 구매 플랫폼을 찾아보려니, 가비아, 고대디, 포크번, 카페24 등… 뭔가 굉장히 많았습니다.

저는 여기서 포크번을 골랐습니다. 이유는 쓰는 사람들도 많으면서, 제일 저렴한 것 같아서요. 다만 지금 다시 확인해볼 겸 찾아보니 더 싸고 괜찮은 곳도 있는 것 같네요. 조금 더 알아볼걸.

첫 해 8.75달러에 구매했습니다.

그 다음에.. 처음에는 Github Pages에 연결했었는데, Private 상태의 리포지토리는 Free 계정에서 사용이 안되더라고요. 그래서 방법을 찾아봤는데, Cloudflare의 Pages 기능을 이용하고, 사용할 소스만 Github 리포지토리와 연결해주면 코드 공개 없이도 배포가 가능하다는 걸 알았습니다.

볼 사람도 없는데 굳이 Private으로 두는 이유는 차치하고(부끄럽잖아요), 해당 방법대로 연결했습니다.

Create Application을 누르고

밑에 숨어있는 친구를 누른 다음에

빌드 명령어만 기입하고 진행했다

나중에 보니까 Build output도 _site로 바꿔줘야 하더라.

예?

왜 안되지 하다가, 알아보니 인코딩 관련 문제라고 하더라고요.. UTF-8을 쓰도록 강제하고, 이후에 보니 테스트용 파일도 빌드하려다 터지길래, 그것도 제외하라고 환경변수에 넣어줬습니다.

이제 되겠지?

잘된다!

블로그 빌드는 됐으니, 도메인 연결을 해줍시다. Porkbun에서 Nameservers를 Cloudflare 것으로 지정해주고, DNS 값은 Cloudflare 측에서 지정할테니 삭제했습니다.

사용하려는 도메인 구매/배포 플랫폼에 따라 방법이 다르니 주의

도메인 등록을 시도하려고 다음다음 누르다보면 이걸 준다.

NS 버튼을 누르고 이걸 채워주면 된다.

이렇게 해 주고, 사이트 지시 따라가다 보니 도메인까지 연결이 됐습니다.

이제 글 작성을? 하기 전에..

이후에 블로그 스타일도 조금 커스텀해보면서(초록초록한게 마음에 들더라고요) 내가 원하는 느낌으로 바꿔본 후, 슬슬 글을 한번 써보려고 했습니다.

그런데 여타 전문 블로그 플랫폼들과는 다르게 글쓰기 환경도 없고, 직접 Markdown 파일을 만들어서 posts 폴더에 작성해야 하며, commit/push까지 직접 해야 하더라고요. 예전에나 잠깐 만져봤던 네이버 블로그 이런 것 처럼 편한 글쓰기 환경이 아닌거죠.

그리고 문제가 하나 더 있었습니다. 당연히 이미지 업로드 환경도 없었고, 기존 데모 템플릿에서는 어떻게 했나 보니 외부 미디어 리소스 저장용 서버를 사용하더라고요. 그래서 방법을 찾아보던 도중, Cloudflare의 R2 버킷 서비스를 이용하면 된다는걸 알았습니다.

쪼아요 쪼아요

그래서 R2를 통해 Bucket을 만들어주고, 폴더를 만들고, 거기에 이미지를 올렸습니다. 잘 되더라고요. 맞는 비유인지는 모르겠지만, 그냥 구글 드라이브나 네이버 클라우드같은 클라우드 서비스와 유사한 느낌이었습니다.

근데 지금 생각해보면, 어차피 간단하게 쓸성 싶은데, 그냥 리포 내부에 파일 넣고 그거 참고하게 했어도 됐을 것 같네요.

글은 어떻게 쓰지? 이미지 첨부는?

이미지 서버는 해결이 됐는데, 제일 중요한 글쓰기 문제가 남아있습니다. VSCode같은 텍스트 에디터로 직접 Markdown을 써도 되겠지만, 너무 불편하기도 하고, Jekyll 블로그 문법이랑 호환되지 않는 부분도 있었는데다, 무엇보다 이미지 연결이 너무 번거로웠습니다. 텍스트 에디터 열고, Bucket에 이미지 직접 올리고, 링크 따와서 넣고.. 한두번이야 상관없지만, 계속 이러는건 말이 안된다 생각했어요.

지금와서 다시 생각해보면 jekyll-admin과 같은 유명한 도구가 있어서 그걸 쓰면 됐을 텐데, 저는 GPT를 통해서 직접 웹 UI의 텍스트 에디터를 제작했습니다.

R2 토큰/API도 연결해서 이미지 버튼 누르고 파일 선택 하면 문법 삽입과 업로드가 같이되게 해뒀고, (예전에 다른 확장프로그램에서 본 기능이 떠올라서) 블로그 description도 Gemini가 생성할 수 있게 했습니다.

매트리스 옆에서 열일중이신 나만의 작은 서버..

또한 집에서 방치형 게임 켜둔다고 24시간 돌아가는 노트북을 서버삼아서, Tailnet을 통해 글쓰기 페이지에 진입 가능하게 하고, 새 Draft 작성, 저장/Publish, Commit/Push까지 가능하게 만들었습니다. 이걸 통해서 밖에서도 폰으로 글 작성이 가능해졌네요.

ai에게 맡긴만큼 내부 구조까지는 잘 모른다는게 문제지만, 그래도 당장 쓸 수 있는 환경까지 만들었어요. 아무튼 좋았죠?

그리고 댓글 시스템도 만들었습니다. 원래는 Giscus나 Utterances, Disqus 등 다른 서비스를 찾아보려 했는데, 무료 사용자에게는 제한 사항이 걸리거나, 광고(!)가 추가되거나, 댓글을 달기 위해 플랫폼 로그인이 강제되는 등의 단점들이 있었습니다. 영 마음에 안들더라고요.

그래서 AI의 도움을 좀 받아서, 직접 comment API를 만들도록 하고, 제작된 Worker를 Cloudflare에 등록시킨 뒤 UI로도 연결했습니다. 이를 통해, 블로그에 작성되는 모든 댓글들은 Cloudflare D1의 DB에 저장되며, 작성자의 IP 및 비밀번호는 PBKDF2를 통해 단방향 해시화됩니다. Turnstile 등 안전장치들도 붙였고요.

여기에 더해, 관리자의 댓글은 구분되어야 하므로 관리자용 댓글 관리 도구도 만들었어요. 그리고 등록된 댓글은 Gemini API로 스팸필터를 거치도록 추가했습니다. 히오스 템플릿 보고 spam 100%라고 하는거 보세요. 일 잘하죠?

마무리

이번에 블로그를 만든 김에, 게임이나 취미/학습 등의 주제로 여러가지 글을 한번 작성해보고 싶네요. 사실 어릴 때도 여러 번 시도했다가 결국 방치됐지만.. 블로그 관련해서 이정도로 추진력을 받았던게 오랜만인 것 같습니다.

부디 작심N일로 끝나지 않았으면 좋겠어요.