I have the following branches in my GitHub repository:
main(nothing in here, only oneREADME.mdfile)branch1- a NextJS project, which contains a.github/workflowsfolder that can deploy the project to GitHub Pages when run.branch2- a static html website with different content.
I want branch1 to be deployed at https://username.github.io/repo-name/ using GitHub Actions, and branch2 to be deployed at https://username.github.io/repo-name/branch2/ as a static site.
What do I do, and how do I start?
PS: The YAML actions pushes the generated static HTML (from npm run export) to an automatically created gh-pages branch and deploys using the command gh-pages -d ./out. It works perfectly fine.
EDIT: I may have an idea, but I'm not sure how to start implementing it. GitHub deploys my site from the gh-page branch whenever the gh-pages -d ./out command is run. So, maybe I can set "Deploy from branch" as gh-page under the page settings of my repository, and then in branch2, I can write a custom YAML GitHub Action so that whenever a change to the static HTML is made and pushed, it will copy the whole branch (there are CSS and JS subfolders in the branch too btw) over to a folder called branch2 in the gh-page branch. But that folder would be deleted whenever branch1 has pushes, due to the command gh-pages -d ./out being run. So maybe edit the NextJS deploy script to make it so that it doesn't delete the branch2 folder when deploying? And also change the static HTML deploy script so that it doesn't copy the entire branch every time there's a change, but only the file/lines that changed. But will this turn out to be too complicated?
EDIT2: Here's my workflow script.
# Sample workflow for building and deploying a Next.js site to GitHub Pages
#
# To get started with Next.js see: https://nextjs.org/docs/getting-started
#
name: Deploy Next.js site to Pages
on:
# Runs on pushes targeting the default branch
push:
branches: ["nextjs"] # This is my "branch1"
# Allows you to run this workflow manually from the Actions tab
workflow_dispatch:
# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
permissions:
contents: read
pages: write
id-token: write
# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
concurrency:
group: "pages"
cancel-in-progress: false
jobs:
# Build job
build:
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v3
- name: Detect package manager
id: detect-package-manager
run: |
if [ -f "${{ github.workspace }}/yarn.lock" ]; then
echo "manager=yarn" >> $GITHUB_OUTPUT
echo "command=install" >> $GITHUB_OUTPUT
echo "runner=yarn" >> $GITHUB_OUTPUT
exit 0
elif [ -f "${{ github.workspace }}/package.json" ]; then
echo "manager=npm" >> $GITHUB_OUTPUT
echo "command=ci" >> $GITHUB_OUTPUT
echo "runner=npx --no-install" >> $GITHUB_OUTPUT
exit 0
else
echo "Unable to determine package manager"
exit 1
fi
- name: Setup Node
uses: actions/setup-node@v3
with:
node-version: "16"
cache: ${{ steps.detect-package-manager.outputs.manager }}
- name: Setup Pages
uses: actions/configure-pages@v3
with:
# Automatically inject basePath in your Next.js configuration file and disable
# server side image optimization (https://nextjs.org/docs/api-reference/next/image#unoptimized).
#
# You may remove this line if you want to manage the configuration yourself.
static_site_generator: next
- name: Restore cache
uses: actions/cache@v3
with:
path: |
.next/cache
# Generate a new cache whenever packages or source files change.
key: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-${{ hashFiles('**.[jt]s', '**.[jt]sx') }}
# If source files changed but packages didn't, rebuild from a prior cache.
restore-keys: |
${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-
- name: Install dependencies
run: ${{ steps.detect-package-manager.outputs.manager }} ${{ steps.detect-package-manager.outputs.command }} && cd about-me && npm i && cd ..
- name: Build with Next.js
run: cd about-me && ${{ steps.detect-package-manager.outputs.runner }} next build && cd ..
- name: Static HTML export with Next.js
run: cd about-me && ${{ steps.detect-package-manager.outputs.runner }} next export && cd ..
- name: Upload artifact
uses: actions/upload-pages-artifact@v1
with:
path: ./about-me/out
# Deployment job
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@v2
The website is currently up and running fine with no problem. Note my branch name on Line 10.
