깃허브 페이지(GitHub Pages)를 사용해 배포하기

Docusaurus provides an easy way to publish to GitHub Pages, which comes free with every GitHub repository.

개요

Usually, there are two repositories (at least two branches) involved in a publishing process: the branch containing the source files, and the branch containing the build output to be served with GitHub Pages. In the following tutorial, they will be referred to as "source" and "deployment", respectively.

각각의 깃허브 저장소는 깃허브 페이지 서비스와 연결됩니다. If the deployment repository is called my-org/my-project (where my-org is the organization name or username), the deployed site will appear at https://my-org.github.io/my-project/. If the deployment repository is called my-org/my-org.github.io (the organization GitHub Pages repo), the site will appear at https://my-org.github.io/.

정보

In case you want to use your custom domain for GitHub Pages, create a CNAME file in the static directory. Anything within the static directory will be copied to the root of the build directory for deployment. When using a custom domain, you should be able to move back from baseUrl: '/projectName/' to baseUrl: '/', and also set your url to your custom domain.

You may refer to GitHub Pages' documentation User, Organization, and Project Pages for more details.

GitHub Pages picks up deploy-ready files (the output from docusaurus build) from the default branch (master / main, usually) or the gh-pages branch, and either from the root or the /docs folder. You can configure that through Settings > Pages in your repository. 이 브랜치를 "배포 브랜치"라고 합니다.

We provide a docusaurus deploy command that helps you deploy your site from the source branch to the deployment branch in one command: clone, build, and commit.

docusaurus.config.js settings

First, modify your docusaurus.config.js and add the following params:

옵션명	설명
organizationName	배포 저장소를 소유하고 있는 깃허브 사용자 또는 그룹 계정을 설정합니다.
projectName	배포 저장소 이름을 설정합니다.
deploymentBranch	The name of the deployment branch. It defaults to 'gh-pages' for non-organization GitHub Pages repos (projectName not ending in .github.io). Otherwise, it needs to be explicit as a config field or environment variable.

These fields also have their environment variable counterparts which have a higher priority: ORGANIZATION_NAME, PROJECT_NAME, and DEPLOYMENT_BRANCH.

경고

깃헙 페이지는 도큐사우루스 URL에 트레일링 슬래시를 기본적으로 추가합니다. It is recommended to set a trailingSlash config (true or false, not undefined).

예:

docusaurus.config.js

export default {
  // ...
  url: 'https://endiliey.github.io', // Your website URL
  baseUrl: '/',
  projectName: 'endiliey.github.io',
  organizationName: 'endiliey',
  trailingSlash: false,
  // ...
};

경고

By default, GitHub Pages runs published files through Jekyll. Since Jekyll will discard any files that begin with _, it is recommended that you disable Jekyll by adding an empty file named .nojekyll file to your static directory.

환경 설정

옵션명	설명
USE_SSH	Set to true to use SSH instead of the default HTTPS for the connection to the GitHub repo. If the source repo URL is an SSH URL (e.g. [email protected]:facebook/docusaurus.git), USE_SSH is inferred to be true.
GIT_USER	The username for a GitHub account that has push access to the deployment repo. 여러분이 소유자인 저장소라면 사용하고 있는 깃허브 사용자명을 설정합니다. SSH를 사용하지 않는다면 필수이며 그렇지 않은 경우에는 무시됩니다.
GIT_PASS	Personal access token of the git user (specified by GIT_USER), to facilitate non-interactive deployment (e.g. continuous deployment)
CURRENT_BRANCH	소스 브랜치. Usually, the branch will be main or master, but it could be any branch except for gh-pages. If nothing is set for this variable, then the current branch from which docusaurus deploy is invoked will be used.
GIT_USER_NAME	The git config user.name value to use when pushing to the deployment repo
GIT_USER_EMAIL	The git config user.email value to use when pushing to the deployment repo

깃허브 엔터프라이즈를 사용하는 경우에도 깃허브와 다르지 않습니다. 환경 변수에 깃허브 엔터프라이즈에서 사용하는 그룹 계정을 설정해주기만 하면 됩니다.

옵션명	설명
GITHUB_HOST	깃허브 엔터프라이즈 사이트에서 사용하는 도메인 이름을 설정합니다.
GITHUB_PORT	깃허브 엔터프라이즈 사이트에서 사용하는 포트를 설정합니다.

배포

이제 아래 명령을 사용해 여러분의 사이트를 깃허브 페이지로 배포합니다.

Bash

GIT_USER=<GITHUB_USERNAME> yarn deploy

Windows

cmd /C "set "GIT_USER=<GITHUB_USERNAME>" && yarn deploy"

PowerShell

cmd /C 'set "GIT_USER=<GITHUB_USERNAME>" && yarn deploy'

경고

Beginning in August 2021, GitHub requires every command-line sign-in to use the personal access token instead of the password. 깃허브에서 암호를 묻는 메시지가 표시되면 PAT를 대신 입력하세요. See the GitHub documentation for more information.

Alternatively, you can use SSH (USE_SSH=true) to log in.

깃허브 액션(GitHub Actions)을 사용해 자동으로 배포하기

GitHub Actions allow you to automate, customize, and execute your software development workflows right in your repository.

The workflow examples below assume your website source resides in the main branch of your repository (the source branch is main), and your publishing source is configured for publishing with a custom GitHub Actions Workflow.

우리의 목표는 다음과 같습니다.

1. When a new pull request is made to main, there's an action that ensures the site builds successfully, without actually deploying. This job will be called test-deploy.
2. When a pull request is merged to the main branch or someone pushes to the main branch directly, it will be built and deployed to GitHub Pages. This job will be called deploy.

다음은 깃허브 액션을 사용해 문서를 배포하는 두 가지 접근 방식입니다. Based on the location of your deployment repository, choose the relevant tab below:

• Source repo and deployment repo are the same repository.
• The deployment repo is a remote repository, different from the source. Instructions for this scenario assume publishing source is the gh-pages branch.

Same

While you can have both jobs defined in the same workflow file, the original deploy workflow will always be listed as skipped in the PR check suite status, which is not indicative of the actual status and provides no value to the review process. 따라서 대신 별도의 워크플로로 관리할 것을 제안합니다.

GitHub action files

다음 두 개의 워크플로 파일을 추가합니다.

Tweak the parameters for your setup

If your Docusaurus project is not at the root of your repo, you may need to configure a default working directory, and adjust the paths accordingly.

npm

.github/workflows/deploy.yml

name: Deploy to GitHub Pages

on:
  push:
    branches:
      - main
    # Review gh actions docs if you want to further define triggers, paths, etc
    # https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#on

jobs:
  build:
    name: Build Docusaurus
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
        with:
          fetch-depth: 0
      - uses: actions/setup-node@v4
        with:
          node-version: 24
          cache: npm

      - name: Install dependencies
        run: npm ci
      - name: Build website
        run: npm run build

      - name: Upload Build Artifact
        uses: actions/upload-pages-artifact@v3
        with:
          path: build

  deploy:
    name: Deploy to GitHub Pages
    needs: build

    # Grant GITHUB_TOKEN the permissions required to make a Pages deployment
    permissions:
      pages: write # to deploy to Pages
      id-token: write # to verify the deployment originates from an appropriate source

    # Deploy to the github-pages environment
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}

    runs-on: ubuntu-latest
    steps:
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

.github/workflows/test-deploy.yml

name: Test deployment

on:
  pull_request:
    branches:
      - main
    # Review gh actions docs if you want to further define triggers, paths, etc
    # https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#on

jobs:
  test-deploy:
    name: Test deployment
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
        with:
          fetch-depth: 0
      - uses: actions/setup-node@v4
        with:
          node-version: 24
          cache: npm

      - name: Install dependencies
        run: npm ci
      - name: Test build website
        run: npm run build

Yarn

.github/workflows/deploy.yml

name: Deploy to GitHub Pages

on:
  push:
    branches:
      - main
    # Review gh actions docs if you want to further define triggers, paths, etc
    # https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#on

jobs:
  build:
    name: Build Docusaurus
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
        with:
          fetch-depth: 0
      - uses: actions/setup-node@v4
        with:
          node-version: 24
          cache: yarn

      - name: Install dependencies
        run: yarn install --frozen-lockfile
      - name: Build website
        run: yarn build

      - name: Upload Build Artifact
        uses: actions/upload-pages-artifact@v3
        with:
          path: build

  deploy:
    name: Deploy to GitHub Pages
    needs: build

    # Grant GITHUB_TOKEN the permissions required to make a Pages deployment
    permissions:
      pages: write # to deploy to Pages
      id-token: write # to verify the deployment originates from an appropriate source

    # Deploy to the github-pages environment
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}

    runs-on: ubuntu-latest
    steps:
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

.github/workflows/test-deploy.yml

name: Test deployment

on:
  pull_request:
    branches:
      - main
    # Review gh actions docs if you want to further define triggers, paths, etc
    # https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#on

jobs:
  test-deploy:
    name: Test deployment
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
        with:
          fetch-depth: 0
      - uses: actions/setup-node@v4
        with:
          node-version: 24
          cache: yarn

      - name: Install dependencies
        run: yarn install --frozen-lockfile
      - name: Test build website
        run: yarn build

Remote

A cross-repo publish is more difficult to set up because you need to push to another repo with permission checks. 예제에서는 SSH 인증을 사용합니다.

1. Generate a new SSH key. SSH 키는 CI에서 사용되므로 암호를 입력하지 마세요.
2. By default, your public key should have been created in ~/.ssh/id_rsa.pub; otherwise, use the name you've provided in the previous step to add your key to GitHub deploy keys.
3. Copy the key to clipboard with pbcopy \< ~/.ssh/id_rsa.pub and paste it as a deploy key in the deployment repository. 명령행 도구를 사용하기 곤란하다면 파일 콘텐츠를 복사할 수 있습니다. Check the box for Allow write access before saving your deployment key.
4. You'll need your private key as a GitHub secret to allow Docusaurus to run the deployment for you.
5. Copy your private key with pbcopy \< ~/.ssh/id_rsa and paste a GitHub secret with the name GH_PAGES_DEPLOY on your source repository. 명령행 도구를 사용하기 곤란하다면 파일 콘텐츠를 복사할 수 있습니다. 보안 설정을 저장합니다.
6. Create your documentation workflow in the .github/workflows/ directory. In this example it's the deploy.yml file.

At this point, you should have:

• the source repo with the GitHub workflow set with the private SSH key as the GitHub Secret, and
• your deployment repo set with the public SSH key in GitHub Deploy Keys.

GitHub action file

경고

Please make sure that you replace [email protected] with your GitHub email and gh-actions with your name.

This file assumes you are using Yarn. If you use npm, change cache: yarn, yarn install --frozen-lockfile, yarn build to cache: npm, npm ci, npm run build accordingly.

.github/workflows/deploy.yml

name: Deploy to GitHub Pages

on:
  pull_request:
    branches: [main]
  push:
    branches: [main]

permissions:
  contents: write

jobs:
  test-deploy:
    if: github.event_name != 'push'
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
        with:
          fetch-depth: 0
      - uses: actions/setup-node@v4
        with:
          node-version: 24
          cache: yarn
      - name: Install dependencies
        run: yarn install --frozen-lockfile
      - name: Test build website
        run: yarn build
  deploy:
    if: github.event_name != 'pull_request'
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
        with:
          fetch-depth: 0
      - uses: actions/setup-node@v4
        with:
          node-version: 24
          cache: yarn
      - uses: webfactory/ssh-[email protected]
        with:
          ssh-private-key: ${{ secrets.GH_PAGES_DEPLOY }}
      - name: Deploy to GitHub Pages
        env:
          USE_SSH: true
        run: |
          git config --global user.email "[email protected]"
          git config --global user.name "gh-actions"
          yarn install --frozen-lockfile
          yarn deploy

Site not deployed properly?

After pushing to main, if you don't see your site published at the desired location (for example, it says "There isn't a GitHub Pages site here", or it's showing your repo's README.md file), try the following:

• Wait about three minutes and refresh. It may take a few minutes for GitHub pages to pick up the new files.
• Check your repo's landing page for a little green tick next to the last commit's title, indicating the CI has passed. If you see a cross, it means the build or deployment failed, and you should check the log for more debugging information.
• Click on the tick and make sure you see a "Deploy to GitHub Pages" workflow. Names like "pages build and deployment / deploy" are GitHub's default workflows, indicating your custom deployment workflow failed to be triggered at all. Make sure the YAML files are placed under the .github/workflows folder, and that the trigger condition is set correctly (e.g., if your default branch is "master" instead of "main", you need to change the on.push property).
• Under your repo's Settings > Pages, make sure the "Source" (which is the source for the deployment files, not "source" as in our terminology) is set to "gh-pages" + "/ (root)", since we are using gh-pages as the deployment branch.

If you are using a custom domain:

• Verify that you have the correct DNS records set up if you're using a custom domain. See GitHub pages documentation on configuring custom domains. Also, please be aware that it may take up to 24 hours for DNS changes to propagate through the internet.