使用Github Pages托管Blazor应用

1.环境

VS2019 16.5.1

.NET Core SDK 3.1.200

Blazor WebAssembly Templates 3.2.0-preview2.20160.5

2.简介

每个Github用户都可以拥有一个Github Pages，可以用来作为个人网站或者是用来作为项目的demo、文档等。本文将介绍如何将一个balzor应用（WASM）部署到Github Pages上。

3.流程

3.1.创建Github Pages

首先登录Github，然后创建一个仓库userName.github.io，其中userName是github的用户名。仓库的名字必须为此，否则无效。

3.2.发布项目

邮件Blazor项目，将其发布到本地文件夹中。由于没有服务器交互，这里只需要将wwwroot目录下的文件push到仓库即可。

3.3.SPA解决方法

Github Pages本身支持多页面程序的部署，为了托管Blazor这样的SPA，需要通过404页面的重定向来解决。步骤如下：

（1）创建404页面

在wwwroot目录下新建404.html，并在404页面中写入如下内容。注意，404页面至少需要512个字节才能工作，所以可以直接将下面的所有内容都复制到404页面中。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Single Page Apps for GitHub Pages</title>
    <script type="text/javascript">
      // Single Page Apps for GitHub Pages
      // https://github.com/rafrex/spa-github-pages
      // Copyright (c) 2016 Rafael Pedicini, licensed under the MIT License
      // ----------------------------------------------------------------------
      // This script takes the current url and converts the path and query
      // string into just a query string, and then redirects the browser
      // to the new url with only a query string and hash fragment,
      // e.g. http://www.foo.tld/one/two?a=b&c=d#qwe, becomes
      // http://www.foo.tld/?p=/one/two&q=a=b~and~c=d#qwe
      // Note: this 404.html file must be at least 512 bytes for it to work
      // with Internet Explorer (it is currently > 512 bytes)

      // If you\'re creating a Project Pages site and NOT using a custom domain,
      // then set segmentCount to 1 (enterprise users may need to set it to > 1).
      // This way the code will only replace the route part of the path, and not
      // the real directory in which the app resides, for example:
      // https://username.github.io/repo-name/one/two?a=b&c=d#qwe becomes
      // https://username.github.io/repo-name/?p=/one/two&q=a=b~and~c=d#qwe
      // Otherwise, leave segmentCount as 0.
      var segmentCount = 0;

      var l = window.location;
      l.replace(
        l.protocol + \'//\' + l.hostname + (l.port ? \':\' + l.port : \'\') +
        l.pathname.split(\'/\').slice(0, 1 + segmentCount).join(\'/\') + \'/?p=/\' +
        l.pathname.slice(1).split(\'/\').slice(segmentCount).join(\'/\').replace(/&/g, \'~and~\') +
        (l.search ? \'&q=\' + l.search.slice(1).replace(/&/g, \'~and~\') : \'\') +
        l.hash
      );

    </script>
  </head>
  <body>
  </body>
</html>

（2）更改index.html

在index页面中加入重定向脚本，其脚本必须内嵌至index.html文件中，而且是在页面的其他脚本执行之前执行。另外，如果index.html并不是在仓库的根目录下，还需要更改<base href="/" />为<base href="/folder/…/" />，以使得href+index.html能找到本页面。最终样子大概如下：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>title</title>
    <base href="/" />
    ...
</head>

<body>
    <app>Loading...</app>
     <!-- End Single Page Apps for GitHub Pages -->
    <div id="blazor-error-ui">
        An unhandled error has occurred.
        <a href="" class="reload">Reload</a>
        <a class="dismiss">