컨텐츠로 건너뛰기

Astro 사이트를 Github Pages에 배포하세요

Github Pages를 사용하여 GitHub.com 저장소에서 직접 Astro 웹사이트를 호스팅할 수 있습니다.

GitHub Actions를 사용하면 Astro 사이트를 Github Pages에 배포하여 사이트를 자동으로 빌드하고 배포할 수 있습니다. 이렇게 하려면 소스 코드가 GitHub에서 호스팅되어야 합니다.

Astro는 아주 작은 구성으로 프로젝트를 배포하기 위해 공식 withastro/action을 유지 관리합니다. 아래 지침에 따라 Astro 사이트를 Github Pages에 배포하고, 추가 정보가 필요한 경우 패키지 README를 참조하세요.

astro.config.mjs에서 sitebase 옵션을 설정하세요.

astro.config.mjs
import { defineConfig } from 'astro/config'
export default defineConfig({
site: 'https://astronaut.github.io',
base: '/my-repo',
})

site 값은 다음 중 하나여야 합니다.

Astro가 저장소 이름 (예: /my-repo)을 웹 사이트의 루트로 처리하려면 base 값이 필요할 수 있습니다.

base 값은 슬래시로 시작하는 저장소 이름이어야 합니다 (예: /my-blog). 이는 Astro가 여러분의 웹사이트 루트가 기본 /가 아닌 /my-repo임을 이해하기 위한 것입니다.

사용자 정의 도메인으로 Github Pages 사용

섹션 제목: 사용자 정의 도메인으로 Github Pages 사용

사용자 정의 도메인과 함께 Github Pages를 사용하도록 Astro를 구성하려면 도메인을 site 값으로 설정하세요. base 값을 설정하지 마세요:

astro.config.mjs
import { defineConfig } from 'astro/config'
export default defineConfig({
site: 'https://example.com',
})
  1. 프로젝트의 .github/workflows/deploy.yml에 새 파일을 만들고 아래 YAML에 붙여넣습니다.

    deploy.yml
    name: Deploy to GitHub Pages
    on:
    # 'main' 브랜치로 푸시할 때마다 워크플로를 트리거합니다.
    # 다른 브랜치 이름을 사용하시나요? `main`을 브랜치 이름으로 바꾸세요.
    push:
    branches: [ main ]
    # GitHub의 Actions 탭에서 이 워크플로를 수동으로 실행할 수 있습니다.
    workflow_dispatch:
    # Allow this job to clone the repo and create a page deployment
    permissions:
    contents: read
    pages: write
    id-token: write
    jobs:
    build:
    runs-on: ubuntu-latest
    steps:
    - name: Checkout your repository using git
    uses: actions/checkout@v4
    - name: Install, build, and upload your site
    uses: withastro/action@v2
    # with:
    # path: . # 저장소 내 Astro 프로젝트의 루트 위치입니다. (선택 사항)
    # node-version: 20 # 사이트를 빌드하는 데 사용해야 하는 특정 버전의 Node입니다. 기본값은 20입니다. (선택 사항)
    # package-manager: pnpm@latest # 종속성을 설치하고 사이트를 빌드하는 데 사용해야 하는 노드 패키지 관리자입니다. lockfile을 기반으로 자동으로 감지됩니다. (선택 사항)
    deploy:
    needs: build
    runs-on: ubuntu-latest
    environment:
    name: github-pages
    url: ${{ steps.deployment.outputs.page_url }}
    steps:
    - name: Deploy to GitHub Pages
    id: deployment
    uses: actions/deploy-pages@v4
  2. GitHub에서 저장소의 Settings 탭으로 이동하여 설정의 Pages 섹션을 찾습니다.

  3. 사이트의 SourceGitHub Actions를 선택합니다.

  4. 새 워크플로 파일을 커밋하고 GitHub에 푸시합니다.

이제 여러분의 사이트가 게시됩니다! Astro 프로젝트 저장소에 변경 사항을 푸시하면 GitHub Action이 자동으로 배포합니다.

더 많은 배포 안내서