Deployment

Now that we have a web site running locally, it is time to setup the deployment.

We start by adding a GitHub Action to build and push the compiled web site to the gh-pages branch; then setup the GitHub Pages on the project.

GitHub Action

Now that you've got the website building locally, it's time to setup a build script in GitHub Actions to prepare for automatic deployment on every successful commit/build.

Add a root level package.json file that declares the website folder as a yarn workspace (and the packages folder).

package.json

{
  "private": true,
  "workspaces": ["packages/*", "website"],
  "scripts": {
    "build": "cd website && yarn build"
  }
}

Add .github/workflows/build.yml to your project

.github/workflows/build.yml

name: Build and Deploy
on:
    workflow_dispatch:
    push:
    pull_request:
jobs:
    build:
        name: Build and Deployment
        runs-on: ubuntu-latest
        env:
            GITHUB_REPOSITORY: ${{ github.repository }}
            GITHUB_REF: ${{ github.ref }}
            GITHUB_SHA: ${{ github.sha }}
        steps:
            - uses: actions/checkout@v3

            - name: Cache ris4fun compile code
                id: docusaurus-rise4fun-compile-code
                uses: actions/cache@v3
                with:
                path: website/.docusaurus/docusaurus-remark-plugin-compile-code/
                key: ${{ runner.os }}-${{ hashFiles('**/yarn.lock') }}

            - uses: actions/setup-node@v3
              with:
                  node-version: 18.x
                  cache: yarn
                  cache-dependency-path: yarn.lock

            - name: yarn install
              run: yarn install --frozen-lockfile

            - name: Build all
              run: yarn build

            - name: Deploy to GitHub Pages
              uses: peaceiris/actions-gh-pages@v3
              if: ${{ github.ref == 'refs/heads/main' }}
              with:
                  github_token: ${{ secrets.GITHUB_TOKEN }}
                  publish_dir: website/build
                  force_orphan: true

Once a build passed, don't forget to enable GitHub Pages in your GitHub repository settings.

Navigate to the Actions tab in your GitHub repository home page and you should see this action running. Once the run is done, and if everything goes right, the action will upload the compiled web site in the gh_pages branch.

GitHub Pages

Navigate to the Settings page, then Pages tab, and enable pages from the gh-pages branch. This will trigger a deployment build and your web site should be live within minutes. Yay!

tip

Copy the GitHub Pages url and set it as the repository web address.