로컬 화면을 공개할 사이트로 정리했다

화면을 만든 뒤에는 내용을 걷어 냈다

차고 화면을 다듬은 다음에는 실제로 공개할 내용을 정리했다. 개발할 때 화면을 채우던 예시 프로젝트와 작업기록을 내리고, 관련 링크 미리보기 그림도 지웠다. 소개의 경력·학력 자리표시는 숨겼다. 값이 비어 있으면 해당 칸 자체가 보이지 않는다.

화면을 확인하려고 넣은 데이터와 방문자에게 보여 줄 내용을 가르는 작업이었다.

배포할 것은 정적 파일 한 묶음이었다

블로그에서 글쓰기 기능을 분리해 둔 덕분에 배포 대상은 빌드가 만든 dist/ 폴더 하나였다. Cloudflare에 올리는 Wrangler 설정을 추가하고 도메인을 연결했다. 없는 주소를 처리하는 404 페이지와 주소 끝의 슬래시 처리도 정했다.

"assets": {
  "directory": "./dist",
  "not_found_handling": "404-page",
  "html_handling": "auto-trailing-slash"
}

첫 줄은 올릴 폴더, 다음 줄은 없는 주소를 처리하는 방식, 마지막 줄은 주소 끝의 슬래시 규칙이다. 없는 글 주소로 들어오면 준비한 404 페이지를 보여 준다.

빌드에는 별도 패키지 설치가 필요 없다. Node.js로 사이트를 만든 다음 Wrangler로 올리면 끝난다.

자동 배포는 한 단계가 남았다

main에 커밋이 올라오면 GitHub Actions가 사이트를 빌드해 Wrangler로 올리는 설정도 만들었다. 그런데 워크플로 파일을 .github/workflows/에 올리려면 gh 로그인에 workflow 권한이 필요했다. 그래서 설정은 ci/deploy.yml에 임시로 두고, 권한을 받으면 옮기기로 했다. 배포에 쓸 Cloudflare 토큰이 저장소 비밀값에 없으면 올리는 단계는 건너뛰게 했다.

그때까지 배포는 손으로 한다.

npm run build && npx wrangler deploy