Hosting a Unity WebGL game for free

Prerequisites

• A game developed in the Unity editor, which can be published as a WebGL game. Note that some shaders and other game elements are not WebGL compatible. I use Unity version 2020.2.0f1 but earlier versions should largely be similar and work similarly.
• Installing Git
• An account on the hosting website of your choice. In this guide i lay out how to host with respectively DigitalOcean, Netlify and Github Pages.
• A Github account for hosting the code that is to be deployed.

Preparing the Unity WebGL Game

First ensure that the Unity game can run in WebGL. You do this by clicking File -> Build Settings. Here you can set the platform to WebGL and click “Switch platform”. If you are unable to select WebGL you must first install the WebGL module via the Unity Hub for your version of Unity.

In my case I have also chosen to enable decompression fallback and set the compression type to “Gzip” instead of “Brotli”. Both of these settings can be found under Edit -> Project Settings -> Player -> Selecting the WebGL tab -> Publishing settings. This ensures a broader browser compatability and that you don’t need to set up HTTP response headers for the decompression to happen correctly on the client side. I choose Gzip as it has faster build times than Brotli, the trade off is that it compresses less well.

Now go to File -> Build Settings again, ensure WebGL is selected as platform and hit “Build and run”. You will be prompted where to put the built files, I will simply create a folder called WebGL and use that. Unity then builds the project and afterwards starts it in a local browser session. You can then test if the game is running as it should.

After the build has finished you will see the following folder structure in your newly created WebGL folder. Please note that the game must be run using either the “Build and Run” button or as a local server. If you try to open it in your browser as a normal HTML file the HTML file will open but the game not load.

If the game runs as it should after clicking “Build And Run”, we are ready for deploying it to the hosting website of your choice. I will in the sections below advise how you can deploy to respectively Github Pages, DigitalOcean and Netlify. All 3 approaches are largely similar but with different providers. All 3 options are also free as we will be hosting it as a static website.

Uploading to Github

To deploy we must first upload the code to a Github repository, to do that please follow the steps below.

1. Ensure Git is installed.
2. Create a project repository on Github.com
3. Open up a console on your computer and go to the WebGL project folder we created earlier.
4. Use the console commands
* ‘git init’
* ‘git add .’
* ‘git commit -am “Initial commit of Unity WebGL game.”’
* ‘git remote add origin https://github.com/**YourUsernameOnGithub**//**YourRepositoryNameOnGithub**’
* ‘git push -u origin master’
5. Your Unity WebGL’s build folder will now be pushed to your Github repository and you should see the code appear there. With this step done we are ready to start the deployment.

Please now follow one of the below guides hosting the game.

Three ways of hosting from your Github account

In this section you can choose to host with either DigitalOcean, Github Pages or Netlify. All options are free for static websites such as this WebGL game.

DigitalOcean

1. Go to DigitalOcean.com and log in. If you don’t already have an account you can click this referral link to create one with 100$ free credits for 60 days. The hosting for the Unity WebGL project is free though. Credits will only be needed if you wish to host a database, a server or similar too.
2. Click either “Create” followed by “App” or “Apps” and then “Create”.
3. Click to link your Github account with your DigitalOcean account, you may also select which repositories DigitalOcean should be able to access. Please ensure that DigitalOcean can access the Github repository you have created.
4. After linking the accounts you will be sent back to DigitalOcean and be asked to select which Github repository to use. Select the Github repository you have created and click “Next”.
5. Select your closest server region and which branch to use. I will select “Amsterdam” and “Master”. Make sure “Autodeploy code changes” is enabled as this will ensure the code changes happening on Github are fetched automatically. Click “Next”.
6. Select “Static Website”, Click “Next”
7. Select the “Starter” plan, which is free for 3 static websites. Click “Launch Starter App”
8. Wait for the app to build and deploy. Then click “Live App”. You will now see your game hosted.

Github Pages

1. Go to Github.com, log in and access your Project Repository.
2. Go to “Settings”, scroll down till you see “Github Pages”
3. Set “Source” to “Master” or whichever branch you use. Click “Save”. The page will scroll up to the top automatically as it reloads.
4. Scroll down to “Github Pages” again, you will see the link that the WebGL game is published under. Click the link.
5. You will now see your WebGL game hosted on Github Pages.

Netlify

1. Go to Netlify.com and log in.
2. Click “New site from Git”.
3. Select “Github” and authorize Netlify to have access to your project repository. Afterwards you will be sent back to the Netlify page.
4. Select your Project Repository. Set branch to Master or whichever branch you use. Click “Deploy site”. You will then see a link to where your WebGL game is hosted. Click the link.
5. You now see your WebGL game hosted on Netlify.

Summary

In this tutorial we have built a Unity game to the WebGL platform. And we have deployed to host it on respectively DigitalOcean, Github Pages and Netlify. All 3 hosting options are free for static websites like our Unity WebGL game.