How to Host your HTML5 Export for Free on GitHub Pages

0

Stats

273 visits, 349 views

Tools

Translations

This tutorial hasn't been translated.

License

This tutorial is licensed under CC BY 4.0. Please refer to the license text if you wish to reuse, share or remix the content contained within this tutorial.

Published on 6 Jul, 2024.

After everyone exports there game as html for the first time, their first action will always be the same.

Double Click the index.html file

However, you may have noticed that this doesn't work:

Web exports won't work until you upload them. (When running on the file: protocol, browsers block many features from working for security reasons.)

And, most of the static HTML file hosting websites only have it up for a limited amount of time, and require you to pay, but fortunately, we have GitHub Pages to solve your problem.

Step 1 - Export your Game as HTML5

This is the easiest step to do, and some may say I don't have to include it, but I will.

Click Menu, (in the top left corner, while open in your project) then select Project —> Export —> HTML5 and click through a lot of stuff, you don’t need to mess with it, the default settings work just fine. Wait for it to generate your ZIP file, then select Download [Project Name].zip

After you download it, go ahead and extract it.

Step 2 - Create a GitHub Account

If you already have a GitHub account, just log in and skip this step.

Head on over to https://github.com/signup and follow the instructions. Note that the URL for your HTML export will be username.github.io/projectname so choose a username that you would like to have in the url.

Step 3 - Create a New Repository

This is the easy step. Go to https://github.com/new and choose a name. This will be the second part of the url - username.github.io/project name Make sure you have Public selected, then go ahead and hit create repository.

Step 4 - Upload Files

Now, we’re getting somewhere. Next, select Upload File, and upload all of the files from your export, by either dragging them into the box, or manually selecting all of them.

Make Sure the index.html is not in any folders. It needs to be in the root directory, or the first directory.

After you do that, click Commit, then click commit again.

Final Step, 5 - Convert to GitHub Pages

Last but certainly not least, click on settings, and locate the “Pages” menu. Then, look for the “Branch” subheading. Click the dropdown that says “None”, then select main. Then, click save.

You’re Done!

Now, just wait less then 5 minutes (depending on your internet connection) then go to https://[your_github_username].github.io/[repository name] and you will be at your game, now hosted forever, until you take it down yourself.

You can check out my example of my hosting of Planet Clicker at https://dk865.github.io/planetclicker and if you want to see what your repository should look like, check out https://github.com/dk865/planetclicker

Make sure to leave a comment with any questions!

  • 0 Comments

Want to leave a comment? Login or Register an account!