MudBlazor GitHub Pages

This project is an example of using GitHub Actions to automatically deploy a .NET 8 MudBlazor WebAssembly SPA (Single Page Application) to GitHub Pages. For a live demo, check the following link:

https://mudblazorgithubpages.github.io

Microsoft Docs already contains a general overview of the steps needed for a successful deploy.

How to deploy

1. Create a repository based on this template via the "Use this template" button (you don't fork, a fork is for contributing to this template or creating your own template)
2. Go to your repository Settings > GitHub Pages > set the source branch to gh-pages-from-actions
3. Set permissions for GitHub Actions
4. Enable Dependabot: Insights > Dependency graph > Dependabot > Enable Dependabot
5. View your site at https://[ your user name | your organization name ].github.io

How it works

The CI pipelines first perform a normal dotnet publish of the app, which will generate a dist bundle ready to be deployed. This bundle is then pushed differently depending on the CI environment:

• Azure Pipelines: the bundle is force pushed to gh-pages by using raw Git commands
• GitHub Actions: an already existing action is used to push the bundle to gh-pages-from-actions

How to use this for your own project

The <base> url in index.html will need to be modified depending on where the project is deployed. If deploying on the root level, set segmentCount = 0 in 404.html as well.

When testing on localhost, the applicationUrl for IIS Express in launchSettings.json will need to be updated to reflect the same base url as in index.html.

Paths in the Azure Pipelines yaml file / GitHub Actions workflow may need to be updated accordingly.

CI / CD

The Azure pipeline is expecting access to one variable group named GitHubPATGroup, which should contain the following three variables:

• GitHubPAT: A Personal Access Token with sufficient permission to (force) push to the gh-pages branch
• GitHubName: The name of the user committing to the gh-pages branch
• GitHubEmail: The email of the user committing to the gh-pages branch

The gh-pages branch must exist already for the deployment to be successful (this is a temporary limitation in the pipeline configuration).

In the case of GitHub Actions, only a single secret is needed: ACCESS_TOKEN, equivalent to GitHubPAT above. An example of a full deployment using GitHub Actions can also be found in my blazor-fractals repository.