GitHub Pages는 GitHub에서 제공하는 무료 웹 호스팅 서비스로, Repository에 있는 HTML, CSS, JavaScript 파일 등을 웹페이지로 배포할 수 있는 기능이다. 이 서비스를 통해 내가 만든 웹페이지를 손쉽게 온라인에 배포할 수 있다. GitHub Pages를 이용한 배포 과정은 다음과 같이 크게 5단계로 나눌 수 있다.
1. GitHub Repository 생성하기
첫 번째 단계는 GitHub에서 Repository를 생성하는 것이다. Repository는 프로젝트 파일을 관리하고 버전을 추적할 수 있는 공간이다.
Repository 생성 방법:
- GitHub에 로그인: GitHub에 로그인한 후, 우측 상단의
+아이콘을 클릭하고New repository를 선택한다. - Repository 생성: Repository 이름을 입력하고,
Public을 선택한 후Create repository버튼을 클릭하면 된다.
이제 프로젝트 파일을 업로드할 준비가 완료된다.
2. 프로젝트 파일 업로드하기
로컬에서 작업한 웹페이지 파일(HTML, CSS, JS 등)을 GitHub Repository에 업로드해야 한다. 로컬에서 Git을 사용해 프로젝트 파일을 업로드할 수 있다.
Git을 사용해 파일 업로드:
- 터미널에서 작업: 터미널(또는 명령 프롬프트)을 열고, 프로젝트 디렉토리로 이동한다.
- Git 명령어 입력: 다음 명령어를 입력하여 Git Repository를 초기화하고, 원격 Repository에 연결한다:
git init git remote add origin https://github.com/사용자이름/Repository이름.git - 파일 추가 및 푸시: 모든 파일을 추가하고 커밋한 다음, GitHub에 푸시한다:
git add . git commit -m "Initial commit" git push -u origin main
이제 GitHub Repository에 파일이 업로드되었는지 확인할 수 있다.
3. GitHub Pages 설정하기
이제 본격적으로 GitHub Pages를 설정해보자. 이 과정은 Repository에 있는 파일을 웹페이지로 배포하는 중요한 단계이다.
GitHub Pages 설정 방법:
- Settings로 이동: Repository 메인 페이지에서
Settings로 이동한다. - Pages 설정: 왼쪽 메뉴에서
Pages를 클릭한다. "Source" 섹션에서 브랜치를main으로 설정하고,/root를 선택한다. - 설정 완료: "Save" 버튼을 클릭하면 설정이 완료된다.
설정이 완료되면, 배포된 웹페이지의 URL이 화면 상단에 표시된다. 이 URL을 통해 웹페이지를 확인할 수 있다.
4. 배포된 웹페이지 확인하기
GitHub Pages 설정이 완료되면, 내가 만든 웹페이지가 실제로 배포된다. 일반적으로 URL은 다음과 같은 형식을 가진다:
https://사용자이름.github.io/Repository이름/이 URL을 브라우저에 입력하면 웹페이지가 온라인에서 어떻게 보이는지 확인할 수 있다.
5. 변경 사항 업데이트하기
웹페이지를 배포한 후에도 계속해서 업데이트가 필요할 수 있다. 변경 사항을 적용하려면 로컬에서 파일을 수정한 후, 다시 GitHub에 푸시하면 된다.
변경 사항 푸시하기:
- 변경된 파일 스테이징 및 커밋: 변경된 파일을 스테이징하고 커밋한다:
git add . git commit -m "Updated the webpage" - 변경 사항 푸시: 그런 다음, 변경 사항을 원격 Repository에 푸시한다:
git push
GitHub Pages는 자동으로 변경 사항을 반영하여 웹페이지를 업데이트한다.
주의사항
- 404 에러 처리: 만약 배포 후 404 에러가 발생한다면,
index.html파일이 Repository의 루트 디렉토리에 있는지 확인해야 한다. - 커스텀 도메인 설정: 커스텀 도메인을 사용하고 싶다면,
Settings의 "Custom domain" 섹션에서 설정할 수 있다.
마무리
GitHub Pages를 통해 웹페이지를 배포하는 과정은 매우 간단하며, GitHub Repository를 활용하여 무료로 호스팅할 수 있다는 장점이 있다. 이 과정을 통해 누구나 쉽게 웹 개발 프로젝트를 실제 웹에서 배포하고 관리할 수 있다. 이제 자신만의 웹페이지를 세상에 공개해보자!
참고: 더 많은 정보를 원한다면 GitHub Pages 공식 문서에서 자세한 내용을 확인할 수 있다.
