새 Windows PC에서 Astro 블로그 작업 환경 이어서 세팅하기

들어가며

기존에는 Mac에서 chailmon.com 블로그를 만들고 운영했다.

하지만 새 Windows PC에서도 같은 블로그 작업을 이어서 하려면 개발 환경을 다시 세팅해야 했다.

이번 글에서는 새 Windows PC에서 기존 Astro 블로그 저장소를 내려받고, 로컬에서 실행하고, GitHub에 push한 뒤 Cloudflare 자동 배포까지 확인한 과정을 정리한다.

최종 목표는 다음과 같았다.

1. GitHub 저장소 clone
2. Node 패키지 설치
3. .env 파일 복원
4. 로컬 개발 서버 실행
5. npm run build 성공
6. git push 성공
7. Cloudflare 자동 배포 확인

1. Git for Windows 설치

가장 먼저 Git for Windows를 설치했다.

Windows에서 Git을 설치할 때는 공식 사이트에서 설치 파일을 받는 것이 좋다.

https://git-scm.com/downloads/win

일반적인 Windows 노트북이나 데스크톱이라면 64-bit x64 설치 파일을 받으면 된다.

설치 중 대부분은 기본값으로 진행해도 되지만, 몇 가지 옵션은 확인하는 것이 좋다.

Default editor:
Use Visual Studio Code as Git's default editor

Initial branch:
main

PATH:
Git from the command line and also from 3rd-party software

Credential helper:
Git Credential Manager

특히 Git from the command line and also from 3rd-party software 옵션을 선택해야 PowerShell이나 VS Code 터미널에서도 git 명령어를 사용할 수 있다.

설치 후 PowerShell에서 확인했다.

git --version

정상적으로 버전이 출력되면 Git 설치는 완료된 것이다.

2. 기본 브랜치 이름을 main으로 설정

Git 설치 중 초기 브랜치 이름 설정을 다르게 선택했더라도 괜찮다.

나중에 아래 명령어로 바꿀 수 있다.

git config --global init.defaultBranch main

확인 명령어는 다음과 같다.

git config --global init.defaultBranch

결과가 아래처럼 나오면 된다.

main

다만 이번처럼 이미 GitHub에 있는 저장소를 clone하는 경우에는 GitHub 저장소의 기본 브랜치를 그대로 따라오기 때문에 큰 문제는 없었다.

3. Git 사용자 정보 설정

GitHub에 커밋을 올리려면 커밋 작성자 정보를 설정해야 한다.

PowerShell에서 다음 명령어를 실행했다.

git config --global user.name "chailmon"
git config --global user.email "chailmon@outlook.com"

설정 확인은 다음 명령어로 했다.

git config --global --list

대략 이런 값이 보이면 된다.

user.name=chailmon
user.email=chailmon@outlook.com
init.defaultbranch=main

4. GitHub 인증 준비

Git for Windows를 설치할 때 Git Credential Manager를 선택했다면 GitHub 인증은 비교적 간단하다.

처음 git clone 또는 git push를 할 때 GitHub 로그인 창이 뜨고, 브라우저에서 로그인하면 인증 정보가 Windows에 저장된다.

이후에는 매번 토큰을 직접 입력하지 않아도 된다.

나는 HTTPS 방식으로 저장소를 clone했다.

5. 블로그 저장소 clone

작업 폴더를 먼저 만들었다.

mkdir $HOME\Dev\projects
cd $HOME\Dev\projects

그리고 GitHub 저장소를 clone했다.

git clone https://github.com/chailmon/chailmon-blog.git
cd chailmon-blog

clone 후 상태를 확인했다.

git status

정상이라면 다음과 비슷하게 나온다.

현재 브랜치 main
브랜치가 'origin/main'에 맞게 업데이트된 상태입니다.
작업 폴더 깨끗함

또는 영어 환경에서는 이렇게 보일 수 있다.

On branch main
Your branch is up to date with 'origin/main'.
nothing to commit, working tree clean

6. Node.js와 npm 설치

처음 npm ci를 실행했을 때 이런 에러가 발생했다.

npm : 'npm' 용어가 cmdlet, 함수, 스크립트 파일 또는 실행할 수 있는 프로그램 이름으로 인식되지 않습니다.

이 에러는 Node.js가 설치되어 있지 않거나, 설치됐더라도 PATH에 반영되지 않았을 때 발생한다.

그래서 Node.js LTS 버전을 설치했다.

설치 후 PowerShell을 완전히 닫고 새로 열었다.

그다음 버전을 확인했다.

node -v
npm -v

node와 npm 버전이 모두 출력되면 정상이다.

만약 설치 후에도 인식되지 않으면 아래 명령어로 경로를 확인할 수 있다.

where node
where npm

정상이라면 대략 이런 경로가 보인다.

C:\Program Files\nodejs\node.exe
C:\Program Files\nodejs\npm.cmd

7. Node 패키지 설치

Node.js와 npm이 정상 인식된 뒤 프로젝트 폴더에서 패키지를 설치했다.

cd $HOME\Dev\projects\chailmon-blog
npm ci

이 프로젝트에는 package-lock.json이 있기 때문에 npm ci를 사용했다.

새 PC에서 기존 프로젝트의 의존성을 정확히 재현할 때는 npm install보다 npm ci가 더 깔끔하다.

설치가 끝나면 node_modules 폴더가 생긴다.

8. .env 파일 복원

.env 파일은 GitHub에 올리지 않았다.

AdSense Publisher ID 같은 환경변수는 공개 저장소에 올리면 안 되기 때문이다.

그래서 새 PC에서 직접 .env 파일을 다시 만들었다.

New-Item -ItemType File .env

VS Code로 열었다.

code .env

그리고 아래 값을 넣었다.

PUBLIC_ADSENSE_CLIENT=ca-pub-본인애드센스ID

여기서 중요한 점은 ads.txt에 쓰는 pub-... 값이 아니라, AdSense script에 사용하는 ca-pub-... 값이라는 것이다.

.env가 Git에 올라가지 않는지도 확인했다.

git status --ignored -s

정상이라면 아래처럼 보인다.

!! .env

!!는 Git이 해당 파일을 무시하고 있다는 뜻이다.

9. 로컬 개발 서버 실행

이제 로컬에서 블로그를 실행했다.

npm run dev

브라우저에서 아래 주소를 열었다.

http://localhost:4321

확인한 페이지는 다음과 같다.

http://localhost:4321
http://localhost:4321/blog
http://localhost:4321/categories
http://localhost:4321/blog/astro-adsense-blog-build-guide
http://localhost:4321/blog/improving-astro-blog-post-readability

메인 페이지, 글 목록, 카테고리, 글 상세 페이지가 정상적으로 보이면 새 PC에서도 작업을 이어갈 수 있는 상태다.

10. 빌드 테스트

개발 서버 확인 후에는 실제 배포 빌드가 되는지도 확인했다.

개발 서버를 종료한 뒤 실행했다.

npm run build

빌드가 성공하면 dist 폴더가 생성된다.

확인 명령어는 다음과 같다.

dir dist

정상이라면 아래와 같은 파일이나 폴더가 보인다.

index.html
blog
categories
robots.txt
ads.txt
sitemap-index.xml

빌드 결과를 로컬에서 미리 확인하고 싶다면 다음 명령어를 사용할 수 있다.

npm run preview

11. GitHub push 테스트

새 PC에서 실제로 블로그 작업을 이어갈 수 있는지 확인하려면 push 테스트까지 해보는 것이 좋다.

처음에는 테스트용으로 템플릿 파일에 작은 주석을 추가했다.

Add-Content templates\blog-post-template.mdx "`n<!-- Windows setup test -->"

변경 상태를 확인했다.

git status
git diff

빌드도 다시 확인했다.

npm run build

그다음 커밋하고 push했다.

git add templates\blog-post-template.mdx
git commit -m "Test Windows blog workflow"
git push

처음 push할 때 GitHub 로그인 창이 뜰 수 있다.

브라우저에서 로그인하고 권한을 승인하면 된다.

12. 테스트 주석 제거

push 테스트가 끝난 뒤 템플릿 파일에 남아 있는 테스트 주석은 제거했다.

(Get-Content templates\blog-post-template.mdx) |
  Where-Object { $_ -ne "<!-- Windows setup test -->" } |
  Set-Content templates\blog-post-template.mdx

다시 빌드하고 커밋했다.

npm run build
git add templates\blog-post-template.mdx
git commit -m "Remove Windows workflow test comment"
git push

이렇게 하면 테스트 흔적 없이 새 PC에서의 작업 흐름만 확인할 수 있다.

13. Cloudflare 자동 배포 확인

GitHub에 push하면 Cloudflare가 자동으로 빌드하고 배포한다.

Cloudflare Dashboard에서 확인했다.

Cloudflare Dashboard
→ Workers & Pages
→ chailmon-blog
→ Builds 또는 Deployments

최근 배포가 Success 상태라면 정상이다.

실제 사이트도 확인했다.

https://chailmon.com
https://chailmon.com/blog

이번 push는 템플릿 주석 변경이라 화면에는 큰 변화가 없을 수 있다.

하지만 Cloudflare 배포가 성공했다면 새 Windows PC에서 수정 → 커밋 → push → 자동 배포 흐름이 정상적으로 연결된 것이다.

최종 확인 체크리스트

새 Windows PC에서 블로그 작업 환경이 준비됐는지 아래 항목으로 확인할 수 있다.

Git 설치 완료
GitHub 인증 완료
chailmon-blog 저장소 clone 완료
Node.js와 npm 설치 완료
npm ci 성공
.env 복원 완료
npm run dev 성공
npm run build 성공
git push 성공
Cloudflare 자동 배포 성공

이 체크리스트를 모두 통과했다면 새 PC에서도 기존 블로그 작업을 이어갈 수 있다.

마무리

이번 작업으로 Windows PC에서도 chailmon.com 블로그를 계속 관리할 수 있게 되었다.

블로그 작업 환경을 새 PC에 옮길 때 중요한 것은 세 가지였다.

첫째, Git과 Node.js 같은 기본 개발 도구를 먼저 정확히 설치해야 한다.

둘째, GitHub에는 올라가지 않는 .env 파일을 새 PC에서 직접 복원해야 한다.

셋째, 단순히 로컬 실행만 확인하는 것이 아니라 git push와 Cloudflare 자동 배포까지 확인해야 한다.

여기까지 확인하면 새 컴퓨터에서도 기존 블로그 작업을 안정적으로 이어갈 수 있다.