All Articles

Host your HTML5 games on GitHub Pages

Thanks to GitHub you can use their Pages to host any website without backend directly from your repository. HTML5 games are not different – it’s just HTML, CSS and JavaScript. If your games get a lot of traffic and you don’t want to pay too much for hosting, plus you can share the code as open source, then it’s the ideal solution for you.

Captain Rogers on the front page of the Firefox Marketplace

Some time ago Captain Rogers was featured on the front page of the Firefox Marketplace. This gave the game a huge boost in views and installs. As Captain Rogers is a self hosted app, high interest inflicted huge rise of the transfer on my server. Having not-so-big limits on my hosting plan I knew I had two options – buy better server or move the source code of Captain Rogers somewhere else. As the game itself is open sourced on GitHub I decided I will use this to my advantage – this way the game was posted using GitHub Pages.

GH-Pages

You can use the official guide for Pages on GitHub to learn more about how to do it, or you can check this handy article at 24ways on how to get started with GitHub Pages – there’s no need to write it down here if it’s already perfectly explained.

Source code of Captain Rogers on GitHub

The short story is: change the name of your branch in the repository to gh-pages, voila!

Custom (sub)domains

If you set up GitHub Pages correctly your game will be available at this URL: username.github.io/repository. If you have your own domain for your website, you can set up subdomains for every single game and assign them to your repositories. Let’s take Captain Rogers as an example:

Our website URL is enclavegames.com, so we set up rogers.enclavegames.com subdomain for Captain Rogers and pointed it to the GitHub repository. The game is taken directly from this place using GitHub Pages. We have to prepare two things to have this working. First, you should add a file named CNAME (without any extension) and put there only one line of code: the subdomain you want to use (in our case rogers.enclavegames.com). Then you have to visit an admin panel where you have your domain and change the DNS settings: the record type is CNAME, the name is rogers.enclavegames.com and the content is enclavegames.github.io. The last one is the place where GitHub will manage your subdomain to point it to the right place. You have to point it to your own account on GitHub, so it’s username.github.io. For more information just head to this article at GitHub Help.

Captain Rogers in the Firefox Marketplace

That’s it – the source code of Captain Rogers is hosted on GitHub and served under our own subdomain, so if the game gets even more popular it won’t kill our server. If you install the game from the Firefox Marketplace it gets downloaded directly from GitHub.

All of Enclave Games‘ games are open sourced and stored on GitHub, so you can even check the status of the games in development that are yet to be published if you want, for example Monster Wants Candy or Hungry Fridge.