(GitHub Desktop 이용)GitHub gh-pages로 호스팅하기

GitHub에서 특별한 이름을 가진 branch(코드들의 평행세계)를 가지고 있으면 공짜로 static 호스팅을 할 수 있도록 해준다.
(Branch를 통해 GitHub에서 다양한 버전 관리와 새로운 기능을 추가해보는 시도를 해볼 수 있다. branch는 서로 영향을 미치지 않기 때문에 독립적으로 여러 작업을 할 수 있다. branch에 관한 자세한 내용은 아래 글 참고)
브랜치란? 【브랜치 (Branch)】 | 누구나 쉽게 이해할 수 있는 Git 입문~버전 관리를 완벽하게 이용해보자~ | Backlog

누구나 쉽게 이해할 수 있는 Git 입문~버전 관리를 완벽하게 이용해보자~ | Backlog

즉 누구나 자신의 웹 사이트를 업로드 할 수 있도록 GitHub가 URL을 제공한다.

하지만 static 웹사이트, 즉 HTML, CSS, JS로만 이루어진 사이트(프론트엔드)만 가능하고 백엔드는 다룰 수 없다.

---

우선 GitHub Desktop을 실행시킨 후 작업 대상 레포지토리로 이동한다.
(위의 경우 RPS)

branch탭을 열어보면 위와 같은 화면이 나온다. New branch를 눌러 branch를 추가한다.

이름은 무조건 gh-pages로 해야 한다. 아까 위에서 언급했듯 특별한 이름을 가진 branch를 무료로 호스팅 해주는데 그 이름이 gh-pages인 것이다.

branch를 생성했다면 Publish 해주면 된다.

시간이 조금 지나고 GitHub 사이트에 접속해보면

우측에 Environments 탭에 github-pages과 활성화 된 것을 볼 수 있다.

여기 들어가서

View deployment를 누르면 호스팅 중인 웹 사이트를 볼 수 있다.
해당 URL을 공유하면 다른 사람도 우리가 만든 웹 페이지를 별도의 설정없이 볼 수 있다.
(GitHub에서 호스팅 해주기 때문)

이렇게 생성된 URL은 유저이름.github.io/repository이름 이다.

---

만약 코드에 수정사항이 생긴다면 어떻게 수정해야 할까?

여기서는 조심해야 한다. 잘못하면 코드가 꼬일수도 있고 해결하는데 많은 시간이 걸릴 수 있다.

결론부터 말하자면 master branch(main)으로 이동해서 코드 수정 후 commit, push => gh-pages branch로 이동하여 'Update from main' => Push의 순서로 이루어 진다.

우선 main branch로 이동한다

현재 branch가 main인 것을 확인할 수 있다

위에 Current branch가 main인 것을 확인하고 코드를 수정한다.
이후 main branch에서 commit하고 push 까지 한다. (보통 GitHub에 커밋할 때 처럼)

이후 다시 gh-pages branch로 이동한다.

Branch 메뉴의 Update from main을 누르면 main에서 수정 및 commit했던 사항들이 gh-pages branch로 넘어와서 commit된다. 이후 push해주면 gh-pages에도 잘 적용된다.

다시 한번 말하지만 gh-pages의 코드를 수정할 때는 main으로 이동해서 코드를 수정, 저장, commit한 후 gh-pages branch로 이동하여 'Update from main'을 통해 push하는 것이다.