Recently, I took part in the Atlanta Science Festival 2025 STEM edition. The STEMcomm VIP team organized a version of Scavenger Hunt, and I was part of the CyberQuest Team. I was responsible for the Scavenger Hunt game, which needed an online interactive site. I figure that GitHub Page is a good free platform to do this. However, GitHub Page has had quite a few updates in recent years and the guide sites have not updated accordingly. I spent quite some time trying to figure it out, and here I am wanting to share how I did it.
In the past week I published an article about how to beat the popular 2048 game. You can take a look if you are interested!
https://chargedmagazine.org/2025/04/how-to-become-an-expert-at-2048/
So, in this example, we are publishing a variant of 2048. Credit the codes to
https://www.geeksforgeeks.org/design-a-2048-game-in-javascript/
1. Install a code editor like Visual Studio Code. If you already have one then just use yours. Choose the best one for your Operating Systems (OS). I’m using Windows for this tutorial.
https://code.visualstudio.com/
2. Create a GitHub account and make a public repository. You can choose or use alternative platforms that are able to host an HTML site.
https://github.com/ddang37/ChargedMagazineGame2
3. Clone this repository onto your local computer. There are alternative ways to do it. I recommend using GitHub Desktop which makes things easier. Follow the corresponding guide below if you are new to GitHub.
https://docs.github.com/en/repositories/creating-and-managing-repositories/cloning-a-repository
If you use GitHub Desktop:
4. Open the local repository folder in your Code Editor.
Create a HTML, CSS, and JavaScript file. Let’s name them game.html, style.css, and dynamic.js. You can change the names and have additional files for more complicated games.
5. Write the codes into the files. HTML with elements, CSS with stylings, and JavaScript with animation and interaction.
For starters, you can search online for sample code and modify from there (make sure to credit the sources!). There are plenty of variants and implementations. You can also create your own!
You can also fork from the original popular 2048 code:
https://github.com/gabrielecirulli/2048
The codes we are using is a much simpler implementation, but still difficult:
https://www.geeksforgeeks.org/design-a-2048-game-in-javascript/
6. If your codes are not original from scratch, make sure your game.html file is referring to the correct style.css and dynamic.js.
7. Save the codes. Double click the HTML file from file explorer, it should open a chrome site of your HTML game.
8. When you are satisfied with the result, commit your changes to the online repository. You can do this multiple times, even after you publish the site.
https://github.com/git-guides/git-commit
If you use GitHub Desktop:
9. When you are ready to publish your code, go to your repository online. Go to Setting > Pages > Build and deployment > Branch, change None to main. An option for the folder will appear, just keep the default. Click Save.
10. After a few minutes the page will go live. It will show up at the top under GitHub Pages.
11. Click on the URL or Visit site. Add the extension of the HTML file name and the game will show up!
https://ddang37.github.io/ChargedMagazineGame2/game.html
For this 2048, the game do not autogenerate a tile of 2 or 4 upon making a move, but rather based on time. The random generated tiles can be 2, 4, 8, or higher based on the current tiles on the board. This make the game much harder to win.
Fun fact: If you left this game alone, except for sliding, the game could play by itself!!!
Note: The website might take up hours to update if you commit new changes after publication. If CSS stylings are not working like it did locally, double check if there’s any Chrome extension blocking it. If the website takes forever to update, try making the repository private and then public again. Refer to GitHub information sites if otherwise.
https://docs.github.com/en/pages/getting-started-with-github-pages/github-pages-limits
References:
- Cirulli, G. (2014). Gabrielecirulli/2048: The source code for 2048. GitHub. https://github.com/gabrielecirulli/2048
- Dang, D. (2025, April 12). How to become an expert at 2048!. Charged Magazine. https://chargedmagazine.org/2025/04/how-to-become-an-expert-at-2048/
- Dang, D. (2025, April 18). ddang37/ChargedMagazineGame2. GitHub. https://github.com/ddang37/ChargedMagazineGame2
- Geeks for Geeks. (2024, April 26). Design a 2048 game in JavaScript. GeeksforGeeks. https://www.geeksforgeeks.org/design-a-2048-game-in-javascript/
- Microsoft. (2021, November 3). Visual Studio Code – Code Editing. Redefined. Visual Studio Code. https://code.visualstudio.com/
- Microsoft. (n.d.-a). Cloning a repository. GitHub Docs. https://docs.github.com/en/repositories/creating-and-managing-repositories/cloning-a-repository
- Microsoft. (n.d.-b). Cloning a repository from github to github desktop. GitHub Docs. https://docs.github.com/en/desktop/adding-and-cloning-repositories/cloning-a-repository-from-github-to-github-desktop
- Microsoft. (n.d.-c). Committing and reviewing changes to your project in GitHub Desktop. GitHub Docs. https://docs.github.com/en/desktop/making-changes-in-a-branch/committing-and-reviewing-changes-to-your-project-in-github-desktop
- Microsoft. (n.d.-a). Git guides – git commit. GitHub. https://github.com/git-guides/git-commit
- Microsoft. (n.d.-b). GitHub · build and ship software on a single, Collaborative Platform. GitHub. https://github.com/
- Microsoft. (n.d.-d). GitHub Pages Limits. GitHub Docs. https://docs.github.com/en/pages/getting-started-with-github-pages/github-pages-limits
