깃허브 아무 레포지토리나 웹페이지로 만들기(Github page 기초)

username으로 안 맞춰도 만들 수 있다!

깃허브 페이지 만들기 자료를 검색해보면, 대부분의 자료들이 <username>.github.io 로 페이지를 만들어야 한다고 합니다. 글을 작성하고 있는 현재 공식사이트에서도 그렇게 말하고 있습니다. 하지만 분명히, 레포 이름이 .github.io 로 끝나지 않는데도 잘 호스팅되고 있는 사이트를 내가 봤는데! 그래서 방법을 찾아보았습니다.

하다보니 깃허브 page가 돌아가는 원리를 이해하는데도 도움이 될 것 같아 포스팅합니다.

만들기

1. 레포지터리 만들기

   

   • 아무 이름으로나 레포지토리를 만듭니다.
   • 이 때 README file 은 만들면 좋습니다.(나중에 만들면 귀찮으니까)
   • index.html 이나 README.md 파일이 깃허브 페이지의 메인 역할을 합니다.

2. Github page Setting

   

   • Setting > Pages 로 들어가서 Branch 를 정해줍니다.
     • 이 때 브랜치는 main 이 아니여도 상관은 없습니다.
   • Root(메인 파일로 설정해줄 디렉토리) 도 설정해주고 Save 합니다.

3. 배포 진행 확인

   

   • Actions 창으로 들어가보면 깃허브에서 뭔가 자동으로 배포를 하고 있는 것을 확인할 수 있습니다.
   • 우리가 자동으로 배포를 할 수 있는 게 이 Action 덕분입니다.
   • 깃허브 액션이 요즘 배포 자동화로 핫한데, 이 자동화를 위한 파일들도 마켓에서 판매하는 등 매우 편리하고 공부해놓으면 좋을 것 같은 스멜이 납니다.

   

   • 배포가 완료되면 저렇게 파란불이 들어옵니다.
   • 이후에 깃헙 페이지를 배포하시거나, Jekyll로 호스팅을 하시면서 이 액션 창을 많이 들어오게 될텐데, 배포가 실패하면 빨간색이 뜨고 들어가면 왜 실패했는지 로그도 확인할 수 있습니다.
   • 깃허브, 너무 편하다!

4. 배포 확인

   

   • 다시 Github Pages 창으로 돌아와보면 맨 윗줄에 우리의 사이트 링크가 나와있는것을 알 수 있습니다.
   • Visit Site 를 누르거나 링크를 복사해 붙여넣어 잘 호스팅되고 있는지 확인하겠습니다.

   짜란! 우리의 MD 파일이 잘 호스팅 되고 있는 것을 알 수 있습니다.

   배포 완료.

이해해보기(추측 다수)

만들면서 이해해 본 Github Pages 호스팅의 원리는

commit이 이루어진다 -> Github에서 자동배포 프로세스를 돌린다(Workflow) -> URL이 주어지면서 호스팅된다.

입니다.

Jekyll 자동 실행

이 때 Workflow 중에 기본 설정된 Jekyll 이 돌아가면서, .md 파일도 메인 페이지처럼 활용할 수 있도록 해주는 것으로 보입니다.

실제로 배포시 Jekyll 이 작동하지 않도록 루트 디렉토리에 .nojekyll(빈파일) 을 넣어주면 배포는 성공하지만 index.html이 없다는 안내 메시지가 나옵니다.

• index.html로만 호스팅하고 싶으면 Jekyll을 안 쓰면 됩니다!

  

다양한 Page 설정들

• Jekyll을 사용한다면 _config.yml 파일을 통해 사이트를 어떻게 빌드할 지 정할 수 있습니다.
  • Github 에서는 공식적으로 Jekyll을 이용해 정적 사이트를 빌드해 제공할 수 있게 하고 있습니다.
  • 그래서 별다른 Jekyll 명령어를 입력할 필요없이 (로컬에서는 입력하면서 개발했지만) 설정과 파일들만 올리면 Github이 명령어를 자동 실행합니다.

• 위에서는 간단하게 지정한 Branch 에서 자동배포가 이루어지게 했지만 그 위의 Source 를 Deploy from a branch 에서 Github Actions 로 바꾸면 Workflow 를 선택하여 깃허브에서 제공하는 액션을 통해 배포를 할 수 있습니다.

  

  • 이 메뉴에도 빌드 없이 Static HTML 으로 배포하는 Workflow가 있습니다.
    • workflow에 대한 이해가 쌓이면 이걸 더 애용할 것 같습니다.
  • 윗쪽의 browse all workflows 를 누르면 이미 만들어진 Workflow들을 볼 수 있는데, 유명한 정적웹사이트 프레임워크를 위한 프리셋들도 많이 있습니다.
  • 공부가 더 되면 create your own 을 이용하여 직접 Workflow를 만들어 볼 수도 있겠죠.
• .github/workflows/ 디렉토리에 .yml 파일을 만들면 깃허브에서 인식하여 액션을 진행하는 것으로 보입니다. 프리셋들은 이 yml파일 생성을 자동으로 해줍니다.

추가 공부 계획

• Action 과 Workflow에 대해서 좀 더 공부해보고 간단한 workflow를 작성해 볼 계획입니다.
• 추측이였던 부분들을 Document를 찾아 확인할 계획입니다.

끝.