如何在 GitHub 页面上发布 Ionic 5 网站?
How to publish a Ionic 5 website on GitHub pages?
我已经在 GitHub 页面上毫无问题地发布了一些网站。我通常的工作流程是建立一个网站,上传到我的存储库的根目录(/
)或文档(/docs
)目录并在设置中设置GitHub页。
这是我第一次使用 Ionic。我写了一个网站,我用 运行 ionic build --prod
建立了它。
然后我将我的内容上传到 repo 的 /docs
目录。
当我访问网站 https://<nickname>.github.io/<myrepo>/
时,它让我进入一个空白页面。使用 Google Chrome 开发工具检查,我可以看到脚本被引用 https://<nickname>.github.io/script.js
而不是 https://<nickname>.github.io/<myrepo>/script.js
我怎样才能让它发挥作用?我做错了什么?
您可以找到我项目的完整源代码here。大家可以自己搭建,有没有问题试试看。当我在我的本地网络服务器上执行该站点进行测试时,该站点可以正常运行。
如何使任何 React 网站与 GitHub 页面
一起工作
先决条件
- 已安装 npm
- 包含 React 项目的目录
- git 在此目录上设置的存储库并链接到 GitHub
上的远程
要遵循的步骤
- 运行
npm install gh-pages --save-dev
- 编辑package.json文件:
- 添加这一行:
"homepage": "http://githubname.github.io/repository"
。使用您的昵称和存储库名称
- 在 scripts 部分添加这些行:
-
"scripts": {
//...
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
}
- 推送一个提交
-
git add .
git commit -m "Create a React app and publish it to GitHub Pages"
git push origin master
- 您的网站位于 http://githubname.github.io/repository
有关详细信息,请参阅 this page
Ionic 5 的额外步骤
如果您使用的是 Ionic 5,仍然会出现一些错误。
在这种情况下,请访问 http://githubname.github.io/repository 上的网站并打开 Chrome 检查器工具 (CTRL + SHIFT + I)。
查看Console:某些JS或TS脚本无法加载。您可以看到浏览器正在以错误的路径查看脚本。
通过手动编辑 index.html,您可以将脚本指向正确的 URL。
将编辑后的 index.html 上传到 GitHub 存储库的 gh-pages 分支中,一切顺利。
我已经在 GitHub 页面上毫无问题地发布了一些网站。我通常的工作流程是建立一个网站,上传到我的存储库的根目录(/
)或文档(/docs
)目录并在设置中设置GitHub页。
这是我第一次使用 Ionic。我写了一个网站,我用 运行 ionic build --prod
建立了它。
然后我将我的内容上传到 repo 的 /docs
目录。
当我访问网站 https://<nickname>.github.io/<myrepo>/
时,它让我进入一个空白页面。使用 Google Chrome 开发工具检查,我可以看到脚本被引用 https://<nickname>.github.io/script.js
而不是 https://<nickname>.github.io/<myrepo>/script.js
我怎样才能让它发挥作用?我做错了什么?
您可以找到我项目的完整源代码here。大家可以自己搭建,有没有问题试试看。当我在我的本地网络服务器上执行该站点进行测试时,该站点可以正常运行。
如何使任何 React 网站与 GitHub 页面
一起工作先决条件
- 已安装 npm
- 包含 React 项目的目录
- git 在此目录上设置的存储库并链接到 GitHub 上的远程
要遵循的步骤
- 运行
npm install gh-pages --save-dev
- 编辑package.json文件:
- 添加这一行:
"homepage": "http://githubname.github.io/repository"
。使用您的昵称和存储库名称 - 在 scripts 部分添加这些行:
-
"scripts": { //... "predeploy": "npm run build", "deploy": "gh-pages -d build" }
- 添加这一行:
- 推送一个提交
-
git add . git commit -m "Create a React app and publish it to GitHub Pages" git push origin master
- 您的网站位于 http://githubname.github.io/repository
有关详细信息,请参阅 this page
Ionic 5 的额外步骤
如果您使用的是 Ionic 5,仍然会出现一些错误。 在这种情况下,请访问 http://githubname.github.io/repository 上的网站并打开 Chrome 检查器工具 (CTRL + SHIFT + I)。 查看Console:某些JS或TS脚本无法加载。您可以看到浏览器正在以错误的路径查看脚本。
通过手动编辑 index.html,您可以将脚本指向正确的 URL。 将编辑后的 index.html 上传到 GitHub 存储库的 gh-pages 分支中,一切顺利。