在Github Pages上将子目录设置为网站根目录

101

我使用Github Pages来托管和提供静态网站。

这个静态网站有一个应用程序的典型目录结构:

.
├ source/
├ build/
│ └ index.html
├ .gitignore
├ config.rb
├ Gemfile
┆ ...
└ README.MD

index.htmlbuild/下,所以我想将其设置为默认的www路径。

这样,当用户访问username.github.io时,它会呈现该子目录中的内容,但不会在URL上显示“/build/”,因为它被设置为根文件夹。

注:

  • 我没有自定义域名,也没有计划为此目的获取自定义域名。正如您所看到的,我正在尝试利用github提供的默认URL命名约定。
  • 不使用Jekyll或自动页面生成器函数。


请确保您已安装git subtree,如https://dev59.com/eWMm5IYBdhLWcg3wMswp中所示。 - sbkm
10个回答

86

这里有一个详细的要求步骤的摘要。

这个摘要在这里:
https://gist.github.com/cobyism/4730490


从摘要中得到

将子文件夹部署到GitHub Pages

有时您希望将主分支上的子目录作为存储库的gh-pages分支的根目录。这对于使用Yeoman开发的站点非常有用,或者如果您在与其余代码一起包含Jekyll站点的master分支中。

假设包含您站点的子文件夹名为dist

步骤1

从项目的.gitignore文件中删除dist目录(默认情况下被Yeoman忽略)。

步骤2

确保git知道有关您的子树(具有您站点的子文件夹)的信息。

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

第三步

使用子树push将其发送到GitHub上的gh-pages分支。

git subtree push --prefix dist origin gh-pages

如果你的文件夹不叫做dist,那么你需要在上述每个命令中更改它。

如果您经常这样做,您还可以在路径的某个位置创建一个包含以下内容的脚本

#!/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

这使您可以输入命令,例如:

git gh-deploy path/to/your/site

因此,使用这种URL约定:username.github.io/projectname。对吗? 这将需要将存储库重命名为“projectname”,以便我可以使用Project Pages设置(https://help.github.com/articles/user-organization-and-project-pages/),对吗? - Oriol
可以使用自定义域名。 - CodeWizard
1
好的,我想这是唯一的解决方案。谢谢! - Oriol
2
经过进一步的研究,我发现无法完成最初的要求。如果您想让它出现在username.github.io上,您需要将构建文件夹的内容放入根目录中。否则,请使用上面的解决方案。 - Oriol
1
gh-deploy 不再是一个有效的命令。我的子文件夹是 public 文件夹,Firebase 默认要求您在其中托管。 - Dhruv Ghulati
你好,有没有一种方法可以通过 GitHub action 自动执行 git subtree push --prefix dist origin gh-pages - gruvw

38

自2016年8月起,您可以使用主分支(master)的/docs子文件夹作为您的源文件。

因此,如果您能告诉您的网站生成器将/构建(build)更改为/docs,那么您就完成了(无需子树)。

注意: 如@thislooksfun在评论中指出,这仅适用于项目页面(例如<username>.github.io/<projectname>),而不适用于用户或组织页面(例如<name>.github.io)。


2
值得注意的是,这仅适用于非用户/组织站点。更具体地说,“要从主分支上的/docs文件夹发布您网站的源文件,您必须拥有一个主分支,并且您的存储库不能遵循存储库命名方案<username>.github.io或<orgname>.github.io”(https://help.github.com/articles/configuring-a-publishing-source-for-github-pages/)。 - thislooksfun
还要注意,如果您的账户下已经有另一个名为<username>.github.io的仓库,则/docs将无法使用。它只会直接在master上查找index.html。请参阅此页面顶部:https://help.github.com/articles/configuring-a-publishing-source-for-github-pages/ - prograhammer

9

这是一个新的解决方案(测试版)。

前往 Github Pages 设置选项卡,现在将源更改为“Github Actions”

Go to the Github Pages Settings tab and now change the source to "Github Actions"

接下来,它将让您选择和配置要使用的操作(Jekyll或静态HTML)。我选择了静态HTML,这里需要进行一次单一但重要的更改。
默认情况下,路径设置为“。”(当前目录)。您需要将其更改为适用于您的子文件夹。

By default, the path is set to '.' (the current directory). You need to change this to the sub-folder that is relevant for you.

在我的情况下,我有一个名为javadocs的文件夹,其中包含相关的HTML。现在保存更改,然后将提交推送到主分支或手动运行操作以查看实时页面!

1
对我来说,当我应用这个设置时,它仍然根据主目录中的README.md生成了一个站点,并将子目录放在根目录下。然而,修改actions/jekyll-build-pages@v1操作中的source确实像你描述的那样起作用。 - undefined

2

对我来说,被接受的答案只在第一次运行时有效。重新运行会出错。

我通过运行以下命令解决了这个问题:

git checkout --orphan gh-pages
git --work-tree build add --all
git --work-tree build commit -m 'gh-pages'
git push origin HEAD:gh-pages --force
git checkout -f master

错误:src refspec HEAD 不符合任何内容。 - Alberto Zanovello

1

使用worktree功能从master分支发布dist文件夹到gh-pages分支。

请从这里获取Gist: https://gist.github.com/ErickPetru/b1b3138ab0fc6c82cd19ea3a1a944ba6

设置

首先,您需要有一个gh-pages。如果没有,请创建:

git branch gh-pages

这将基于master HEAD创建一个分支。 这本来没问题,但是gh-pages分支上的文件和git历史与master分支无关。 使用--orphan分支,您可以以清晰的方式初始化gh-pages

git checkout --orphan gh-pages
git reset --hard
git commit --allow-empty -m "Init gh-pages branch"
git checkout master

然后,使用git worktree将该分支作为子目录挂载:

git worktree add dist gh-pages

如果您没有忽略 dist 文件夹,请忽略它,以便不会在您的 master 分支提交中意外添加生成的文件。

echo "dist/" >> .gitignore

部署

每次构建静态包时,生成的文件都在dist目录中。 由于dist文件夹现在是gh-pages分支,只需创建提交并将其推送即可直接部署它。

cd dist
git add --all
git commit -m "Deploy on gh-pages updated"
git push origin gh-pages

通过这种方式,没有任何内容被添加到master 分支历史记录中,保持它干净整洁。


1
为了使使用public/文件夹的hugo网站在gh-pages分支上工作,这里是我正在使用的超级hacky但完成任务的内容: < p > < em >注意:hugolanding是您的config.toml所在的文件夹根目录,此脚本从scripts文件夹运行,您完全可以将其移动到其他位置并更改该行。

#!/bin/bash
# move to root
cd ../hugolanding
# generate public content
hugo -D
# prep copy folder
rm -rf /tmp/public && mkdir -p /tmp/public
# copy out of git shit
cp -R public/* /tmp/public
# git yolo everything
git add -A 
git commit -m 'updates to public'
git push --recurse-submodules=on-demand
git checkout gh-pages
cd ..
cp -R /tmp/public/* .
git add -A 
git commit -m 'updated gh-pages'
git push --recurse-submodules=on-demand
echo "done"
git checkout main

0

0

我认为使用git-worktree和从单独的分支部署是更清晰的选择,因为我不会在我的main分支中有来自重新部署的提交混杂其中,这样更简洁。如果我使用git subtree,每次都要删除远程分支,这是不必要的。

git-worktree将您的子目录dist(以此示例)挂载到一个单独的分支gh-pages中。

以下是操作步骤:

git branch --track gh-pages origin/gh-pages # Create new gh-pages branch; Add tracking    
git checkout --orphan gh-pages              # Initialize gh-pages without main's history
git reset --hard                            # Remove all history
git commit --allow-empty -m "Init"          # First commit without any files
git checkout main                           # Go back to main (or master) branch
git worktree add dist gh-pages              # Mount dist and bind it to the gh-pages branch

dist 是一个类似于 npm 构建脚本的东西:

"scripts": {
  ...
  "dist": "ng build --configuration production && echo 'gitdir: /home/<user>/<repo>/.git/worktrees/dist' > ./dist/.git"
  ...
}

它所做的只是重新创建git-worktree引用,因为默认情况下ng build会删除dist中的.git文件。这个引用是gitdist链接到索引所需的。
工作流程大致如下:
npm run dist            # Build website with new changes; Removes dist and re-creates it
cd dist                 # Move to gh-pages branch by switching into a directory (cool huh)
git add .               # Add all generated files to staging area
git commit -m "v0.0.3"  # Update the version history of the gh-pages branch
git push                # Push changes to gh-branch

如果你运行git status,它会回复On branch gh-pages
git log将显示一个提交"Init"

但是当你cd ..并再次运行git status时,响应将是On branch main
git log将显示所有原始提交到main的内容。

所以这里发生的事情非常有趣。文件夹dist现在有一个单独的分支,具有自己的、与main无关的历史记录, 而要切换的所有操作只需cd dist即可访问该分支(gh-pages)。

这与git checkout dist不同,后者会将自动生成的构建文件附加到您的工作树中的dist目录中,混合您的main和部署历史记录,这很不方便。

在这里,您的src文件将保持不变,连同它们在maincd ..中的历史记录,只有部署所需的文件将位于此分支上,这非常方便,因为它将src历史记录与部署历史记录分开。

现在,您将不再从文件夹部署,而是从一个分支部署,该分支在GitHub页面中保存了您站点的最新编译版本,并且是从/(root)构建的。

index.html位于build/下,因此我想将其设置为默认的www路径。

在这里,请确保您创建的存储库是<username>.github.io。我犯了同样的错误,使用了不同的存储库名称,感到非常沮丧。

因此,当用户访问username.github.io时,它会呈现该子目录中的内容,但它不会在URL上显示“/build/”,因为它被设置为根文件夹。

当然,这里可能还有改进的空间。例如,使npm run dist执行所有这些操作,但我个人更喜欢手动执行这些步骤。

关于该方法的更多信息,请点击此处

但是,我同意如果您正在团队中工作,最好使用像gh-pages这样的工具来强制执行项目中的标准。

我希望我的解释也能对提供某些贡献,而不仅仅是对上述方法的重新陈述。


0

在 package.json 中添加主页,如下所示

"homepage": "https://gamingumar.com/watcher",

-2

push-dir 可以完成此操作:

npm install push-direxample
push-dir --dir=build --branch=gh-pages

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接