Deploy to `gh-pages` from a `dist` folder on the master branch. Useful for use with [yeoman](http://yeoman.io).

gh-pages-deploy.md

Deploying a subfolder to GitHub Pages

Sometimes you want to have a subdirectory on the master branch be the root directory of a repository’s gh-pages branch. This is useful for things like sites developed with Yeoman, or if you have a Jekyll site contained in the master branch alongside the rest of your code.

For the sake of this example, let’s pretend the subfolder containing your site is named dist.

Step 1

Remove the dist directory from the project’s .gitignore file (it’s ignored by default by Yeoman).

Step 2

Make sure git knows about your subtree (the subfolder with your site).

git add dist && git commit -m "Initial dist subtree commit"

Step 3

Use subtree push to send it to the gh-pages branch on GitHub.

git subtree push --prefix dist origin gh-pages

Boom. If your folder isn’t called dist, then you’ll need to change that in each of the commands above.

---

If you do this on a regular basis, you could also create a script containing the following somewhere in your path:

#!/bin/sh
if [ -z "$1" ]
then
  echo "Which folder do you want to deploy to GitHub Pages?"
  exit 1
fi
git subtree push --prefix $1 origin gh-pages

Which lets you type commands like:

git gh-deploy path/to/your/site

JamesIves/github-pages-deploy-action has helped me deploy automatically when I push to main, and I don't have to actually push a prebuilt dist to the repo.

name: Deploy to GitHub Pages

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2 # This action checks out your repository
      - name: Setup Node.js
        uses: actions/setup-node@v2
        with:
          node-version: '20.9.0'  # Use whatever node version your project requires

      - name: Install Dependencies
        run: yarn install

      - name: Build Project
        run: yarn build  # Use the correct build command for your project. It may include 'dist' as part of the script in your package.json.
      - name: Build and Deploy
        uses: JamesIves/[email protected]
        with:
          branch: gh-pages # The branch the action should deploy to.
          folder: dist # The folder the action should deploy.
          # You can specify additional configuration here as needed.

Also don't forget to allow your actions to write to the repo in the repo settings:

And as I'm using Vite I had to also do:

// vite.config.js
export default {
    base: '/minigames/',
  }

where you would replace minigames with you repository name so everything is loaded correctly when it's hosted on gh-pages.

JamesIves/github-pages-deploy-action has helped me deploy automatically when I push to main, and I don't have to actually push a prebuilt dist to the repo.

name: Deploy to GitHub Pages

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2 # This action checks out your repository
      - name: Setup Node.js
        uses: actions/setup-node@v2
        with:
          node-version: '20.9.0'  # Use whatever node version your project requires

      - name: Install Dependencies
        run: yarn install

      - name: Build Project
        run: yarn build  # Use the correct build command for your project. It may include 'dist' as part of the script in your package.json.
      - name: Build and Deploy
        uses: JamesIves/[email protected]
        with:
          branch: gh-pages # The branch the action should deploy to.
          folder: dist # The folder the action should deploy.
          # You can specify additional configuration here as needed.

Also don't forget to allow your actions to write to the repo in the repo settings:

And as I'm using Vite I had to also do:

// vite.config.js
export default {
    base: '/minigames/',
  }

where you would replace minigames with you repository name so everything is loaded correctly when it's hosted on gh-pages.

Amazing solution this works like a charm!

I found a really neat solution, which I tested for a static site:

1. In your repo, go to Settings > Pages.

2. In the Source dropdown list, select GitHub Actions Beta.

3. Choose Static Site

4. A page showing an editor for a .github/workflows/static.yml will load. In that file, we have the following section:

        uses: actions/upload-pages-artifact@v2
        with:
          # Upload
          path: '.'

   It's essentially uploading the root directory of the repository as the GitHub Pages source artifact. Simply change the path to ./dist so that only the dist directory will be uploaded.

5. Commit changes.

6. Check if the deployment was successful.

The GitHub Actions option is in Beta status and is subject to change.

Please let me know if someone else tries this and confirm it also works for you.

It worked perfectly.
Thanks mate!

This guide is great. Thank you for sharing it.

I found a really neat solution, which I tested for a static site:

1. In your repo, go to Settings > Pages.

2. In the Source dropdown list, select GitHub Actions Beta.

3. Choose Static Site

4. A page showing an editor for a .github/workflows/static.yml will load. In that file, we have the following section:

        uses: actions/upload-pages-artifact@v2
        with:
          # Upload
          path: '.'

   It's essentially uploading the root directory of the repository as the GitHub Pages source artifact. Simply change the path to ./dist so that only the dist directory will be uploaded.

5. Commit changes.

6. Check if the deployment was successful.

The GitHub Actions option is in Beta status and is subject to change.

Please let me know if someone else tries this and confirm it also works for you.

It worked, thanks!