작업 환경#

Ubuntu 22.04

3단계: Github Pages로 배포하기#

3.1. 사이트 구축하기#

이제 프로덕션 사이트를 구축합니다.

1
pnpm build # ./dist/에 프로덕션 사이트 구축
2
pnpm preview # 배포하기 전, 로컬에서 빌드 미리보기

3.2. 사이트 배포하기#

이후 정상적으로 빌드가 완료되면 origin에 반영해줍니다.

1
git add .
2
git commit -m ":tada: Init: my blog with fuwari template"
3
git push

이후, commit log를 보면 build가 정상적으로 안 된 것을 알 수 있습니다. build failed

repository Settings -> Pages -> Build and deployment 항목의 Source를 Github Actions 로 설정합니다.

설정을 완료하고, Actions 으로 돌아와서 실패한 build 로그에 진입하여 Re-run jobs 버튼을 클릭합니다. 이후, deploy.yml 파일을 수정합니다. 주석을 제거하고, 들여쓰기 등을 수정한 이후에 다시 commit * push를 진행하면 정상적으로 배포가 되는 것을 확인할 수 있습니다.

NOTE
2단계 블로그에서 제공한 yaml 코드를 복사해서 적용했다면 별도로 deploy.yml를 수정하지 않아도 됩니다.

1
name: Deploy to GitHub Pages
2

3
on:
4
  push:
5
    branches: [ main ]
6
  workflow_dispatch:
7

8
permissions:
9
  contents: read
10
  pages: write
11
  id-token: write
12

13
jobs:
14
  build:
15
    runs-on: ubuntu-latest
16
    steps:
17
      - name: Checkout your repository using git
18
        uses: actions/checkout@v4
19
      - name: Install, build, and upload your site
20
        uses: withastro/action@v3
21

22
  deploy:
23
    needs: build
24
    runs-on: ubuntu-latest
25
    environment:
26
      name: github-pages
27
      url: ${{ steps.deployment.outputs.page_url }}
28
    steps:
29
      - name: Deploy to GitHub Pages
30
        id: deployment
31
        uses: actions/deploy-pages@v4

정상적으로 배포가 완료된 것을 확인할 수 있습니다.

deploy success 1 deploy success 2