GitHub Pages로 정적 웹사이트 호스팅하기

GitHub Pages로 정적 웹사이트 호스팅하기

GitHub Pages를 사용하여 무료로 정적 웹사이트를 호스팅하는 방법을 상세히 알아보겠습니다.

기본 개념

GitHub Pages는 GitHub 저장소에서 직접 웹사이트를 호스팅할 수 있게 해주는 서비스입니다. 사용자명.github.io 형식의 기본 도메인을 제공하며, 선택적으로 사용자 정의 도메인을 설정할 수 있습니다[1].

주요 특징

• 무료 호스팅
• 자동 빌드 및 배포
• HTTPS 지원
• 커스텀 도메인 설정 가능
• Jekyll 지원

설정 방법 (30단계)

1. GitHub 계정 생성
2. 새 저장소 생성 (사용자명.github.io)
3. 저장소를 로컬에 클론
4. index.html 파일 생성
5. 기본 HTML 구조 작성
6. 변경사항 커밋
7. GitHub에 푸시
8. 저장소 설정으로 이동
9. Pages 섹션 찾기
10. 배포 브랜치 선택 (main)
11. 저장 버튼 클릭
12. 배포 완료 대기 (약 5-10분)
13. 사이트 접속 확인
14. 커스텀 도메인 구매 (선택사항)
15. DNS 설정 페이지 접속
16. A 레코드 추가:
    • 185.199.108.153
    • 185.199.109.153
    • 185.199.110.153
    • 185.199.111.153
17. CNAME 레코드 추가 (www용)
18. GitHub Pages 설정에서 커스텀 도메인 입력
19. DNS 확인 대기
20. HTTPS 활성화
21. 사이트 테스트
22. 모바일 호환성 확인
23. 404 페이지 생성
24. 사이트맵 생성
25. 메타 태그 최적화
26. 성능 테스트
27. 크로스 브라우저 테스트
28. 백업 생성
29. 분석 도구 설정
30. 정기적인 유지보수 계획 수립

문제 해결

404 에러 발생 시

• 저장소 설정 확인
• index.html 존재 여부 확인
• 브랜치 설정 확인
• 캐시 삭제 시도[4]

DNS 설정 문제

• A 레코드 확인
• CNAME 레코드 확인
• 전파 시간 대기 (최대 24시간)
• DNS 설정 재확인[2]

보안 설정

1. HTTPS 강제 적용
2. 커스텀 도메인 검증
3. 접근 제한 설정
4. 보안 헤더 구성

최적화 팁

• 이미지 최적화
• 캐싱 전략 수립
• CDN 활용
• 코드 미니파이

유지보수

• 정기적인 업데이트
• 백업 관리
• 모니터링 설정
• 성능 분석

프롬프트 예시

# GitHub Pages 웹사이트 생성 프롬프트

저장소 이름: [사용자명].github.io
설명: GitHub Pages를 사용한 개인 웹사이트
공개 여부: Public
라이선스: MIT License
.gitignore: Node
브랜치: main

## 초기 파일 구조

/ ├── index.html ├── css/ │ └── style.css ├── js/ │ └── main.js ├── images/ └── README.md

## DNS 설정
A 레코드:
- 185.199.108.153
- 185.199.109.153
- 185.199.110.153
- 185.199.111.153

CNAME: www.[도메인] -> [사용자명].github.io

 

커스텀 도메인 설정 관련 주요 사항

일반적인 오류

• DNS 레코드 설정 오류
• HTTPS 인증서 발급 실패
• DNS 전파 대기 시간 미준수
• 잘못된 CNAME 파일 구성
• 도메인 소유권 확인 실패

DNS 설정 방법

1. 도메인 제공업체의 DNS 관리 페이지 접속
2. A 레코드와 CNAME 레코드 추가
3. 변경사항 저장
4. DNS 전파 대기 (최대 24-48시간)
5. GitHub Pages 설정에서 커스텀 도메인 입력

필요한 DNS 레코드

1. A 레코드 (Apex 도메인용):

185.199.108.153
185.199.109.153
185.199.110.153
185.199.111.153

1. CNAME 레코드 (www 서브도메인용):

• Host: www
• Value: username.github.io

GitHub Status 페이지 확인 이유

1. GitHub Pages 서비스 상태 모니터링
2. 배포 관련 문제 발생 여부 확인
3. 시스템 장애 여부 파악
4. 예정된 유지보수 일정 확인
5. DNS 설정 문제와 GitHub 서비스 문제 구분

주의사항

• DNS 설정 후 최소 30분에서 최대 48시간까지 기다려야 함
• HTTPS 강제 적용은 DNS 설정이 완료된 후에만 가능
• 커스텀 도메인은 한 번에 하나의 GitHub Pages 사이트에만 사용 가능
• DNS 설정 전 도메인 소유권 확인 필수

이러한 설정들은 henrynkoh.github.io와 같은 기본 도메인 대신 사용자가 원하는 도메인으로 GitHub Pages 사이트를 서비스하기 위해 필요합니다.

 

커스텀 도메인 설정 관련 주요 문제점

설정 오류 시 발생하는 문제

1. 웹사이트 접속 불가
2. HTTPS 인증서 발급 실패
3. 보안 경고 메시지 표시
4. 서브도메인 연결 오류
5. DNS 확인 실패 메시지

DNS 설정 시 주의사항

1. 정확한 A 레코드 입력
   • 모든 GitHub Pages IP 주소를 올바르게 입력
   • 오타나 누락 없이 설정
2. CNAME 설정
   • username.github.io 형식으로 정확히 입력
   • www 서브도메인 설정 확인
3. 전파 시간 고려
   • 최소 30분에서 최대 48시간 소요
   • 성급한 설정 변경 자제

가장 흔한 오류

1. DNS 레코드 누락
2. 잘못된 IP 주소 입력
3. CNAME 설정 오류
4. 도메인 소유권 미확인
5. DNS 전파 시간 미준수

GitHub Pages 오류 메시지

1. "DNS check failed" - DNS 설정이 잘못됨
2. "Not served by pages" - GitHub Pages 서비스 연결 실패
3. "Certificate not yet available" - HTTPS 인증서 문제
4. "Domain is not properly configured" - 도메인 설정 오류
5. "Repository not found" - 저장소 접근 권한 문제

이미지에서 보이는 것처럼, GitHub Pages는 기본적으로 username.github.io 도메인을 사용하며, 커스텀 도메인 설정 시에는 위의 주의사항들을 꼼꼼히 확인해야 합니다. 특히 HTTPS 강제 적용은 보안을 위해 필수적이며, 이는 DNS 설정이 올바르게 완료된 후에만 가능합니다.

 

가장 흔한 오류

1. DNS 레코드 설정 오류

• A 레코드 IP 주소 오타
• CNAME 레코드 잘못된 포맷
• DNS 전파 시간 미준수[3]

1. HTTPS 인증서 관련 문제

• 인증서 발급 실패
• HTTPS 강제 적용 설정 오류[4]

1. CNAME 파일 관련 문제

• 대소문자 구분 미준수
• 여러 도메인 동시 설정
• 잘못된 도메인 형식[11]

DNS 설정 주의사항

1. A 레코드 설정

• 정확한 GitHub Pages IP 주소 입력
• 모든 IP 주소 누락 없이 설정[5]

1. CNAME 레코드 설정

• username.github.io 형식 준수
• www 서브도메인 올바른 설정[4]

1. 전파 시간 고려

• 최소 30분에서 최대 48시간 대기
• 성급한 설정 변경 자제[6]

DNS 설정 확인 방법

1. 터미널에서 dig 명령어 사용

dig WWW.EXAMPLE.COM +nostats +nocomments +nocmd

1. Windows PowerShell에서 확인

Resolve-DnsName your-domain.com

1. 온라인 DNS 조회 도구 사용[3][5]

GitHub Status 페이지 확인 방법

1. https://www.githubstatus.com 접속
2. 확인해야 할 항목:

• Pages 서비스 상태
• 진행 중인 장애 여부
• 예정된 유지보수 일정[2]

1. 상태 모니터링

• 실시간 서비스 상태
• 과거 장애 이력
• 시스템 성능 지표[33]

HTTPS 오류 해결 방법

1. HTTPS 강제 적용 확인

• GitHub Pages 설정에서 "Enforce HTTPS" 체크박스 확인
• DNS 설정이 완료된 후 활성화 가능
• 인증서 발급 대기 시간 준수 (최대 24시간)

1. 일반적인 해결 단계

• DNS 설정 재확인
• 캐시 삭제
• 브라우저 재시작
• GitHub Status 페이지에서 서비스 상태 확인

DNS 확인 방법

1. 명령줄 도구 사용

dig example.com +noall +answer
nslookup example.com
host example.com

1. 온라인 도구

• DNS Checker
• WhatsMyDNS
• DNSMap

CNAME 파일 오류 시 발생 문제

1. 기술적 문제

• 사이트 접속 불가
• 도메인 연결 실패
• HTTPS 인증서 발급 실패

1. 주요 오류 원인

• 파일 대소문자 구분 문제
• 불필요한 공백이나 줄바꿈
• 잘못된 도메인 형식
• 여러 도메인 동시 입력

Linux URL 형식 주의사항

1. 대소문자 구분

• Linux는 대소문자를 구분하므로 정확한 URL 입력 필요
• GitHub Pages URL도 대소문자 구분 준수

1. 경로 설정

• 슬래시(/) 사용 시 주의
• 상대 경로와 절대 경로 구분
• 특수문자 사용 시 이스케이프 처리 필요

1. 파일 시스템 제한

• 파일명 길이 제한
• 허용되지 않는 특수문자
• 공백 문자 처리

이러한 설정들은 username.github.io와 같은 기본 도메인이나 커스텀 도메인 모두에 적용되며, 특히 Linux 환경에서 작업할 때 주의가 필요합니다.