GitHub Pages는 이제 사용자 지정 가능한 GitHub Action 워크플로를 사용하여 개발자가 제작 프레임워크 및 배포를 제어할 수 있도록 코드를 빌드 및 배포합니다. GitHub Pages는 다음과 같은 이유로 정적 콘텐츠를 저장하기 위한 강력한 옵션입니다.

무료입니다.

협업이 쉬워집니다. 누구나 풀 리퀘스트를 열어 사이트를 업데이트할 수 있습니다.

저장소는 사이트에 대한 모든 변경 사항과 동기화됩니다.

GitHub Pages는 https://YOUR_USER_NAME.github.io/와 같은 기본 도메인 이름과 함께 제공되지만 사용자 정의 도메인을 지원합니다.

빌드 및 배포를 위해 사용자 정의 가능한 GitHub 작업 워크플로를 사용합니다.

GitHub의 팀은 몇 가지 시작 워크플로를 제공하므로 처음부터 작성할 필요가 없으며 다른 프레임워크에서 배포를 지원하는 예제로 사용할 수 있습니다. 현재 Next.js, Nuxt.js, Gatsby, Hugo, Jekyll 및 HTML용starter workflows이 있습니다.

Astro로 구축된 정적 사이트 또는 GitHub Pages에서 선택한 워크플로를 호스팅하는 방법을 알아보겠습니다!

GitHub 페이지에 사이트를 게시하려면 리포지토리가 공개되어야 합니다.

선택한 프레임워크 또는 정적 생성기를 사용하여 코드를 작성하고 리포지토리에 저장한 후 해당 리포지토리의 설정 탭으로 이동합니다.



왼쪽 사이드바에서 페이지를 클릭합니다.



빌드 및 배포에서 GitHub 작업을 선택합니다.



프로젝트의 루트에 .github/workflows라는 폴더를 만듭니다.


.github/workflows 폴더 내에서 지정된 프레임워크를 GitHub 페이지에 배포하는 사용자 지정 워크플로를 만듭니다(아래 섹션의 예 참조).

Astro의 워크플로우 예

name: Deploy Astro to GitHub Pages

    on:
     # Trigger the workflow every time you push to the `main` branch
      push:
        branches: [ main ]
      # Allows you to run this workflow manually from the Actions tab on GitHub.
      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: Check out your repository using git
          uses: actions/checkout@v2

        - name: Use Node.js 16
          uses: actions/setup-node@v2
          with:
            node-version: '16'
            cache: 'npm'

        # Not using npm? Change `npm ci` to `yarn install` or `pnpm i`
        - name: Install dependencies
          run: npm ci

        # Not using npm? Change `npm run build` to `yarn build` or `pnpm run build`
        - name: Build Astro
          run: npm run build --if-present

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

      deploy:
        environment:
          name: github-pages
          url: ${{ steps.deployment.outputs.page_url }}
        runs-on: ubuntu-latest
        needs: build
        steps:
          - name: Deploy to GitHub Pages
            id: deployment
            uses: actions/deploy-pages@v1

React의 워크플로 예

    name: Deploy to React GitHub Pages

    on:
     # Trigger the workflow every time you push to the `main` branch
      push:
        branches: [ main ]
      # Allows you to run this workflow manually from the Actions tab on GitHub.
      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: Check out your repository using git
          uses: actions/checkout@v2

        - name: Use Node.js 16
          uses: actions/setup-node@v2
          with:
            node-version: '16'
            cache: 'npm'

        # Not using npm? Change `npm ci` to `yarn install` or `pnpm i`
        - name: Install dependencies
          run: npm ci

        # Not using npm? Change `npm run build` to `yarn build` or `pnpm run build`
        - name: Build React
          run: npm run build --if-present

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

      deploy:
        environment:
          name: github-pages
          url: ${{ steps.deployment.outputs.page_url }}
        runs-on: ubuntu-latest
        needs: build
        steps:
          - name: Deploy to GitHub Pages
            id: deployment
            uses: actions/deploy-pages@v1

선택한 정적 생성기에 대한 예제 템플릿

    name: Deploy to “your frameworks” GitHub Pages

    on:
     # Trigger the workflow every time you push to the `main` branch
      push:
        branches: [ main ]
      # Allows you to run this workflow manually from the Actions tab on GitHub.
      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: Check out your repository using git
          uses: actions/checkout@v2

        - name: Use “REPLACE WITH THE RUNTIME OF YOUR CHOICE”
          uses: “REPLACE WITH THE ACTION THAT SETS UP THE RUN TIME OF YOUR CHOICE”

        # Not using npm? Change `npm ci` to `yarn install` or `pnpm i`
        - name: Install dependencies
          run: “REPLACE WITH COMMANDS TO INSTALL DEPENDENCIES”

        # Not using npm? Change `npm run build` to `yarn build` or `pnpm run build`
        - name: Build “YOUR STATIC GENERATOR HERE”
          run: “REPLACE WITH YOUR BUILD COMMAND”

        - name: Upload artifact
          uses: actions/upload-pages-artifact@v1
          with:
            path: “REPLACE WITH YOUR BUILD OUTPUT FOLDER”

      deploy:
        environment:
          name: github-pages
          url: ${{ steps.deployment.outputs.page_url }}
        runs-on: ubuntu-latest
        needs: build
        steps:
          - name: Deploy to GitHub Pages
            id: deployment
            uses: actions/deploy-pages@v1

몇 초 안에 작업이 실행되기 시작합니다. 성공하면 URL을 생성하고 정적 사이트를 GitHub 페이지에 배포합니다.



URLyourusername.github.io/your_repo_name로 이동하여 라이브 웹사이트를 확인하세요!

Gotchas: 자산 경로 처리

GitHub Pages에 내 사이트를 처음 게시했을 때 사이트를 로컬에서 호스팅할 때 이미지나 PDF가 있는데도 이미지나 PDF를 볼 수 없다는 사실에 혼란스럽고 놀랐습니다. 이것은 GitHub Pages가 경로를 다르게 처리하기 때문에 발생했습니다.

예를 들어 이 상대 경로에 PDF가 있는 경우: assets/pdfs/menu-food.pdf GitHub 페이지에서 호스팅되면 새 경로를 {“REPOSITORY NAME”}/assets/pdfs/menu-food.pdf로 업데이트합니다.

예시

다음은 이 방법을 사용하여 구축한 예제 저장소입니다.

블랙걸바이트 / blackgyalbites-astro

GitHub 페이지에서 호스팅되는 노터치 레스토랑 메뉴 템플릿

흑갈 물린

GitHub 페이지의 모든 프레임워크로 구축된 노터치 메뉴 및 호스트 정적 페이지용 템플릿

사용자가 QR 코드를 스캔하면 레스토랑 메뉴를 표시하기 위해 Astro로 구축된 웹사이트입니다.

GitHub 페이지 제공

이것은 개발자가 모든 프레임워크를 사용하여 정적 웹 사이트를 구축하고 호스팅할 수 있음을 보여주는 데모입니다.
GitHub 페이지에서 호스팅되는 더 많은 예제 프레임워크 보기:

HTML and CSS

Next.js and Tailwind CSS

Astro

라이브 사이트 링크: https://blackgirlbytes.github.io/blackgyalbites-astro/

설계 및 개발

모든 디자인과 요소는 오픈 소스이며 누구나 무료로 사용할 수 있습니다.
소유: Rizel Scarlett(@blackgirlbytes)
설계자 The Holistic Technologist
삽화 Cuoc Doi Prints
어떤 목적으로든 자유롭게 포크, 복사, 조정 및 사용할 수 있습니다. 이 프로젝트는 완전히 오픈 소스이며 MIT license 아래에 있습니다.
메뉴 디자인 템플릿: Canva
자산 및 디자인 요소 다운로드: Google Drive



View on GitHub

더 알아보기

다음에서 Tommy Byrd가 전한 이 강연을 시청하십시오.

배포 페이지용repository and ReadMe

GitHubchangelog의 발표

공식 GitHub Blog Post

맞춤형 워크플로를 사용하여 GitHub 페이지에 정적 사이트 생성기를 배포하는 방법을 보여주는 Kedasha의 멋진 YouTube 단편을 시청하세요!

GitHub Pages에 배포할 새로운 사용자 지정 워크플로에 대한 귀하의 의견을 듣고 싶습니다. 아래에 댓글을 달아주세요! 이와 같은 더 많은 콘텐츠를 보려면 DEV를 팔로우하세요!