github 를 이용해서 무료로 정적 웹사이트 호스팅하는 방법

정적 웹사이트 호스팅을 무료로 할 수 있는 방법에 대해 알아보다가 github pages 라는 서비스를 알게 되어 이를 알아보고 적용한 과정을 정리해서 공유드립니다. branch 를 대상으로 설정하는 방법도 있지만, 본 글에서는 github action 과 tag 를 이용한 방법으로 공유 드리고자 합니다.

 

github action yml 파일 작성

.github/workflows/github-page-ci-cd.yml 파일을 생성 후 내용을 아래와 같이 작성해줍니다.

name: github-page-ci-cd

on:
  push:
    tags:
      # 레포지토리에 아래 패턴과 일치하는 태그가 생성될 때 아래 jobs 들이 진행됩니다.
      # 아래 예시같은 경우 레포지토리에 github-page-v0.0.1 라는 태그가 생성되면 트리거가 발동합니다.
      - "github-page-v[0-9]+.[0-9]+.[0-9]+"

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v1
        with:
          node-version: 20
          registry-url: https://registry.npmjs.org/

      # 정적 웹사이트 배포를 위한 빌드 과정을 작성하면 됩니다.
      # 아래는 그 예시 입니다.
      # - run: yarn install
      # - run: yarn build
      # - run: or more...

      - name: Upload Artifact
        uses: actions/upload-pages-artifact@v3
        with:
        	# 빌드 결과물이 생성되는 경로를 작성해줍니다. 
        	# 여기에서는 예시로 yarn build 명령어를 입력하면 빌드 결과물이 ./build 에 생성된다고 가정하였습니다.
        	# 즉, 만약 빌드 결과물이 ./out/build 에 생성된다면 아래 path 를 "./out/build" 로 수정하면 됩니다.
          path: "./build" 

  github-page-deploy:
    needs: build
    runs-on: ubuntu-latest
    permissions:
      pages: write
      id-token: write
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    steps:
      - name: Deploy Github Pages
        uses: actions/deploy-pages@v4

• 여기서 "url: ${{ steps.deployment.outputs.page_url }}" 이 부분은 없어도 작동하는데는 이상이 없지만 actions/deploy-page 공식문서 예제에는 해당 부분이 존재하고 있기에 유지 하였습니다.
• 빌드된 결과물이 생성되는 폴더 밑에는 index.html 파일을 포함한 정적 웹사이트 호스팅을 위한 정적 파일들이 존재해야 합니다. 위의 예시에서는 ./build 폴더 밑에 index.html 파일을 포함한 여러 파일들이 존재해야 합니다.

 

레포지토리 설정

Github Pages 기능 활성화

정적 웹사이트 배포와 관련된 레포지토리의 Settings -> Pages 에 들어가 Source 부분을 "GitHub Actions" 으로 설정해줍니다.

 

github-pages rule 설정

1) Settings -> Environments 

Settings -> Environments 으로 이동합니다.

2) github-pages 

github-pages 를 클릭합니다.

3) Add deployment branch or tag rule 

Add deployment branch or tag rule 을 클릭합니다.

4) tag pattern 등록

Ref Type 을 Tag 로 설정하고 Name pattern 에는 태그 패턴에 맞는 패턴을 입력해줍니다. 위 예시에서는 github action 이 트리거 되는 조건이 github-page-v{숫자}.{숫자}.{숫자} 에 매칭되는 태그가 새로 생성될 때 이므로, 위의 Name pattern 도 그에 맞게 적어두었습니다만 여러분이 설정한 태그의 패턴에 맞게 작성하시면 됩니다.

 

배포

이제 github pages 배포 준비가 모두 완료되었습니다. 이제 배포하는 방법은 다음과 같습니다.

신규 릴리즈 생성

신규 릴리즈 생성 페이지에서 다음과 같이 신규 태그를 작성해줍니다.

릴리즈 타이틀과 릴리즈 내용을 적당한 내용으로 작성하신 후 Publish release 버튼을 클릭합니다.

 

Github Action 확인

새로운 릴리즈 생성과 함께 새로운 태그가 생성된 이후, 레포지토리의 Actions 탭으로 이동하면 아까 작성했던 yml 파일에 해당하는 작업이 진행중임을 확인 할 수 있습니다.

 

결과 확인

배포된 결과는 `https://유저명.github.io/레포지토리명/` 에서 확인해보실 수 있습니다.

 

마치며

이상 제가 github pages 를 사용하기 위해 알아보고 적용했던 내용들이었습니다. github pages 는 무료이긴 하지만 여러 제약사항이 있다고 하니 해당 부분은 아래 url 을 통해 직접 확인해보시는 것이 좋을 것 같습니다.

https://docs.github.com/ko/pages/getting-started-with-github-pages/about-github-pages#github-pages%EC%9D%98-%EC%82%AC%EC%9A%A9-%EC%A0%9C%ED%95%9C

 

참고 자료

• https://velog.io/@kdeun1/Github-Actions%EB%A1%9C-gh-pages-%EC%9E%90%EB%8F%99-%EB%B0%B0%ED%8F%AC%ED%95%98%EA%B8%B0
• https://blog.joe-brothers.com/doxygen-publish-with-github-pages/