Deploy Blazor WASM to Github Pages in 7 steps
Assumptions:
You have an Blazor Interactive WebAssembly ( CSR ) , not a Server ( static or interactive)
I will make as the repo is https://github.com/ignatandrei/tilt . Change my name with yours and TILT with your repo
So let’s start
Step 1 You must configure GitHub Pages – create a docs folder and put an index.html . Then goto github Settings => Pages (https://github.com/ignatandrei/tilt/settings/pages ) and put there main / docs .
Step 2 Verify it is working. If your repo is https://github.com/ignatandrei/tilt , then browse to https://ignatandrei.github.io/TILT/ and ensure that you can see the index. If not, goto Step 1
Step 3 Add 2 files .nojekyll (content : null , empty …. just create it ) and .gitattributes ( content : *.js binary )
Step 4 dotnet publish your Blazor WASM csproj . Find the folder wwwroot where was published.
Step 5 Find index.html in the folder . Edit base href , put the repo name (<base href=”/TILT/” /> ). Also you can modify the css/js by adding the date ( e.g. <link rel=”stylesheet” href=”css/app.css?202312162300″ /> ) .
Step 6 Copy the index.html and the other files inside the docs folder . Also, copy the index.html as 404.html file
Step 7 Commit and push. Now you can enjoy your Blazor site hosted for free in github : https://github.com/ignatandrei/tilt
Note 1 : If some url’s do not work , then try to add the following
@inject IWebAssemblyHostEnvironment HostEnvironment
@{
var baseAddress = HostEnvironment.BaseAddress;
if (!baseAddress.EndsWith(“/”)) baseAddress += “/”;}
to the url
Note 2: For more deployments please read https://learn.microsoft.com/en-us/aspnet/core/blazor/host-and-deploy/webassembly?view=aspnetcore-8.0