GitHub Page 이용하여 홈페이지 배포하기

요약

1. 프로젝트 루트 디렉토리에 index.html를 생성한다. 간단하게 작성한다.
2. (github 유저 이름).github.io라는 이름으로 public 저장소(repository)를 만든다.
3. 저장소에 push한다.
4. https://(github 유저 이름).github.io에 접속한다.

완성 예시)
https://thepott.github.io

---

html과 css를 활용하여 만든 홈페이지를 외부에서도 접속이 가능하게 만들어보자. 여러 방법이 있지만, 여기에서는 간단하게 GitHub Page를 이용한다.
깃헙 페이지 공식 사이트
깃헙 페이지 공식 문서

프로젝트 제작

구조

각 폴더 안에는 index.html이 있어야 한다. 이러면 해당 폴더에 접근하였을 때 index.html을 자동으로 보여준다.

작성

index.html이 렌더링되었다는 것을 확인할 수 있게만 적어두면 된다.

<!--예시-->
<p>Hello world</p>

저장소에 올리기

저장소 생성

VSCode의 사이드바에서 "Publish to GitHub"을 누른다.

저장소의 이름은 (github 유저 이름).github.io로 한다. 이때, github 유저 이름은 아래의 빨간 네모의 위치에서 확인할 수 있다.

저장소의 이름을 양식에 맞게 적었으면 public repository로 게시한다.

commit, push

모든 파일이 선택되어 있는 것을 확인하고 "OK" 버튼을 눌러 push한다.

사이트 방문

https://(github 유저 이름).github.io에 접속하여 페이지가 배포되었는지 확인한다.

오류 발생시

위와 같은 화면이 나타날 경우 아래의 조치를 취한다.
1. 저장소 이름이 올바르게 설정되었는지 확인한다.
2. index.html에서 아무 것이나 수정을 한 후 다시 commit, push를 해본다.

404 오류시 확인할 것

1. push가 되었는가?
2. 현재 action이 무엇인가?
3. deploy 주소가 뭐라고 뜨는가?

이미지가 안 뜰 경우 확인할 것

1. 폴더명, 파일명에 한글, 띄어쓰기가 들어있지는 않은가?

출처

깃헙 페이지 공식 사이트, https://pages.github.com/
깃헙 페이지 공식 문서, https://docs.github.com/ko/pages