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 .





Word from me

I am not translating literally, but rather adapting, omitting very obvious things, so there will be a gag.





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
      
      



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








All Articles