Giter Site home page Giter Site logo

blazor-pages's Introduction

Blazor Github Pages

This project is an example of using GitHub Actions to automatically deploy a .NET 5 client-side Blazor app to Github Pages. For a live demo, check the following link:

https://patricedargenton.github.io/blazor-pages

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

This project differs from the project from which it's forked in that:

  • It is .NET 5, not .NET Core 3.1
  • Fewer steps from fork to running site (see below)

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, repository name must be blazor-pages, and keep all branches!)
  2. Go to your repository Settings > GitHub Pages > set the source branch to gh-pages (at the root)
  3. 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.

The presence of the .nojekyll file in wwwroot can be quite important.

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.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.