Github Pages中是否有一个配置允许您将所有内容重定向到单页应用程序的index.html

Is there a configuration in Github Pages that allows you to redirect everything to index.html for a Single Page App?

本文关键字：重定向 单页 应用程序 html index 是否 Pages 有一个 配置 许您 Github      更新时间：2023-09-26

我正试图发布我的SPA应用程序，该应用程序在本地运行良好，但当我将其推送到Github页面时，如果直接导航到内部页面，则内部页面不会注册。

例如，http://USER.github.io/PROJECT_NAME/工作，但http://USER.github.io/PROJECT_NAME/about不工作，因为没有重定向或重写。index.html位于项目的根目录。

如果您正在创建react应用程序，并且希望在gh页面中使用浏览器路由器，则解决方案是在根目录中创建404.html文件，并在构建react应用后将index.html中的所有内容复制到404.html。

当用户尝试访问您的页面时，例如https://successtar.github.io/teamwork/如果用户尝试访问，GitHub将为您的index.html页面提供服务https://successtar.github.io/teamwork/foo，由于它不存在，GitHub将提供404.html页面，该页面与index.html具有相同的内容，通过该页面，您可以使react应用程序按预期工作。

以下是示例的源代码https://github.com/successtar/teamwork/tree/gh-pages

更新

每次运行npm run build以自动生成404.html文件时，都可以自动执行该过程。

第一步：按照 npm install shx --save-dev 为跨平台命令安装shx

第二步：转到脚本块中的package.json，用"build": "react-scripts build && shx cp build/index.html build/404.html" 替换"build": "react-scripts build"

仅此而已。

无论何时运行npm run build，404.html文件都将自动生成。

Github页面允许您创建一个404.html页面，每次都会显示。。。存在404错误。如果http://USER.github.io/PROJECT_NAME/about不存在，它会将"未找到"url的404.html内容显示为window.location。

因此，这个页面可以包含一个重定向到hashbang风格路由的脚本。例如：react router，即使使用干净的url（browserHistory）也可以理解像PROJECT_NAME/#/about这样的路由，并将自动推送到PROJECT_NAME/about。

太难看了！

我刚刚构建了这个小包（用于bower/npm）来解决这个确切的问题，所以我想在这里分享它，作为对您问题的回答，

https://github.com/websemantics/gh-pages-spa

如果您在404.html和index.html页面中包含该包，它将把所有流量重定向到Index.html、

它支持项目和用户/组织页面类型的存储库，处理QueryStrings，并附带一个工作示例

好吧，有一个简单的方法。在github页面存储库的根目录中创建一个名为404.html的文件。该文件的内容应为：

<!DOCTYPE html>
<html lang="en" id="htmlbody">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Loading...</title>
</head>
<body>
    <script>
        var doc = document.getElementById('htmlbody');
        xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function() {
            if (this.readyState == 4) {
                if (this.status == 200) {
                    doc.innerHTML = this.responseText;
                    doc.removeAttribute("id");
                }
                if (this.status == 404) doc.innerHTML = "Page not found.";
            }
        }
        xhttp.open("GET", "index.html", true);
        xhttp.send();
    </script>
</body>
</html>

基本上，该脚本只是使用Javascript对index.html执行XHR，并使内容成为文档。
我不愿意使用document.body，因为我正在考虑更新整个文档，但如果它不起作用，请将doc变量更改为document.body。
不确定这是否有效，所以我非常感谢反馈。
记住对index.html使用相同的域，否则CORS将启动。

当找不到页面时，会提供404页面通知用户。此外，当存在404.html文件时，将提供该文件而不是默认文件。

我们可以通过在您的项目根目录（index.html所在的位置）中创建一个404.html文件，并使用重定向到index.html的元标记来利用这一点；https://example.com"使用您的域。

这对我有用，希望对你也有用！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="refresh" content="0; URL='https://example.com'" />
    <title>404 - redirect</title>
</head>
<body></body>
</html>

对我来说，我一直很欣赏最简单的解决方案。

只需添加一个文件，404.html

全部内容：

<script>
    window.location.href = "/";
</script>

就是这样！希望它能有所帮助！

将此代码添加到index.html和404.html文件中：

  // if it's on index.html
  if (window.sessionStorage.path) {
  let path = window.sessionStorage.path; // gets the path saved on sessionStorage
  window.history.pushState(null, null, path); // push it on url
  window.sessionStorage.removeItem('path'); // removes from session
} else { // if it's on 404.html (path doens't exist)
  let path = window.location.pathname; // get the path url
  window.sessionStorage.path = path; // saves on sessionStorage
  window.location.href = '/'; // go to index
}

创建了两个文件404.md和404.html

  1. 404.md应具有以下内容：
---
permalink: /404.html
---
  1. 404.html应具有与index.html相同的内容

这解决了我的Angular应用程序的问题。

很抱歉回复太晚。GitHub将查找404.html文件；如果找不到，GitHub将显示其默认页面。

因此，您可以创建一个404.html文件，将用户重定向到index.html。

为此，您需要使用香草Javascript；请参阅下面的示例。

404.html

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Page not found</title>
</head>
<body>
  <noscript>You need to enable JavaScript to run this app.</noscript>
  <script>
    const urlToRedirect = 'https://rajgohil07.github.io/todo-app-redux/'
    window.location = urlToRedirect;
  </script>
</body>
</html>

您可以将项目链接传递到urlToRedirect变量。

相关文章：