본문 바로가기
C.W.K.
Stream
Lesson 02 of 13 · published

GitHub Pages

~9 min · pages, static, docs

Level 0견습생
0 XP0/101 lessons0/10 achievements
0/120 XP to next level120 XP to go0% complete

GitHub 내부에서 완결되는 정적 사이트

GitHub Pages를 활용하면 저장소에서 곧바로 정적 사이트를 띄울 수 있어. Actions와 연동하면 CI 환경에서 Hugo, Jekyll, mdBook, Astro 같은 도구로 사이트를 빌드한 뒤 공식 actions/deploy-pages 액션으로 배포하면 끝이야.

설정 방법

  1. 저장소의 Settings → Pages → Source 항목을 GitHub Actions로 지정해.
  2. 사이트를 빌드하고 Pages 아티팩트로 업로드한 다음 배포하는 워크플로를 구성해.
  3. 필요하다면 커스텀 도메인이나 HTTPS 설정도 추가할 수 있어.

기본 워크플로

액션은 actions/checkout, actions/upload-pages-artifact, actions/deploy-pages 조합이면 충분해. 권한 설정에는 pages: writeid-token: write가 필요해.

Code

Astro / Hugo / mdBook → Pages·yaml
name: pages
on: { push: { branches: [main] }, workflow_dispatch: {} }
permissions:
  contents: read
  pages: write
  id-token: write
concurrency: { group: pages, cancel-in-progress: false }

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with: { node-version: '22' }
      - run: npm ci && npm run build
      - uses: actions/upload-pages-artifact@v3
        with: { path: dist }

  deploy:
    needs: build
    runs-on: ubuntu-latest
    environment:
      name: github-pages
      url: ${{ steps.deploy.outputs.page_url }}
    steps:
      - id: deploy
        uses: actions/deploy-pages@v4

External links

Exercise

정적 사이트 저장소(docs, blog, 랜딩 페이지 등)가 있다면 위 워크플로로 Pages에 연결해 봐. 배포 URL이 Actions 실행 내역에 잘 나타나는지, 실제 라이브 페이지를 정상적으로 가리키는지 확인해.

Progress

Progress is local-only — sign in to sync across devices.
이 페이지에서 버그를 발견하셨거나 피드백이 있으세요?문제 신고

댓글 0

🔔 답글 알림 (로그인 필요)
로그인댓글을 남기려면 로그인해 주세요.

아직 댓글이 없어요. 첫 댓글을 남겨보세요.