DEV Community

Cover image for The easier way to publish your Blazor WebAssembly app for GitHub Pages

Posted on

The easier way to publish your Blazor WebAssembly app for GitHub Pages

Publishing your Blazor Wasm app to GitHub Pages isn't difficult, but is chores.

As you know, your Blazor WebAssembly app can be deployed to GitHub Pages.

The good articles about how to deploy a Blazor WebAssembly app to GitHub Pages are already exists, like the below.

The following list is the main task to deploy a Blazor WebAssembly app to GitHub Pages.

  • Add a .nojekyll file to avoid the "Jekyll" translation.
  • Add a .gitattribute file to avoid changing end-of-line characters.
  • Rewrite the base URL inside the index.html.
  • Copy the index.html to the 404.html.

Each task in the list above is not difficult, but rather a simple operation.

Implementation of these 4 tasks to GitHub workflow .yml file every time is very boring to me, so I thought it must be automated.

"Publish SPA for GitHub Pages" NuGet Package

Finally, I made a new NuGet package that makes a Blazor Wasm app project to be available to publishing to GitHub Pages including 4 tasks described in the before section.

That NuGet package is "Publish SPA for GitHub Pages".

With this NuGet package, what you should do to publishing your Blazor Wasm app is just ONLY 2 STEPS as following.

  1. Add the "PublishSPAforGitHubPages.Build" NuGet package to the Blazor Wasm app project.
$ dotnet add package PublishSPAforGitHubPages.Build
Enter fullscreen mode Exit fullscreen mode
  1. Specify the GHPages=true MSBuild property when you publish the Blazor Wasm project.
$ dotnet publish -c:Release -p:GHPages=true
Enter fullscreen mode Exit fullscreen mode

After doing these 2 steps, the published contents are made to be suitable for GitHub Pages deploying.


It is easy, isn't it? :)

Due to "PublishSPAforGitHubPages.Build" NuGet package taking care of chore tasks that makes the app to be suitable for GitHub Pages, the GitHub Workflow .yml code that to deployment the app can be simplified.

For example, .github/workflows/*.yml file that deploys the Blazor Wasm app to GitHub Pages will be like as below.

name: Deploy to GitHub Pages

      - master

    runs-on: ubuntu-18.04
      # Checkout the code
      - uses: actions/checkout@v2

      # Install .NET Core SDK
      - name: Setup .NET Core
        uses: actions/setup-dotnet@v1
          dotnet-version: 5.0.101

      # Publish the site
      - name: Publish
        #      Don't missing to add "p:GHPages=true". đŸ‘‡
        run: dotnet publish ProjectDir/Project.csproj -p:GHPages=true -o:public -c:Release

      # Deploy the site
      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: public/wwwroot
          force_orphan: true
Enter fullscreen mode Exit fullscreen mode

And also, "Brotli" compression is enabled!

And one more thing, the published contents with the "PublishSPAforGitHubPages.Build" NuGet package is already enabled "Brotli" compression loading, out of the box!

"PublishSPAforGitHubPages.Build" injects the custom loader script into the index.html automatically for loading "Brotli" compressed contents.

In my case, the size of my Blazor Wasm app contents was reduced from 17.3 MBytes to 7.7 MBytes by "Brotli" compression.

It is a 45% compression rate.

Compression rate chart

For more detail about "Brotli compression in Blazor Wasm apps" please see also the official documentation site.


With adding "PublishSPAforGitHubPages.Build" NuGet package to your Blazor WebAssembly project, what you should do to publishing it for GitHub Pages is, only specify GHPages=true MSBuild property.

And, "PublishSPAforGitHubPages.Build" NuGet package makes the published contents to be loading "Brotli" compressed contents enabled.

I'm happy if somebody could save their time by using "PublishSPAforGitHubPages.Build" NuGet package.

Happy coding! :)

Discussion (2)

nakigoe profile image
NAKGIOE.ORG • Edited on

dotnet publish -c:Release -p:GHPages=true
I receive the following error message:
c:...\6.0.1\Sdk\wasmapp.native.targets(425,5) error MSB3073: The command "emcc --version" exited with code -1073741515

The error occurs only when «-c:Release» option is enabled to .NET Intermediate Language (IL) linking also run to reduce the size of the published app.

From other messages it looks like it's emsdk installs unsupported Python version for Windows 7
My system:
Windows 7 64bit (SP1)
.NET 6.0.101
standard blazorwasm app, created by running in the command line:
dotnet new blazorwasm -o

I am trying to create a website on razor components out my AMP-HTML & CSS website with tons of CSS animations and graphics — a perfect task for WebAssembly. And to upgrade my site navigation.

I receive the following error message when running build on GitHub pages:
Run sed -i 's///g' release/wwwroot/index.html
sed: can't read release/wwwroot/index.html: No such file or directory

What has gone wrong with the project and the .yml file?

So it was faster to host on another provider
You can take a look at my live Blazor WebAssembly app here:


sanjib51 profile image

Thanks for informative article. It help me a lots.