能否用Blazor构建可部署至GitHub Pages的静态无服务器网站？如何起步？

Blazor WebAssembly（WASM）正是为纯客户端场景设计的——它会把C#、Razor代码编译成WebAssembly字节码，搭配生成的HTML、JS、CSS文件，形成一套完全静态的资源包，完全符合GitHub Pages的托管要求。不管是带路由的多页结构，还是单一URL的单页实现，都能轻松支持。

1. 准备环境：安装最新稳定版的.NET SDK（推荐.NET 8），确保dotnet命令能在终端正常运行。
2. 创建Blazor WASM项目：打开终端执行命令：

   dotnet new blazorwasm -o MyBlazorSite
   

   这个命令会生成一个带基础路由的纯客户端Blazor项目。如果想要单页结构，后续可以直接删除Pages目录下的多余组件，只保留Index.razor即可。
3. 本地测试运行：进入项目目录并启动服务：

   cd MyBlazorSite
   dotnet run
   

   打开浏览器访问https://localhost:5001就能看到默认的Blazor页面。

1. 项目定制开发 #

• 页面与逻辑编写：修改Pages目录下的Razor组件，添加C#业务逻辑；在wwwroot/css目录下编写自定义样式。如果是单页需求，只需保留Index.razor，并修改App.razor，去掉<Router>组件，直接渲染<Index />即可。
• 路由配置（可选）：默认项目已经内置路由支持，通过@page指令给组件设置路由路径即可。如果需要更复杂的路由规则，可修改App.razor中的<Router>配置。

2. 编译生成静态资源 #

执行发布命令生成生产环境的静态文件：

dotnet publish -c Release

生成的静态资源会存放在bin/Release/net8.0/wwwroot目录下（路径中的net8.0需对应你使用的.NET版本），这个目录里的所有文件就是可以直接托管的内容。

3. 部署到GitHub Pages #

• 创建GitHub仓库：新建仓库，若要做个人主页，仓库名设为你的用户名.github.io；若为项目页，可自定义仓库名。
• 上传静态文件：将wwwroot目录下的所有文件上传到仓库的main分支或专门的gh-pages分支。可以用Git命令提交，也直接在GitHub网页上拖拽上传。
• 启用Pages服务：进入仓库的「Settings」→「Pages」，选择部署的分支和根目录，保存后等待GitHub自动完成部署。
• 路由刷新问题修复（若用路由）：GitHub Pages是静态托管，直接刷新非根URL会返回404。解决方法是在wwwroot目录下创建404.html，内容完全复制index.html，然后在index.html的<head>末尾添加以下JS代码：

  <script>
      (function () {
          const path = window.location.pathname;
          if (path !== '/' && !path.includes('.')) {
              window.history.pushState({}, '', '/');
              window.location.reload();
          }
      })();
  </script>
  

  这段代码会把非文件路径的URL重定向到根目录，让Blazor路由系统处理页面跳转。

4. 日常维护与优化 #

• 迭代开发：本地修改代码后，重新执行发布命令，将新的静态文件推送到GitHub仓库，GitHub Pages会自动更新。
• 性能优化：在项目的.csproj文件中添加<BlazorEnableCompression>true</BlazorEnableCompression>，开启WASM压缩，减少加载体积；也可利用GitHub Pages默认开启的Gzip压缩进一步优化。
• 本地预发布测试：发布后可以用dotnet serve --directory bin/Release/net8.0/wwwroot启动静态服务器，模拟GitHub Pages的环境测试功能。

内容的提问来源于stack exchange，提问作者PizzaOverflow