Before because of

Recently, GitHub Pages hosted a small DEMO, but the DEMO is SPA, but GitHub Pages cannot support SPA configuration, here is a record of the solution.

404

GitHub Pages does not support SPA, but does support custom 404 Pages. Reference: GitHub Pages 404.

You can display a custom 404 error page when people try to access nonexistent pages on your site.

By creating a 404.html (or 404.md, but with some configuration, see the link above), visiting a page that doesn’t exist redirects you to a 404 page.

Initial plan

Since you can use 404 pages to catch non-existent page requests, you can use 404 pages to jump.

<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>404</title>
        <script>
            // Or a specific path
            location.href = location.origin;
        </script>
    </head>
    <body></body>
</html>
Copy the code

With 404 pages, you can redirect all pages to index, which is a simple implementation of SPA.

Advanced solutions

Although the 404 to index jump is realized, it is still far from the real SPA experience. Every time you enter the page, you can only jump to the home page.

At this time, you can think of a way to save the routing information before the jump and restore it after the jump. The steps are as follows:

  1. On the 404 page, record the current route information
  2. The route information was forwarded to index
  3. After entering index, check the route information and restore the route

404.html

<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>404</title>
        <script>
            location.href = location.origin + '/? page=' + encodeURIComponent(location.href.replace(location.origin, ' '));
        </script>
    </head>
    <body></body>
</html>
Copy the code

index.html

<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>index</title>
        <script>
            (function() {
                if (location.search) {
                    var params = {};
                    location.search
                        .replace(/ ^ \? /.' ')
                        .split('&')
                        .forEach(s= > {
                            var v = s.split('=');
                            params[v[0]] = v[1];
                        });
                    if (params.page) {
                        history.replaceState(null.null.decodeURIComponent(params.page)); }}}) ();</script>
    </head>
    <body><script type="text/javascript" src="main.min.js"></script></body>
</html>
Copy the code

Through the above steps, the complete routing information can be brought to index to restore, so as to achieve the effect of SPA. Of course, you can see the route jump in the browser address bar. The experience is slightly worse, but the function is basically the same.

The final result

You can see the effect:

Rapiop.github. IO /vue/

GitHub address: github.com/rapiop/rapi…

Matters needing attention

  • Most GitHub Pages have their own project path, such astest.github.io/test/, this time need to do some processing to the above logic, can not be used directly.
  • Page in the URL parameter can be customized. Do not conflict with existing routing information.
  • In addition to URL parameter transfer, you can also pass routes through localStorage and other means, but there will be a very small probability of problems, such as 404 pages have not jumped to close the page, the next time to open the home page may jump to the previous stored routes and so on.

reference

  • GitHub Pages 404
  • spa-github-pages