19강. GitHub Pages 배포: 정적 사이트를 공개하고 점검하기

?1. 이번 강의에서 해결할 문제

로컬에서는 보이지만 저장소 하위 URL에서 CSS와 이미지가 깨질 수 있습니다. 공개 전에 상대 경로, 파일 대소문자와 정적 기능 범위를 확인합니다.

✓2. 학습 목표

✓이번 강의를 마치면

• GitHub Pages가 정적 파일을 공개하는 흐름을 설명합니다.
• 저장소 하위 경로에서 깨지지 않는 URL을 사용합니다.
• 공개 URL에서 Network, 메뉴, 모달, 필터와 폼을 점검합니다.

◇3. 핵심 개념

GitHub Pages는 HTML, CSS, JavaScript와 이미지를 정적으로 제공합니다. 저장소가 game-dev-portfolio라면 기본 URL은 보통 https://사용자.github.io/game-dev-portfolio/ 형태입니다. 루트 절대 경로 /css/style.css보다 ./css/style.css가 프로젝트 사이트에서 안전합니다.

상세 Git·GitHub 사용법과 Actions는 Git · GitHub 기초집에서 학습합니다. Pages 화면과 Actions 버전은 바뀔 수 있으므로 GitHub Pages 공식 문서를 확인합니다.

✎4. 단계별 실습

PowerShell · 실행 위치: D:\Projects\game-dev-portfolio

git status --short
git diff --check
git add .
git commit -m "feat: complete game developer portfolio"
git push origin main

예상 결과: 변경이 커밋되고 원격 main에 전송됩니다. 저장소 Settings → Pages에서 현재 공식 안내에 따라 배포 원본을 선택합니다. 이미 Actions 방식이 있다면 기존 workflow를 덮어쓰지 않습니다.

공개 URL 점검

1. 강력 새로 고침 후 Network 404가 없는지 봅니다.
2. 모바일 폭에서 메뉴·카드·폼을 확인합니다.
3. 필터, 모달, 테마 저장을 실행합니다.
4. 문의 폼이 실제 네트워크 요청을 보내지 않는지 확인합니다.

→5. 코드가 동작하는 이유

커밋과 push가 공개 원본을 갱신하고 Pages가 정적 파일을 URL로 제공합니다. 상대 URL은 현재 문서가 있는 저장소 하위 경로를 기준으로 계산됩니다. 서버 코드가 없으므로 폼 전송과 로그인은 생기지 않습니다.

!6. 자주 하는 실수와 해결법

!자주 하는 실수

• /assets/... 루트 경로 사용: 프로젝트 사이트에서는 ./assets/...를 확인합니다.
• 대소문자가 다른 파일명: Git의 실제 이름과 HTML 참조를 맞춥니다.
• 기존 workflow를 새 예제로 덮어씀: 저장소의 현재 배포 방식을 먼저 확인합니다.
• 비밀 값을 저장소에 커밋: 정적 사이트 파일은 공개된다고 가정합니다.

✎7. 직접 실습

✎직접 실습

Pages에 사이트를 공개하고 공개 URL에서 Network 404, 모바일 메뉴, 모달, 필터, 테마와 폼을 점검하세요. 실패한 경로가 있다면 로컬·공개 URL 차이를 기록합니다.

?8. 이해 점검 질문 3개

?이해 점검

1. 저장소 프로젝트 사이트에서 루트 절대 경로가 깨질 수 있는 이유는 무엇인가요?
2. GitHub Pages에서 실제 문의 전송을 구현할 수 없는 이유는 무엇인가요?
3. 로컬 성공 뒤 공개 URL을 다시 검증해야 하는 이유는 무엇인가요?

■9. 핵심 요약

■핵심 요약

GitHub Pages에는 공개 가능한 정적 파일만 배포합니다. 기존 배포 방식을 보존하고 상대 경로와 실제 공개 URL의 기능을 다시 확인합니다.