How to Deploy a Blazor WebAssembly Standalone App to GitHub Pages
Hands-on guide to deploying a .NET Blazor WebAssembly standalone app to GitHub Pages
If you have ever built a .NET Blazor WebAssembly app, you may have separated the frontend and backend. Since Blazor WASM is essentially just the frontend, you can deploy it to most static site hosting services, including GitHub Pages.
Let’s get straight to the point. Follow these steps to create, publish, and deploy your standalone Blazor WebAssembly app.
Install the latest .NET SDK.
Create a new Blazor WebAssembly standalone app project. Let’s name it BlazorApp.
dotnet new blazorwasm -o BlazorAppAdd a .gitignore file to prevent unnecessary files from being pushed to the Git repository.
dotnet new gitignore -o BlazorAppLet’s try running it first, just to make sure it can be compiled and run without any issues.
cd BlazorApp
dotnet runOnce everything looks good, add the PublishSPAforGitHubPages.Build NuGet package. This package handles all the additional files needed for GitHub Pages.
dotnet add package PublishSPAforGitHubPages.BuildTry publishing it locally with the following command from the root repository directory.
dotnet publish BlazorApp.csproj -c Release -o publish -p:GHPages=trueNext, add a GitHub Actions workflow. This workflow will automate the publishing and deployment of your Blazor app to GitHub Pages for each new change.
mkdir -p .github/workflows/
touch .github/workflows/deploy-blazor.ymlWrite the contents of deploy-blazor.yml with the following YAML configuration.
name: Deploy Blazor WASM to GitHub Pages
on:
push:
branches: [ master ]
pull_request:
branches: [ master ]
# Allows you to run this workflow manually from the Actions tab
workflow_dispatch:
# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
permissions:
contents: read
pages: write
id-token: write
# Allow only one concurrent deployment, skipping runs queued between the run in-progress and the latest queued.
# However, do NOT cancel in-progress runs, as we want to allow these production deployments to complete.
concurrency:
group: "pages"
cancel-in-progress: false
# Default to bash
defaults:
run:
shell: bash
jobs:
build:
runs-on: ubuntu-latest
timeout-minutes: 60
steps:
# Checkout the code
- uses: actions/checkout@v4
# Install .NET SDK
- name: Setup .NET SDK
uses: actions/setup-dotnet@v4
with:
dotnet-version: 10.0.x
# Install wasm-tools
- name: Install .NET WebAssembly Tools
run: dotnet workload install wasm-tools
# Publish the Blazor WASM site
- name: Publish Blazor Site
run: dotnet publish BlazorApp.csproj -c Release -o publish -p:GHPages=true
- name: Upload all published files
uses: actions/upload-pages-artifact@v3
with:
path: publish/wwwroot
# Deployment job
deploy:
environment:
name: github-pages
url: ${{ steps.deployment.outputs.page_url }}
runs-on: ubuntu-latest
needs: build
steps:
- name: Deploy to GitHub Pages
id: deployment
uses: actions/deploy-pages@v4The final Git repository will look something like the following file tree.
.
├── _Imports.razor
├── .git
├── .github
│ └── workflows
│ └── deploy-blazor.yml
├── .gitignore
├── App.razor
├── BlazorApp.csproj
├── ci-build.sh
├── Layout
├── Pages
├── Program.cs
├── Properties
│ └── launchSettings.json
└── wwwrootCreate a public Git repository on GitHub, for example: https://github.com/pages-demo/blazor-app.
Go to the GitHub repository’s Settings > Pages. Set the Build and deployment source to GitHub Actions.
Once the repository is created and set up, go to your project directory and push all changes to GitHub. Don’t forget to replace <username> and <repo> accordingly.
git init
git remote add origin https://github.com/<username>/<repo>
git add .
git commit -m "Initial commit"
git push originWait for the build to finish.
Finally, once the build has completed, you can check the result by opening <username>.github.io/<repo>, for example: https://pages-demo.github.io/blazor-app/
Conclusion
That’s it! Now, every time you make a change to your Blazor app, it will be built and deployed to GitHub Pages automatically.
I hope you find this simple tutorial useful. As usual, if you have any issues or questions, feel free to ask in the comments section below.
