Alojamiento de aplicaciones WASM en páginas de github con dos clics

Saludos. Quiero transmitir una idea ingeniosa y sencilla de cómo se pueden crear aplicaciones web sencillas sin servidor y alojarlas de forma gratuita en páginas de github .

Con Blazor WebAssembly (WASM), podemos crear aplicaciones web que se ejecutan completamente en el lado del cliente. Al mismo tiempo, después de publicar ( dotnet publish



), recibimos archivos estáticos, que el usuario simplemente descarga y ejecuta. Gracias a esto, podemos alojar aplicaciones similares en hosting estático, por ejemplo, páginas github.

Construyendo un hola mundo con Blazor WASM

Usemos la maravillosa CLI de dotnet . Siguiente comando

dotnet new blazorwasm
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

crea una aplicación de plantilla con funcionalidad de demostración. Para hurgar localmente, ejecute

dotnet run
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

De forma predeterminada, la ruta será localhost:5000



o localhost:5001



.

Para ver cómo se ven los archivos estáticos que publicaremos, ejecute el comando:

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, . , , .