GitHub Pages 활용하여 배포하기
3. GitHub Pages 활용하여 배포하기
1. 첫 배포
개발자에게 첫 배포는 특별한 의미를 지닙니다. 내 컴퓨터에서만 볼 수 있던 웹페이지가 인터넷 어디서나 접속 가능한 ‘진짜’ 웹사이트가 되는 순간이니까요. GitHub Pages는 이 특별한 순간을 놀랍도록 간단하게 만들어줍니다.
GitHub Pages는 GitHub이 제공하는 무료 정적 웹사이트 호스팅 서비스입니다. 여기서 ‘정적’이라는 단어, GitHub이라는 단어 등은 실습이 모두 끝나면 설명 드리도록 하겠습니다. 우선 복잡한 설명 없이 바로 실습에 들어가봅시다.
2. 배포 준비하기
GitHub Pages로 배포하기 전에 몇 가지 준비사항이 있습니다. 먼저, GitHub 계정이 필요합니다. 아직 없다면 github.com에서 무료로 만들 수 있습니다. 아래 링크로 접속하셔서 회원 가입을 해주세요. 세계에서 가장 많이 사용하는 서비스입니다. 안심하고 사용하셔도 됩니다.
GitHub · Build and ship software on a single, collaborative platform
그리고 배포할 웹페이지 파일들이 준비되어 있어야 합니다. 바이브 코딩으로 만든 페이지, 아래와 같은 구조를 가지고 있어야 합니다. 일반적으로 아래와 같은 파일 구조를 가집니다. 혹시 index.html이 보이지 않거나, index.html을 더블클릭하여 실행하는 것만으로 실행이 되지 않는다면 ‘HTML, CSS, JavaScript로 이 프로젝트를 다시 만들어줘’라고 해주세요. index.html 파일이 필수 파일입니다. 다른 파일은 없을 수도 있습니다.
저는 앞서 만든 바이브 코딩을 배포하도록 하겠습니다.
3. 배포하기
배포 과정을 차근차근 살펴보겠습니다. 아래 4단계로 진행이 됩니다.
3.1 새 저장소 만들기
GitHub에 로그인한 후, 'New repository' 버튼을 클릭합니다. 저장소 이름을 정하고, Public으로 설정합니다. Private 저장소도 GitHub Pages를 사용할 수 있지만, 무료 계정에서는 제한이 있습니다.
만드실 때 반드시 이름과 Add README 버튼을 On으로 바꿔주세요. Add README 버튼이 On으로 안되어 있으면 다음 실습을 진행할 수 없습니다.
Create repository 버튼을 클릭해주세요.
3.2 파일 업로드
만든 저장소에 웹페이지 파일들을 업로드합니다. 'Upload files' 버튼을 클릭하고 파일들을 드래그 앤 드롭하면 됩니다.
업로드를 할 때 주의할 점이 있습니다. 반드시 폴더가 아니라, ‘index.html’이 최상위에 있어야 합니다. 누군가 여러분 서비스를 접속하면 가장 먼저 찾는 것이 ‘index.html’이 있는지를 찾기 때문에 그렇습니다. 저는 드래그엔 드롭으로 아래 3개의 파일을 업로드 했습니다. 이제 commit chages 버튼을 눌러주세요.
만약 VSCode와 동일한 환경에서 드래그엔드롭으로 작업을 하고 싶다면 https://github.com/paullabkorea/vibecoding 을 https://github.com/paullabkorea/vibecoding 처럼 고쳐주세요. com을 dev로 고치라는 얘기입니다. 그러면 아래와 같이 VSCode 화면이 뜨면서 컴퓨터에서 편집했던 것처럼 편집을 할 수 있습니다. 여기로 이동하는 단축키는 . 입니다.
물론 개발을 조금 해보신 분이라면 Claude Code와 GitHub을 연동하여 자동으로 Push되게 할 수도 있습니다. 다만 이렇게 권하지 않는 이유는 2가지가 있습니다. 이 책을 읽으시는 분의 대부분이 ‘비전공자’, ‘비개발자’ 대상이기도 하고, 그렇지 않다고 하더라도 GitHub 연동하면 토큰을 꽤나 소모합니다. 연동하지 않고 명령어를 통해 commit, push하시길 바랍니다.
3.3 GitHub Pages 활성화
저장소의 Settings 탭으로 이동합니다. 스크롤을 내려 'Pages' 섹션을 찾습니다. Source에서 'Deploy from a branch'를 선택하고, Branch는 'main' 선택합니다. Save 버튼을 클릭하면 설정이 완료됩니다.
3.4 배포 확인
설정 후 몇 분이 지나면 웹사이트가 활성화됩니다. 바로 활성화가 되지 않으니 5분에서 10분 정도를 기다려주세요. 부트캠프를 해보니 20분 정도 걸리는 경우도 있었습니다. 페이지는 생성이 되었다고 알림으로 뜨지 않으니 새로고침을 계속 하셔야 합니다.
Pages 설정 화면 상단에 "Your site is live at..."라는 메시지와 함께 웹사이트 주소가 표시됩니다. 클릭해보세요. 여러분의 웹페이지가 온라인에 공개된 것을 확인할 수 있을 것입니다.
실제 배포된 링크입니다. 여러분도 접속이 가능합니다. 이 페이지는 지우지 않고 유지하도록 하겠습니다.
4. 커스텀 도메인 연결하기
GitHub Pages는 커스텀 도메인 연결도 지원합니다. 'myname.com' 같은 자신만의 도메인을 구매했다면, 이를 GitHub Pages와 연결할 수 있습니다. Pages 설정에서 'Custom domain' 란에 도메인을 입력하고, 도메인 제공업체에서 DNS 설정을 조정하면 됩니다.
구매하는 방법, 연결하는 방법 등은 배포에 대한 지식을 먼저 설명 드린 후 이후 챕터에서 진행하도록 하겠습니다.
