next.js GitHub页面:来自同一存储库中两个分支的两个网站

oxalkeyp  于 2023-04-20  发布在  Git
关注(0)|答案(1)|浏览(84)

我在GitHub仓库中有以下分支:

  • main(这里没有,只有一个README.md文件)
  • branch1-一个NextJS项目,其中包含一个.github/workflows文件夹,可以在运行时将项目部署到GitHub Pages。
  • branch2-一个包含不同内容的静态html网站。

我希望使用GitHub Actions将branch1部署在https://username.github.io/repo-name/上,并将branch2作为静态站点部署在https://username.github.io/repo-name/branch2/上。
我该怎么做,如何开始?
PS:YAML操作将生成的静态HTML(来自npm run export)推送到自动创建的gh-pages分支,并使用gh-pages -d ./out命令进行部署。它工作得非常好。
编辑:我可能有一个想法,但我不确定如何开始实现它。每当运行gh-pages -d ./out命令时,GitHub都会从gh-page分支部署我的站点。所以,也许我可以在我的仓库的页面设置下将“Deploy from branch”设置为gh-page,然后在branch2中,我可以编写一个自定义的YAML GitHub Action,以便每当对静态HTML进行更改并推送时,它将复制整个分支(分支中也有CSS和JS子文件夹)转移到gh-page分支中一个名为branch2的文件夹中。但是每当branch1有推送时,该文件夹就会被删除,由于gh-pages -d ./out命令正在运行。所以也许可以编辑NextJS部署脚本,使其在部署时不会删除branch2文件夹?同时更改静态HTML部署脚本,使其不会在每次更改时复制整个分支,而是只复制更改的文件/行。但这会不会太复杂?
EDIT 2:这是我的工作流程脚本。

# 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

网站目前运行良好,没有问题。注意我的分支名称在第10行。

amrnrhlw

amrnrhlw1#

**TLDR:**在分支gh-pages中设置静态站点,并将文件和目录布局推送到Github。

Github页面有不同的站点类型,但在其他方面相对简单,因此让我们首先回顾一下你的主要URL布局,然后总结一下你的仓库分支布局如何为你心目中的Github页面做出贡献。
通过将两个分支Map到您的URL布局:

  1. https://username.github.io/repo-name/
  2. https://username.github.io/repo-name/branch2/
    您正在使用项目Github Pages Site-Type 1和
    项目站点的源文件存储在与其项目相同的存储库中。
    您可以在将更改推送到特定分支时发布站点[.]
    Microsoft Github文档开始有点羞于命名该分支,我们只能推测这是因为它长期记录在Stackoverflow等场外资源中(例如"git branch: gh-pages"),但在从分支发布故障排除2下,分支名称被记录下来,并记录了如何部署到它(使用git(1)(!)):
    大多数[...]工作流通过将构建输出提交到存储库的gh-pages分支来“部署”到GitHub Pages,并且通常包括.nojekyll文件。当这种情况发生时,GitHub Actions工作流将检测到分支不需要构建步骤的状态,并且将仅执行将站点部署到GitHub Pages服务器所需的步骤。
    从最初的URL布局可以得出结论,无论何时从branch1构建NextJS完成,您都要将branch2“ checkout ” 到NextJS构建目标目录的branch2文件夹中。
    要以可复制的方式 “checkout”branch2,请使用git-archive(1) 3命令作为tarpipe 4。不仅处理文件时间戳,还可以控制源和目标目录Map以及专用排除(请注意,即使您的项目存储库是私有的,Github页面也是公共的)。
    只有这样,你才能继续在你的Github Pages部署分支配置下发布整体结果,也就是说,你提交构建目标目录作为Github Pages分支5的静态文档目录,并将其推送到Github远程(默认情况下为origin,参见git-push(1))。
    1.GitHub Pages网站类型-https://docs.github.com/en/pages/getting-started-with-github-pages/about-github-pages#types-of-github-pages-sites
    1.从分支发布疑难解答-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
    1.*tarpipe:使用tar | tar复制目录树(这里是git archive --format tar | tar);c.f.Tarpipe - Tar(计算机)-维基百科,自由的百科全书
    1.
    您的存储库 * -〉设置(最后一个选项卡)-(〉在 “常规” 下,子节 “代码和自动化” -)〉页面-(〉构建和部署-)〉分支
    选择文件夹**下拉列表。-https://github.com/username/repo-name/settings/pages

相关问题