CODEWITHSUNDEEP
next.jsgithub-actionsgithub-pages
DavidNyan10
DavidNyan10

Reputation: 179

GitHub pages: two websites from two branches within the same repository

I have the following branches in my GitHub repository:

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.

Upvotes: 1

Views: 1418

Answers (1)

hakre
hakre

Reputation: 198119

TLDR: Have your static site with your file and directory layout in the branch gh-pages and push it to Github.

Github Pages comes with different site-types but is otherwise relatively straight-forward on how you can do things, therefore let's first review your leading URL layout to then conclude on how your repository branch layout can contribute to the Github Page you have in mind.

By the mapping of the two branches to your URL layout:

  1. https://username.github.io/repo-name/
  2. https://username.github.io/repo-name/branch2/

you're using the project Github Pages Site-Type 1 and the

source files for a project site are stored in the same repository as their project.

You can publish your site when changes are pushed to a specific branch[.]

The Microsoft Github documentation then starts to become a little bit shy to name that branch, we can only speculate that this is because it is long-time documented in off-site resources like Stackoverflow (e.g. "git branch: gh-pages"), but under Troubleshooting publishing from a branch 2 the branch-name is documented and it is documented how you deploy to it (with git(1) (!)):

Most [...] workflows "deploy" to GitHub Pages by committing the build output to the gh-pages branch of the repository, and typically include a .nojekyll file. When this happens, the GitHub Actions workflow will detect the state that the branch does not need a build step, and will execute only the steps necessary to deploy the site to GitHub Pages servers.

To conclude from your original URL layout, whenever the NextJS build from branch1 has finished, you "checkout" branch2 into the branch2 folder of the NextJS build target directory.

To "checkout" branch2 in a reproducible way use the git-archive(1) 3 command as a tarpipe 4. Not only deals it with file time-stamps but you can also control source and target directory mapping as well as dedicated exclusions (mind that Github Pages are public even if your project repository is private).

Only then you continue to publish that overall result under your Github Pages deployment branch configuration, that is you commit the build target directory as the static documentation directory of the Github Pages branch 5 and push it to the Github remote (origin by default, c.f. git-push(1)).

  1. Types of GitHub Pages sites - https://docs.github.com/en/pages/getting-started-with-github-pages/about-github-pages#types-of-github-pages-sites
  2. Troubleshooting publishing from a branch - https://docs.github.com/en/pages/getting-started-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site#troubleshooting-publishing-from-a-branch
  3. git-archive - Create an archive of files from a named tree - https://git-scm.com/docs/git-archive
  4. tarpipe: use tar | tar to copy directory trees (here git archive --format tar | tar); c.f. Tarpipe - Tar (Computing) - Wikipedia and Copying Directory Trees with tar and Pipes, Unix Power Tools Third Edition, by Shelley Powers, Jerry Peek, Tim O'Reilly, Mike Loukides, and other contributors
  5. Your Repository -> Settings (last tab) -(> under "General", subsection "Code and automation" -)> Pages -(> Build and deployment -)> Branch the Select folder drop-down. - https://github.com/username/repo-name/settings/pages

Upvotes: 1

Related Questions