GitHub Pages를 이용한 웹사이트 호스팅

안녕하세요. 오늘은 GitHub Pages를 이용해 웹사이트를 호스팅하는 방법을 알아보겠습니다. GitHub Pages를 통해 배포한 웹페이지는 일반적인 웹 호스팅 서비스와 구분되는 몇 가지 특징이 있습니다.

1. 주요 장점 및 핵심 특징

• 완전 무료 서비스: 별도의 서버 비용이나 트래픽 비용 없이 무료로 웹사이트를 호스팅할 수 있습니다.
• 자동 HTTPS(SSL) 지원: 보안 인증서가 기본 적용되어 https:// 형태의 안전한 보안 프로토콜 주소가 자동으로 제공됩니다.
• Git 및 커밋 연동 (CI/CD): 코드를 수정하고 GitHub 리포지토리에 push하면 몇 초 내로 변경 사항이 웹사이트에 자동으로 반영됩니다.
• 기본 도메인 제공: <username>.github.io/<repository-name> 형태의 무료 서브도메인이 자동 생성됩니다.
• 커스텀 도메인 연결 가능: 따로 구매한 개인 도메인(예: [www.mybrand.com](https://www.mybrand.com))이 있다면 무료로 연결할 수 있습니다.
• 정적 사이트 생성기(Jekyll) 내장: 마크다운(Markdown) 문서만 작성해도 블로그나 문서 사이트로 자동 변환해 주는 Jekyll을 자체 지원합니다.

2. 기술적 한계 및 제약

• 정적 웹사이트(Static Web Site) 전용:
  • HTML, CSS, JavaScript 파일과 이미지/폰트 등 클라이언트 측 자산만 실행할 수 있습니다.
  • Node.js, Python, PHP, Java 같은 백엔드 서버 코드 실행이 불가능하며, MySQL/PostgreSQL 같은 데이터베이스(DB) 연결이 기본적으로 불가능합니다.
• 공개 범위 제약 (무료 플랜 기준):
  • 무료 계정에서는 리포지토리를 Public(공개)으로 설정해야만 GitHub Pages를 사용할 수 있습니다. (소스 코드가 누구나 볼 수 있게 공개됨)
• 대용량 및 트래픽 제한:
  • 리포지토리 크기 권장 제한: 1GB 이하
  • 월간 트래픽 대역폭 제한: 100GB/월
  • 빌드 제한: 시간당 최대 10회 정적 파일 생성 제한

3. 추천 용도

• 포트폴리오 사이트 및 개인 블로그
• 오픈소스 프로젝트 소개 및 기술 문서(Documentation) 페이지
• 간단한 이벤트 페이지, 랜딩 페이지, 프로토타입
• 백엔드가 필요 없는 순수 프론트엔드 웹 앱 (예: 로컬스토리지 활용 앱, 외부 API 연동 클라이언트)

 

멋진 서비스죠? 그럼 호스팅 시작해보겠습니다~

Step 1: GitHub 리포지토리(Repository) 생성

1. GitHub에 로그인합니다.
2. 우측 상단의 + 버튼을 누른 뒤 New repository를 클릭합니다.
3. 리포지토리 설정을 진행합니다:
   • Repository name: 원하는 이름 입력 (예: my-web-site)
   • Public / Private: 반드시 Public을 선택해야 합니다. (무료 계정의 GitHub Pages는 Public 리포지토리만 지원합니다.)
   • Add a README file: 체크박스에 체크합니다.
4. 맨 아래 Create repository 버튼을 클릭합니다.

 

 

 

 

 

 

Step 2: HTML 파일 업로드

1. 생성된 리포지토리 메인 화면에서 오른쪽 상단의 Add file > Upload files를 클릭합니다.
2.  
3. 준비해 둔 HTML 파일과 필요한 관련 파일들(CSS, 이미지 등)을 Drag & Drop 영역으로 끌어다 놓습니다.
4. 주의: 메인 페이지 역할을 할 파일 이름은 반드시 index.html 이어야 정상적으로 첫 페이지가 로드됩니다.
5. 아래쪽의 Commit changes 버튼을 누릅니다.

 

 

 

 

Step 3: GitHub Pages 기능 활성화

1. 리포지토리 상단 메뉴에서 Settings 탭을 클릭합니다.
2. 왼쪽 사이드바 메뉴에서 Pages를 선택합니다.
3. Build and deployment 섹션의 Branch 설정에서:
   • None으로 되어 있는 드롭다운 메뉴를 main (또는 master)으로 변경합니다.
   • 폴더 위치는 / (root) 그대로 둡니다.
4. 오른쪽에 나타나는 Save 버튼을 클릭합니다.

 

 

 

 

Step 4: 배포 확인

1. Save를 누르고 약 1~3분 정도 기다린 후, Settings > Pages 페이지를 새로고침합니다.
2. 상단에 "Your site is live at https://<사용자이름>.github.io/<리포지토리이름>/" 이라는 메시지와 함께 주소가 생성됩니다.
3. 해당 링크를 클릭하면 웹페이지가 정상적으로 배포된 것을 확인할 수 있습니다.