GitHub Pages + Actions로 정적 사이트 배포해보기-1

이전 페이지에서 한 것과 이제 해야 하는 것을 정리해보겠습니다

[1] Push ➡️ 완

▪️로컬 프로젝트

▪️GitHub 저장소

▪️master 브랜치 생성

▪️코드 업로드 성공

 

[2] Actions

▪️GitHub에서 "이 코드를 어떻게 빌드/배포할지" 자동화 설정 단계

 

[3] GitHub Pages

▪️웹 주소 생성 단계

 

---

이제 그럼 Push가 끝난 상태이고 Actions를 만들어서 "배포 자동화"를 붙여보도록 하겠습니다

 

Actions부터 하는 이유는
GitHub Pages는 스스로 빌드하거나 배포를 하지 못하기 때문에
Actions를 통해 배포할 결과물을 만들어
Pages가 그 결과물을 사용해 사이트를 띄우도록 합니다

 

Actions = 만들기
Pages = 보여주기

 

Actions 부분을 누른다

 

 

밑으로 쭈우우욱 스크롤하면 Pages 부분이 보이는데 View all 클릭

 

 

 

 

 

여기서 "GitHub" 검색을 한다

 

 

 

 

Configure 클릭

 

 

우측 상단에 Commit changes 클릭

 

Commit message: 기본값 그대로

Extended description : 자동화 작업에 대한 설명 메모칸, 비워둬도 됨

Branch: Commit directly to master

▶️ Commit

 

 

Actions 설정이 제대로 커밋됐다

Pages 배포용 Actions 워크플로우가 저장소에 추가된 것이다

이 순간부터

▪️ master에 Push 발생

▪️ Actions 자동 실행

▪️ Pages 배포 시도

Actions 단계 진입 완료!!

 

 

---

 

그 다음에 자동으로 벌어지는 일

▪️ 방금 커밋이 master에 들어감
▪️ Actions 탭에서 워크플로우 자동 실행

▪️ 노란 점(진행 중) → 초록 체크(성공) 로 바뀜

 

 

이제 마지막으로 Actions 탭 화면을 확인

왜 빨간 X일까.. Actions 실행 실패했다는 것이다

workflow는 정상적으로 실행됐지만, 빌드 단계에서 막힘

이 프로젝트는 Jekyll 사이트가 아니라서 구조가 맞지 않았다..

 

 

---

 

✅ 해결 방법 : Jekyll workflow 버리고 → 순수 Pages workflow로 교체하기!!

 

저장소로 돌아가서 위 화살표가 가르키는 거 클릭한다 ▶️ jekyll-gh-pages.yml 파일 클릭 ▶️ 연필 아이콘 클릭

 

 

 

name: Deploy static site to GitHub Pages

on:
  push:
    branches: ["master"]
  workflow_dispatch:

permissions:
  contents: read
  pages: write
  id-token: write

concurrency:
  group: "pages"
  cancel-in-progress: false

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4

      - name: Setup Pages
        uses: actions/configure-pages@v5

      - name: Upload artifact
        uses: actions/upload-pages-artifact@v3
        with:
          path: .

      - name: Deploy to GitHub Pages
        uses: actions/deploy-pages@v4

이렇게 전체 코드를 수정한다

 

 

근데 여전히 X..

Actions는 정상인데, GitHub Pages가 “Actions 결과물을 쓰겠다”는 설정이 아직 안 돼서 실패한 것이다

 

1️⃣ GitHub 저장소 → Settings

2️⃣ 왼쪽 메뉴에서 Pages

3️⃣ Build and deployment 섹션 찾기

4️⃣ Source : 지금 Deploy from a branch ▶️ 변경 : Source: GitHub Actions

 

 

Static HTML → Configure 클릭 → Commit changes 

 

5️⃣ Save (자동 저장됨)

 

 

 

마지막으로 Actions 확인해보면?!?

 

 

이어서 계속...