Deploy Docusaurus website to GitHub Pages using GitHub Actions

This repository is an example of deploying a Docusaurus website to GitHub Pages using GitHub Actions.

Configuring the GitHub repository

It uses the new GitHub Pages experience with GitHub Actions to deploy the website.

Enable this experience in GitHub.com -> Repository -> Settings -> Pages -> Build and deployment -> Source by selecting GitHub Actions instead of the legacy Deploy from a branch option.

In GitHub.com -> Repository -> Settings -> Environments you should see a GitHub Environment named github-pages.

Configuring Docusaurus

Generate a Docusuarus website using the following command:

yarn create docusaurus <folder-name> classic --typescript

Make the following changes to the docusaurus.config.js configuration file:

1. Create the constants organizationName and projectName

   constorganizationName="<github-organization-name>";constprojectName="<repository-name>";

2. Set the URL

   constconfig={// (...)url: `https://${organizationName}.github.io`,};constbaseUrl=/${projectName}/`;

3. Configure the base URL

   constconfig={// (...)baseUrl: `/${projectName}/`,};

4. Set the organizationName and projectName options

   constorganizationName="<github-organization-name>";constprojectName="<repository-name>";constconfig={// (...)
   organizationName,
   projectName,};

5. Configure the blog and docs edit URLs

   constconfig={// (...)presets: [["classic",/** @type {import('@docusaurus/preset-classic').Options} */({// (...)docs: {// (...)editUrl: `https://github.com/${organizationName}/${projectName}/tree/main/`,},blog: {// (...)editUrl: `https://github.com/${organizationName}/${projectName}/tree/main/`,},}),],],};

Adding a GitHub Actions deployment workflow

Use a GitHub Actions workflow template for GitHub Pages from the actions/starter-workflows repository. Place it in .github/workflows/<workflow-name>.yml.

Add steps for building the website before the GitHub Pages actions are executed and specify the path to the actions/upload-pages-artifact:

# (...)jobs:
deploy:
environment:
name: github-pagesurl: ${{ steps.deployment.outputs.page_url }}runs-on: ubuntu-lateststeps:
- name: Checkoutuses: actions/checkout@v3# 👇 Build steps
- name: Set up Node.jsuses: actions/setup-node@v3with:
node-version: 16.xcache: yarn
- name: Install dependenciesrun: yarn install --frozen-lockfile --non-interactive
- name: Buildrun: yarn build# 👆 Build steps
- name: Setup Pagesuses: actions/configure-pages@v3
- name: Upload artifactuses: actions/upload-pages-artifact@v2with:
# 👇 Specify build output pathpath: build
- name: Deploy to GitHub Pagesid: deploymentuses: actions/deploy-pages@v2