깃허브 페이지 재도전

개발자들이 주로 활동하고 개인 페이지를 활용하고 있는 깃허브에 페이지를 만들어보기 위해 시도를 해보았지만 이것저것 손이가는 부분이 많아서 미뤄두었었다. 그런데 이번에 다시 의지가 생겨서 페이지를 만저보고 한번 구축해볼까하는 생각에 시도해보려고한다.

깃 허브 페이지의 장점으로 꼽자면

1)무료 도메인

2)ssl 걱정없는점 티스토리와 동일함

3)여러 라이브러리와 기능들 테스팅

4)페이지 커스텀

등이 있을 수 있고 개인마다 다를것이지만 개인적 커스텀이 가장 끌리며 그다음 라이브러리다.

 

1. 리파지토리 만들기

먼저 github pages를 이용하기 위해서 github repository를 만든다

기본적으로 도메인 주소는 https://USERNAME.github.io/REPOSITORY의 포멧으로 만들어진다. 예를 들어, 아래 사진처럼 구성하면 https://goosesystem.github.io/goldeneggs로 만들어진다.

리파지토리 새로 만들기

이름을 정해준다

2. 페이지 설정

리파지토리 생성 후 'settings'로 이동하여 옆에 보면 'github pages'라는 섹션을 발견할 수 있다. 깃 페이지 호스팅 원리는 해당 리파지토리에 푸시된 브랜치를 루트 폴더로 삼아 호스팅을 한다. 브랜치 이름은 크게 무관하다.

settings

페이지 위치

여기에 브랜치를 시켜줄 루트 폴더를 만든 후에 여기서 연결시켜줄 수 있다. 보니까 테마도 여기서 설정할 수 있게 되어 있는 거 같다.

3. index.html

우선 1개의 정정 html 파일을 만들어서 업로드 테스트를 해보자 소스 코드를 컴퓨터에 clone 해보자.

bash를 열고

클론 생성

생성된 다음의 루트 폴더에 html 파일을 만든다.

index.html 생성

만들고 리파지토리에 푸시해준다.

푸시

코드를 푸시하고 나서 다시 settings의 깃허브 페이지 섹션으로 이동해서 아까는 보이지 않았던 main 브랜치를 선택해서 'save'를 눌러주면 된다. 해당 링크에 배포되 확인해보라는 문구가 나온다.

main 선택 후 세이브

세이브 후

게시된 모습

이제 'React'나 'Vue'같은 웹 프레임워크나 웹 프론트엔드 Nuxt.js 등 'github actions'를 이용하여 main 브랜치에 푸시되면 알아서 빌드해서 gh-페이지 브랜치에 다시 배포하게끔 CI/CD를 구성하던지 아니면 나름데로 빌드 방법을 구상해볼 생각이다.