Handmade GitHub Pages

#javascript #handmade #vanilla

This is part 2 of the "handmade computational sandbox" class. In part 1 (https://dev.to/omar4ur/handmade-cellular-automata-1f3c) we learned how to run a piece of JS code in a single HTML file on your computer, and how to deploy it on CodePen to share.

Today we're going to use GitHub for free static hosting, instead of CodePen. CodePen is good for quick experiments, GitHub is good for long term hosting.

For example, if you run a local community and want to set up a web page for it, a simple HTML page + a GitHub repo is perfect because (1) it's 100% free (2) if one day you leave town, the source code is available so someone else can copy it and continue to host it. This is designed to be very "permacomputing" and in line with Derek Siver's tech independence.

Example of a local community website made this way (just a single HTML file): https://mplawley.github.io/tundra-tech-talks/

If you're sharing a research prototype, this is also the perfect way to do it (live demo + source code available + a space for people to ask questions on the GitHub repo)

We're going to take the HTML/JS cellular automata simulation we created in part 1 and host it on GitHub pages. If you don't have your file from part 1, you can use this one that implements the game of life rules:

https://gist.githubusercontent.com/OmarShehata/9215085ff48882d1756ddd5ce2e0b912/raw/6ec921b6abd3dfc9f52a9be45989334cb1bb3c15/game_of_life.html

1. Create a new GitHub repo

Login or create an account on https://github.com/
Click "+" button in the top right -> "New repository"
Give it a name, toggle the "Add README" button. Click "create repository"

2. Add your HTML file

Click the "+" button in the top right of the repo and "create new file"

Call it index.html, and paste in your HTML/JS code

"index.html" is a special name, web servers will default to serving this as the homepage if they find it in a directory.

Click "commit changes"

3. Tell GitHub to deploy this website

Go to "settings" in the top right

Then "pages" in the left side panel

Here you will find the default settings for GitHub Pages, "deploy from branch". Just select your main branch here:

For bigger projects, you will have the code be in one branch, and the "built" thing to deploy in a different branch. For now, the code we are writing is itself the final code that runs in the browser, so we don't need this build step ("GitHub Actions" can be configured to run these build steps for you)