GitHub Pages로 정적 사이트 배포하기

GitHub Pages로 정적 사이트 배포하기에서 먼저 볼 부분

GitHub Pages는 정적 파일을 저장소에서 바로 공개할 수 있는 기능입니다. 간단한 HTML/CSS 사이트 배포 연습에 좋습니다.

GitHub Pages는 서버 코드를 실행하는 서비스가 아니라 정적 파일을 공개하는 기능입니다. HTML, CSS, JavaScript 파일 중심 사이트에 잘 맞습니다.

저장소 Settings의 Pages 메뉴에서 브랜치와 폴더를 선택하면 배포 주소가 만들어집니다. 설정 후 실제 반영까지 시간이 걸릴 수 있습니다.

커스텀 도메인을 연결하려면 DNS 설정도 필요합니다. 이때 GitHub Pages와 Cloudflare Pages 같은 다른 배포 방식이 섞이지 않도록 주의해야 합니다.

정적 HTML 배포 흐름

git add index.html styles.css
git commit -m "정적 사이트 추가"
git push origin main
# GitHub 저장소 Settings > Pages에서 배포 소스 선택

이 예제는 그대로 복사해서 확인하는 것보다 한 줄씩 바꿔보는 쪽이 더 도움이 됩니다. 태그 이름, 선택자, 변수 이름, 함수 실행 위치를 조금씩 바꾸면 어떤 부분이 결과에 영향을 주는지 직접 확인할 수 있습니다.

잘못 작성했을 때 나타나는 흐름

Git 글은 명령어를 외우기보다 작업 전 상태, 기록할 파일, 원격 저장소 반영 순서로 나누어 보는 것이 좋습니다.

문제가 생겼을 때는 먼저 현재 브랜치와 변경 파일을 확인하고, 그다음 커밋 또는 원격 상태를 확인하는 순서가 안전합니다.

GitHub와 배포 글은 설정 화면과 DNS가 함께 얽히므로 한 번에 여러 설정을 바꾸기보다 하나씩 확인하는 편이 좋습니다.

브라우저에서 직접 확인하는 순서

먼저 화면에 나타나는 결과를 보고, 그다음 코드에서 방금 수정한 부분을 확인하세요. 결과가 예상과 다르다면 콘솔 오류, 파일 경로, 선택자 이름, 태그 닫힘, 실행 순서 중 하나가 흔한 원인입니다.

초보 단계에서는 정답 코드를 한 번에 외우기보다 실패한 코드와 수정한 코드를 나란히 비교하는 방식이 좋습니다. 이 글의 예제를 기준으로 작은 값을 바꿔보면 다음 글을 읽을 때도 기준이 더 선명해집니다.

실습 후 점검할 항목

• 저장소에 index.html이 있는지 확인하기
• Pages 소스 브랜치가 맞는지 확인하기
• 배포 주소가 열릴 때까지 기다리기
• 커스텀 도메인 DNS가 올바른지 확인하기