Hosting WASM applications on github pages in two clicks

Greetings. I want to convey an ingenious and simple idea of ​​how you can create simple serverless web applications and host them for free on github pages .

With Blazor WebAssembly (WASM), we can create web applications that run entirely on the client side. At the same time, after publishing ( dotnet publish



), we receive static files, which the user then simply downloads and executes. Thanks to this, we can host similar applications on static hosting, for example, github pages.

Building a hello world with Blazor WASM

Let's use the great dotnet CLI . Next command

dotnet new blazorwasm
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

creates a template application with demonstration functionality. To poke around locally, run

dotnet run
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

By default, the path will be localhost:5000



or localhost:5001



.

To see what the static files that we will publish look like, run the command:

dotnet publish
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

bin/Debug/net6.0/publish/wwwroot



( ). index.html , ( wwwroot ).

, .

# gitignore  .NET  (,  obj  bin)
dotnet new gitignore

#  
git init

#      ( )
git add --all

# 
git commit -m "Initial commit"
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

git remote add origin https://github.com//
git push -u origin main
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

CI github pages

-, Github Actions:

workflow, . YAML:

name: Deploy to GitHub Pages

#       main
on:
  push:
    branches: main
    
jobs:
  deploy-to-github-pages:
    runs-on: ubuntu-latest
    steps:
      #     
    - uses: actions/checkout@v2
    
      #   SDK (    )
    - name: Setup .NET 6
      uses: actions/setup-dotnet@v1
      with:
        dotnet-version: '6.0.x'
        include-prerelease: true
        
      #   
    - name: Publish .NET Core Project
      run: dotnet publish BlazorGitHubPagesDemo.csproj -c Release --output release --nologo
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

(--nologo



)

, release, gh-pages. Action, steps:

- name: Uploading files to gh-pages branch
  uses: JamesIves/github-pages-deploy-action@4.1.4
  with:
    branch: gh-pages
    folder: release/wwwroot
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

, , . , . , , , , , ( yourusername.github.io/YourRepo



).

,

, Github Pages Settings -> Pages .

!

, ,

,

, - ( swimburger.github.io/BlazorGitHubPagesDemo/css/app.css



). - , /



index.html, . :

      #  '/'  '/BlazorGitHubPagesDemo/'
    - name: Change base-tag in index.html from / to BlazorGitHubPagesDemo
      run: sed -i 's/<base href="\/" \/>/<base href="\/BlazorGitHubPagesDemo\/" \/>/g' release/wwwroot/index.html
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

( BlazorGitHubPagesDemo )

,

. , Github Pages , _, , jekyll. :

      #  jekyll
    - name: Add .nojekyll file
      run: touch release/wwwroot/.nojekyll
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

, .

404

404. index.html 404.html:

      #  index.html  404.html
    - name: copy index.html to 404.html
      run: cp release/wwwroot/index.html release/wwwroot/404.html
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

( )

- Github pages, - , .

.

!

, - .

, ( ), BCL . deployment, . , , .