Blazor WebAssembly + Jekyll

Most of my projects that I have done have been in .NET, and it’d be great to bring them to the web. Blazor WebAssembly can do just that. However, this can be tricky when using Jekyll. In this tutorial, I will show how you can add a Blazor app to your jekyll website.

See my blazor apps here

Adding Blazor to your site

In this example, I’ll be embedding my Blazor app Xaml Templates into one of my blogs.

To do this, take the publish output of your blazor app and put it in blazor/PROJECT_NAME

You will require

• _framework\
• js\
• integrity.js
• index.html

Including the _framework folder in Jekyll

By default jekyll excludes folders that start with an underscore. To fix this, add this to your _config.yml file

#has to be done this way due to a bug: https://github.com/jekyll/jekyll/issues/1352
include:
  - "_framework"
  - "_bin"

Next, remove the unicode X from the index.html in your blazor directory. Jekyll doesn’t like that for some reason.

Try running your site. The folders should now be included when you build your Jekyll site.

You should be able to navigate to /blazor/PROJECT_NAME and see your blazor app.

Note

If your blazor app uses navigation, you may need to set the base uri to be where your app is located: /blazor/PROJECT_NAME

Read more on base paths here

Embedding Blazor in a Blog Post

At this point you could link to your blazor app and users can use it, but I want to embed my blazor app into a blog.

To do this, your blazor app must start where your _framework folder is. So your blog must exist at the same url as your blazor app. To do this, you can set the permalink to blazor/PROJECT_NAME. Below is an example of how I embed my blazor app:

<script src="js/index.js" integrity=""></script>

<app>Loading...</app>
Built with <3 using Blazor
<script src="_framework/blazor.webassembly.js" integrity=""></script>
<script defer src="integrity.js" integrity="">

You should now be able to visit your jekyll blog and see that your blazor app is embedded into the blog.

Github Pages and Integrity Issues

If you are using github pages to host your jekyll site, you may need to add a .gitattributes file with * binary in it as it’s content.

This is because the javascript libraries used by blazor are validated for integrity and if they are changed after they are built, blazor will not work. By default, github standardizes line endings when files are uploaded, changing the javascript files. Adding the * binary keeps github from changing these files.

Explanation here