나의 얼렁뚱땅 블로그 이사기 — Gatsby에서 Astro로

블로그를 만들었다.

그리고 방치했다.

사실 블로그를 만들 때부터 이 부분은 어느 정도 예상했어야 했다. 글을 쓰려고 블로그를 만드는 것과, 블로그를 만드는 게 재미있어서 블로그를 만드는 것은 다른 일이니까. 아무래도 나는 후자에 조금 더 가까웠던 것 같다.

어쨌든 블로그는 성실했다. 내가 아무것도 하지 않는 동안에도 GitHub Pages 위에서 예전에 쓴 글들을 잘 보여주고 있었다. 마지막 배포는 2023년 7월이었다. 어느새 3년이 넘었다.

그러다 문득 궁금해졌다.

이거, 그냥 이렇게 두어도 괜찮은 걸까?

오래됐다는 것과 위험하다는 것

예전 블로그는 Gatsby로 만들었다. 당시에는 React로 블로그를 만들겠다고 하면 꽤 자연스럽게 떠오르는 선택지였다. Markdown으로 글을 쓰고, GraphQL로 데이터를 가져오고, 이런저런 플러그인을 붙이면 정적 사이트가 만들어졌다.

그런데 요즘은 Gatsby 이야기를 거의 듣지 못했다. 이제 사실상 유명무실해진 것 아닌가 싶었다.

이번에는 Codex에게 저장소와 실제 사이트를 살펴봐 달라고 했다. 보안상 문제가 있는지, 그리고 다른 기술로 옮긴다면 무엇이 좋을지.

먼저 내 생각부터 조금 수정해야 했다. Gatsby의 개발이 완전히 중단된 것은 아니었다. “요즘 내 눈에 안 보임”과 “프로젝트가 끝남”은 다른 이야기였다.

보안 문제도 비슷했다. 오래된 패키지가 많이 있다고 해서, 그 취약점들이 모두 블로그 방문자가 공격할 수 있는 구멍이 되는 것은 아니었다.

내 블로그는 GitHub Pages에서 정적 파일을 제공한다. Gatsby와 Node.js가 서버에서 계속 실행되면서 방문자의 요청을 처리하는 구조는 아니다. 빌드할 때 필요한 패키지의 문제와, 배포된 페이지에서 실제로 악용할 수 있는 문제를 구분해서 봐야 했다.

그렇다고 계속 방치해도 된다는 뜻은 아니었다.

배포 설정에는 ubuntu-20.04가 남아 있었다. GitHub에서 이미 제공을 중단한 실행 환경이었다. Node.js도 지원이 끝난 20 버전이었고, 의존성 역시 오래전 상태에 머물러 있었다.

사이트가 잘 열린다는 것과, 지금 다시 빌드하고 배포할 수 있다는 것도 다른 이야기였다.

블로그는 성실했지만, 그 뒤의 공장은 상당히 오래 쉬고 있었던 셈이다.

이 블로그에 정말 필요한 것

현재 블로그에 있는 글은 여섯 편이다.

글이 있고, 이미지가 있고, 코드 블록이 있다. RSS가 있고, Giscus 댓글 창이 있다. 로그인이나 데이터베이스, 사용자별 화면 같은 것은 없다.

그러니 새 블로그에도 복잡한 서버는 필요하지 않았다. Markdown으로 글을 쓰고, HTML로 만들어서 GitHub Pages에 올릴 수 있으면 됐다.

그 용도에 맞춰 Astro를 선택했다.

이번 구성에서는 본문을 읽기 위해 React를 실행할 필요가 없다. 글과 코드 강조는 빌드할 때 처리하고, 브라우저에는 정적 페이지를 보낸다. 댓글처럼 실제로 필요한 부분에만 JavaScript가 붙는다.

Gatsby를 어떻게든 최신 버전까지 끌어올리는 방법도 있었겠지만, 이 블로그의 규모와 기능을 생각하면 작은 Astro 사이트로 다시 구성하는 편이 관리하기 좋겠다고 판단했다.

호스팅은 그대로 GitHub Pages를 쓰기로 했다.

이사를 한다고 집 주소까지 바꿀 필요는 없으니까.

코드는 바꾸고, 주소는 지키고

새 사이트를 만들 때 요청한 조건이 있었다.

기존 글과 이미지, URL, Giscus 댓글 연결을 그대로 유지할 것.

글이 여섯 편뿐이니 대충 복사하면 되지 않을까 싶지만, 의외로 신경 쓸 부분들이 있었다.

우선 글의 주소다. 기존 글은 다음과 같은 주소를 사용하고 있었다.

/my-first-open-source-part1/

새 사이트에서도 같은 주소가 만들어져야 했다. 끝의 /도 유지했다.

외부에서 걸어둔 링크 때문이기도 하지만, Giscus가 글과 댓글을 연결하는 기준이 pathname이었기 때문이다. 댓글 창의 모양만 옮겨놓는다고 끝나는 일이 아니었다. 같은 저장소와 카테고리, 같은 경로 매핑을 유지해야 했다.

이미지도 두 가지 방식이 섞여 있었다. Markdown 이미지 문법으로 넣은 것도 있고, <figure>와 <img> 태그로 직접 넣은 것도 있었다. 원본 파일과 상대 경로를 유지하면서 두 방식 모두 제대로 표시되도록 했다.

예전 Gatsby가 생성했던 /static/... 주소의 파일들도 남겨두었다. 혹시 어딘가에 옛 이미지 주소가 직접 공유되어 있더라도 계속 열릴 수 있도록.

RSS도 마찬가지였다. 글 주소뿐 아니라 기존 항목의 GUID와 발행일을 유지했다. RSS 리더 입장에서 오래된 글 여섯 편이 갑자기 새 글로 나타나면 곤란하니까.

새로 만드는 작업이었지만, 중요한 부분은 오히려 바꾸지 않는 쪽에 있었다.

이사가 잘됐는지 확인하는 방법

사이트가 빌드되고 첫 화면이 뜨면 일단 기분은 좋다.

하지만 그것만으로 이사가 끝났다고 할 수는 없었다. 이삿짐 상자를 현관에 내려놨다고 해서, 안에 든 접시가 모두 무사한 것은 아니니까.

확인한 것들은 이런 것들이었다.

기존 글 여섯 편의 주소가 그대로 열리는가.
원본 이미지 22개가 변경 없이 제공되는가.
글 안의 이미지와 다른 글로 가는 링크가 끊어지지 않았는가.
Giscus가 기존 설정으로 로딩되는가.
RSS와 사이트맵이 만들어지는가.

본문도 기존 배포본과 대조했다. 공백을 정규화한 뒤 비교했을 때 여섯 편 모두 텍스트가 일치했다. 원본 Markdown과 이미지 파일 자체도 변경하지 않았다.

새 의존성에 대한 npm audit 결과는 당시 기준으로 0건이었다. 물론 이것이 앞으로도 안전하다는 보증서는 아니다. 이번에도 몇 년 동안 손을 놓아도 된다는 뜻으로 해석하면 안 될 것이다.

음, 이 문장은 미래의 나를 위해 적어둔다.

AI가 써준 소개 문구

작업은 먼저 미리보기를 확인한 뒤 실제 배포하는 순서로 진행했다.

첫 미리보기의 홈 화면에는 이런 문구가 있었다.

기록하고, 가끔은 돌아보고.

그리고 그 아래에는:

소프트웨어를 만들며
얼렁뚱땅 배운 것들.

그럴듯했다.

문제는 내가 쓴 문장이 아니라는 것이었다.

내가 물었다. 이 문장들은 네가 추가한 거냐고. 그렇다고 했다. 홈 화면을 구성하면서 새로 넣었다고.

재치가 있기는 했다. 하지만 소개 문구까지 새로 장만할 생각은 없었으므로 둘 다 빼달라고 했다. 기존 블로그 제목과 프로필만 남겼다.

AI와 함께 작업하면 구현을 맡길 수 있는 범위가 꽤 넓다. 그만큼 무엇이 원래 있던 것이고 무엇이 새로 제안된 것인지 확인하는 일도 필요했다.

블로그의 주인 역할까지 맡길 수는 없으니까.

적어도 아직은.

처음에는 수동으로, 그다음에는 자동으로

배포 과정도 바꿨다.

Node.js 24 LTS와 Ubuntu 24.04를 사용하도록 하고, 빌드와 배포의 권한을 나눴다. 의존성 잠금 파일을 기준으로 설치하고, 검사에 통과한 결과물을 GitHub Pages에 게시하도록 구성했다.

처음에는 실제 배포 전에 충분히 확인하고 싶어서 수동 배포로 시작했다. PR을 머지하는 것만으로 사이트가 바뀌지 않게 해두고, 내가 미리보기를 확인한 뒤 배포했다.

이사가 끝난 뒤에는 평소 글을 올리기 편하도록 자동 배포로 바꿨다.

지금은 다음과 같이 동작한다.

PR 작성
  → 빌드와 검증

main에 push하거나 PR 머지
  → 빌드와 검증
  → GitHub Pages 자동 배포

글은 계속 Markdown으로 쓴다.

content/blog/my-new-post/
├── index.md
└── photo.jpg

이렇게 폴더를 만들면 /my-new-post/에 글이 생긴다. 작성 방식을 크게 바꾸지 않아도 된다는 점이 마음에 든다.

이제 배포 버튼을 누르는 일도 없어졌다.

남은 것은 글을 쓰는 일이다.

늘 그렇듯, 가장 어려운 부분만 남았다.

마지막으로, 파비콘

새 블로그에 파비콘도 달았다.

처음에는 Codex가 블로그 제목에서 ‘얼’을 따온 아이콘을 만들어주었다. 이것도 제법 재치가 있었다.

그러다 나는 ?!가 좋겠다고 했다.

뭔가를 만들다가 의아해하고, 뒤늦게 알아차리고, 가끔은 어이없어하는 이 블로그의 이야기들과 잘 어울리는 것 같았다.

그래서 지금 브라우저 탭에는 초록색 바탕의 ?!가 떠 있다.

처음 만들었던 ‘얼’ 아이콘과 최종 선택한 ‘?!’ 아이콘.

Gatsby에서 Astro로 옮기는 작업은 그렇게 끝났다. 글과 주소는 그대로이고, 그 뒤에서 사이트를 만드는 도구와 배포하는 과정이 달라졌다.

이 글이 이사한 블로그의 첫 새 글이 되면 좋겠다.

블로그만 만들고 방치하는 대신, 이번에는 글도 하나 썼다는 증거가 될 테니까.

진짜 마지막으로

아, 하나만 고백해야겠다.

사실 이 글의 초안도 Codex가 썼다. 나는 읽어보고, 고칠 곳을 짚고, 미리보기를 확인한 다음 올려달라고 했다.

그러니 방금 위에서 “이번에는 글도 하나 썼다”고 한 부분은 약간의 정정이 필요하다. 정확히는, 글이 하나 올라가도록 했다.

게다가 “블로그의 주인 역할까지 맡길 수는 없으니까. 적어도 아직은.”이라는 문장도 Codex가 썼다. 저 말을 쓴 쪽이 누구인지 알고 다시 읽으니 어쩐지 느낌이 조금 다르다.

블로그는 Astro로 옮겼고, 초안 작성은 Codex에게 넘겼고, 나는 검토자가 되었다. 이쯤 되면 블로그 이사보다 내 업무 분장이 더 많이 바뀐 것 같기도 하다.

그래도 마지막에 “좋아, 올려줘”라고 말한 것은 나다.

블로그의 주인 역할은, 일단 그 정도로 해두자.