I'll start this by saying I'm definitely working a bit above my paygrade here. I'll be doing my best to describe this problem and make it easiest to answer.
I've made a Blazor project in Visual Studio and this is connected to the GitHub repository here in the gh-pages branch. After reading Blazor's hosting and deploying guide here, I published the project in Visual Studio and copied the files in the /bin/Release/netstandard2.0/publish/ChargeLearning/dist
folder to the root of the repository resulting in a repository with this file structure:
ChargeLearning
ChargeLearning
_content
_framework
css
sample-data
ChargeLearning.sln
index.html
At this point I think am already neck-deep in bad practice.
Regardless, attempting to load the index.html results in 404 errors in the console for most of the files in the html header like bootstrap (as the blazor deploying guide warned).
So I followed the instructions there as best as I could, attempting to implement this single page app (SPA) fix for gh-pages linked in the guide.
I added the 404.html file to the ChargeLearning repository now when I load the page it displays just one 404 error, for the blazor.webassembly.js
file.
I then add the redirect script from the SPA fix to my willthamic.github.io
repository which when I open the direct url to the blazor.webassembly.js
file seems to redirect properly but github shows my home page and I now realize that it has been severely mangled and now images aren't loading.
I feel like I am doing a lot of things wrong here which makes it difficult to isolate and solve a single problem at once.
If you have specific advice on how to properly deploy this or even small things on how to do what I'm trying to do a little more properly I would greatly appreciate it.
Thanks in advance.
Publish the app Publish a hosted Blazor WebAssembly solution from the Server project. Select the Publish {APPLICATION} command from the Build menu, where the {APPLICATION} placeholder the app's name. Select the publish target. To publish locally, select Folder.
To achieve this, navigate to the Action tab in the GitHub repository and click the set up a workflow yourself option to create a new GitHub workflow action. Clicking set up a workflow yourself will navigate to the Edit new file page. This file will instruct GitHub actions to build and deploy your project using YAML.
The blazor.webassembly.js
file was stored in a directory beginning with an underscore (_framework), which github's jekyll ignores when deploying the website. After adding a file named .nojekyll
to the root of the repository there was still a 404 error which confused me for a very long time. It then turned out I needed to make a change to another file to cause the website to be rebuilt, finally correcting the issue.
I still feel as though I am doing many things which could be bad practice, but that is for another day. If someone has any advice relating to that I will award the bounty for it.
Looking at the current state of your gh-pages branch I'm guessing you've mixed the files that were in the publish directory with the source files from your solution? If so, you just need to clean the source files out of the gh-pages branch so only the files you copied from the publish directory are present.
Other than that what you have now looks to be correct.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With