I spent most of my day setting up a site to host some games. I wanted to document some struggles I’ve had with the setup.
First of all, I’ve never really done any web development outside of updating my old myspace page so this was a huge learning experience for me. I started by copying the html and css from websites I like and frankensteining them together. I realized I could just copy and paste a block of html to add in a new post each time I wanted to write an update.
<li id="2019 Feb 21" class="post">
<span class="date">2019 Feb 21</span>
<img src="data/pic.png" alt="Cassiopeia"
class="img" title="Cassiopeia" border="0">
Blah blah blah, I'm writing a post
</li>To be honest the whole process started to seem a little primitive for 2019. In my mind, I was imagining being able to run a program that would put all of this html together for me dynamically. It turns out I’m not the only one who feels this way because there are about a thousand of these things called Static Site Generators which do exactly that. You can find a pretty detailed list here.
I ended up choosing Hugo for no particular reason other than it seems quite popular. I was considering trying to find one written in rust as I am currently trying to learn the language but I couldn’t find any that were popular enough to have good tutorials around. Of course I didn’t know at the time that Hugo also does not have very good tutorials…
Hugo
Hugo was easy enough to download, but not being very familiar with html or css made getting something running very difficult. What I ended up doing was finding a good theme with the intention of slowly updating it until it becomes more personalized. I used Base16, but you can find a list of themes on the hugo site. From what I can tell for the most part themes are just a copy of the hugo directories. If you copy a file from a theme and save it in the corresponding directory in your project’s folder it will override what the theme does. So as you slowly edit files you can just move them from the theme folder to your own over time. From there, learning hugo for me was mostly about scanning through the files to see what I wanted changed and tweeking it until it worked the way I wanted it to.
WASM and MIME
The majority of my time today was spent trying to figure out how to get the rust WebAssembly application to run on the site. Using a tutorial I was able to build a WebAssembly game in rust. When you build a web application with cargo you can use two commands, cargo web start and cargo web deploy. After running cargo web start you can test your application by going to localhost:8000 in your web browser for debugging, whereas cargo web deploy builds .html, .js, and .wasm files for you to deploy to your site. For the longest time I could not for the life of me figure out why I was able to run the application just fine with cargo web start but cargo web deploy would give me an index.html file that just appeared blank when I opened it.
After scratching my head for a while, I found out about something called the Web Console. By pressing F12 to pull up the Web Console after attempting to open the application, I was able to see that I was receiving a MIME type error. This did not help and only made me far more confused for several hours.
Long story short, there is something called a Multipurpose Internet Mail Extension which (as far as I can tell) is like a flag that the webserver provides to the web browser when it serves different file types. .wasm files use a MIME type of application/wasm. I haven’t confirmed it, but my guess is that when I run cargo web start the local webserver is providing this MIME to my browser, however when I try to run it from the html file there is no MIME passed to the browser.
To resolve the error, I had to go to my host’s tools and dig around until I found a MIME type adding tool and added application/wasm to the custom types. Finally I have a program running in a web browser!