Blazor WebAssembly&Github Page部署记录

前言

对于Blazor WebAssembly，因其特殊性，可以直接部署成站点，浏览器下载后，在浏览器中直接运行，总想薅点羊毛，能够免费部署这类应用，搜寻一方了解到，像是Github Page、Azure Static App等都可以白嫖来部署静态站点。如此，结合部署过程，进行记录一番。

新建Github仓库

按照文档新建Github Pages的仓储 https://pages.github.com/

默认分支为main，先新建好一个gh-pages分支该分支用来存储静态站点文件。以避免后续main分支推了代码后不干净了。

新建项目

此处选择Blazor WebAssembly Standalone项目，非Blazor WebApp类型。

增加gitignore忽略bin/obj等文件。

dotnet new gitignore

创建完毕后推送代码到main，main分支用来存储源代码。

手动发布部署

先通过本地发布，将发布后的文件推送到分支，看效果，从而了解整个发布，部署过程。

本地发布

本地发布到文件夹

发布完毕后点击导航到文件夹中

后续部署只需要使用到wwwroot中的内容。

本地部署

新建gh-pages分支，这个分支用来存放Blazor资源文件，可以直接用于浏览器下载后访问的。复制出上一步发布后wwwroot内的文件到主目录下，剩余全部删除。

提交代码到gh-pages分支.

github设置中切换到gh-pages分支作为github pages的分支源头，切换完毕后等待，再访问仓库.github.io，例如我这的viatorlife.github.io，访问便可以看到blazor wasm应用了，尽管控制台报错，但确定是上去了。

修复问题

开始修复问题，gh-pages分支使用的默认的Github Action,不能够允许有_framework这种带下划线的文件夹，但可以增加一个空文件命名为.nojelly到gh-pages分支来去除检查，再等待后访问便恢复正常。

如果直接浏览器中输入url地址访问，会进入到404页面，因为Github Pages需要404.html

简单一点，复制index.html文件改名404.html即可。再访问便能够输入url进入到页面。

其余问题见参考文档中，此处只考虑这两个问题。

自动发布部署

如上是本地发布手动copy到gh-pages分支，再借助gh-pages分支的github action完成站点发布。这个过程可以借助Github Action来实现自动发布。

整个流程变更为如下：

1. 本地推送代码到main分支

2. main: Github Action发布

3. 产物推送到gh-pages分支

4. gh-pages: Github-Action发布

5. 静态站点部署

点击顶部Action菜单，创建工作流，搜索.NET，选择

更换默认文件名，具体名字随意

文件内容如下，各步骤见第一个参考文档内描述

# This workflow will build a .NET project
# For more information see: https://docs.github.com/en/actions/automating-builds-and-tests/building-and-testing-net

name: Deploy ti Github Pages

on:
  push:
    branches: [ "main" ]
  pull_request:
    branches: [ "main" ]

jobs:
  deploy-to-github-pages:

    runs-on: ubuntu-latest

    steps:
    - uses: actions/checkout@v4
    - name: Setup .NET
      uses: actions/setup-dotnet@v4
      with:
        dotnet-version: 8.0.x
    - name: Publish DotNet Blazor Project
      run: dotnet publish ./src/ViatorLife.Blog/ViatorLife.Blog.csproj -c Release -o release --nologo
    - name: Commit wwwroot to GitHub Pages
      uses: JamesIves/github-pages-deploy-action@3.7.1
      with:
        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
        BRANCH: gh-pages
        FOLDER: release/wwwroot

如果Github Action运行中出现了403的错误信息，为配置中缺少权限，则参照打开权限即可。 https://juejin.cn/post/7195220128995213368

后续对main分支的改动则会触发流水线，更新到gh-pages分支，gh-pages分支也会拿到新的分支内容后触发Github Action构建静态站点。

参考

https://learn.microsoft.com/en-us/aspnet/core/blazor/host-and-deploy/webassembly?view=aspnetcore-9.0#github-pages

https://swimburger.net/blog/dotnet/how-to-deploy-aspnet-blazor-webassembly-to-github-pages

2025-05-28，望技术有成后能回来看见自己的脚步。