GitHub Pages로 내 웹사이트 무료 배포하기 (실제 주소 공개 방법)

 

GitHub Pages로 내 웹사이트 무료 배포하기 (실제 주소 공개 방법)

코딩을 공부하거나 개인 포트폴리오, 간단한 웹 토이를 만들고 나면 "내가 만든 이 웹사이트를 다른 사람들에게 어떻게 보여주지?"라는 고민을 하게 됩니다.

서버를 따로 구매하거나 어렵게 설정할 필요 없이, 소스 코드를 올려둔 GitHub에서 무료로 제공하는 GitHub Pages 기능을 이용하면 단 몇 분 만에 내 웹사이트를 세상에 공개하고 실제 URL 주소까지 발급받을 수 있습니다.

이번 글에서는 GitHub에 업로드된 프로젝트를 실제 웹사이트 주소로 배포하고 확인하는 방법을 아주 쉽게 정리해 드리겠습니다.

1. 배포 전 체크리스트: 레포지토리 공개(Public) 설정

GitHub Pages를 무료로 이용하기 위해서는 소스 코드가 담긴 레포지토리가 Public(전체 공개) 상태여야 합니다.

1. 내 웹사이트 소스가 있는 GitHub Repository로 이동합니다.

2. 상단 메뉴에서 [Settings] 탭을 클릭합니다.

3. 좌측 메뉴에서 [General]을 선택한 뒤, 페이지 하단으로 내려가 General visibility 항목을 확인합니다.

4. 현재 Private으로 되어 있다면 [Change visibility] 버튼을 눌러 Public으로 변경해 줍니다.

2. GitHub Pages 배포 설정하기

공개 설정이 완료되었다면, 본격적으로 웹사이트 배포를 활성화해 보겠습니다.

1. 레포지토리 상단의 [Settings] 탭을 다시 클릭합니다.

2. 좌측 사이드바의 [Code and automation] 영역 아래에 있는 [Pages] 메뉴를 선택합니다.

3. Build and deployment 섹션에서 Source 항목을 Deploy from a branch로 선택합니다.

4. 바로 아래 Branch 설정을 다음과 같이 지정합니다.

   • 첫 번째 칸: 배포할 브랜치 선택 (main 또는 master)

   • 두 번째 칸: 폴더 경로 선택 (/ (root))

5. 설정이 끝나면 우측의 [Save] 버튼을 누릅니다.

3. 실제 공개된 웹사이트 주소 확인하기

저장 버튼을 누른 뒤 페이지를 새로고침(F5)하거나 1~2분 정도 기다리면, Pages 설정 화면 상단에 다음과 같은 안내 문구가 나타납니다.

Your site is live at [https://사용자이름.github.io/저장소이름/](https://사용자이름.github.io/저장소이름/)

• 이 문구 아래에 파란색 링크로 표시되는 주소가 바로 전 세계 누구나 접속할 수 있는 내 웹사이트의 실제 주소입니다.

• [Visit site] 버튼을 클릭하여 웹사이트가 정상적으로 배포되었는지 바로 확인할 수 있습니다.

💡 알아두면 좋은 꿀팁

• 자동 업데이트: 코드를 수정하여 GitHub에 push할 때마다 웹사이트 내용도 자동으로 반영됩니다. (반영까지 1~2분 소요)

• 기본 도메인 구조: 기본 주소는 https://[GitHub아이디].github.io/[저장소이름]/ 형식으로 생성됩니다.

• 공식 문서 참고: 더 자세한 설정이나 커스텀 도메인(개인 도메인) 연결 방법이 궁금하시다면 GitHub Pages 공식 Quickstart 가이드를 참고해 보세요.

이제 링크를 복사해서 친구들이나 동료들에게 내가 만든 웹사이트를 자신 있게 공유해 보세요!