我在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行。
1条答案
按热度按时间amrnrhlw1#
**TLDR:**在分支
gh-pages
中设置静态站点,并将文件和目录布局推送到Github。Github页面有不同的站点类型,但在其他方面相对简单,因此让我们首先回顾一下你的主要URL布局,然后总结一下你的仓库分支布局如何为你心目中的Github页面做出贡献。
通过将两个分支Map到您的URL布局:
您正在使用项目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
1.*tarpipe:使用
tar | tar
复制目录树(这里是git archive --format tar | tar
);c.f.Tarpipe - Tar(计算机)-维基百科,自由的百科全书1. 您的存储库 * -〉设置(最后一个选项卡)-(〉在 “常规” 下,子节 “代码和自动化” -)〉页面-(〉构建和部署-)〉分支选择文件夹**下拉列表。-https://github.com/username/repo-name/settings/pages