Deploying Godot Engine Web Games to GitHub Pages with Continuous Integration

UPDATE: This post presents what I consider a slightly easier approach.

After figuring out how to use continuous integration with Flutter Web apps on GitHub Pages, I turned my attention to Godot Engine. Through my FamJam projects, I have developed a pair of scripts (build.sh and deploy.sh
) for building and deploying games to GitHub Pages. It seemed like a natural extension to see if I could do this automatically. This could be useful both for my Fam Jams and, of course, for my revised game programming course.

In addition to GitHub actions, the other two critical pieces to getting this to work are aBARICHELLO's Godot CI Docker image and, as used in my Flutter approach, peaceiris' GitHub Pages Action. Here is the simple version:

	# Workflow to publish Godot HTML5 games to GitHub Pages
	#
	# Make sure your project is configured for Web export
	# to the path `build/web`.
	name: 'Publish to GitHub Pages'
	env:
	GODOT_VERSION: 3.2.2 # Remember to manually set image to this version below.
	on:
	workflow_dispatch:
	push:
	branches:
	- master
	jobs:
	deploy:
	runs-on: ubuntu-18.04
	container:
	image: barichello/godot-ci:3.2.2
	steps:
	- name: Checkout
	uses: actions/checkout@v2
	- name: Move HTML5 templates into position
	run: |
	mkdir -v -p ~/.local/share/godot/templates
	mv /root/.local/share/godot/templates/${GODOT_VERSION}.stable ~/.local/share/godot/templates/${GODOT_VERSION}.stable
	- name: Create staging directory
	run: mkdir -v -p build/web
	- name: Build
	run: godot -v --export "HTML5" build/web/index.html
	- name: Deploy
	uses: peaceiris/actions-gh-pages@v3
	with:
	github_token: ${{ secrets.GITHUB_TOKEN }}
	publish_dir: ./build/web
	force_orphan: true
	user_name: 'github-ci[bot]'
	user_email: 'github-actions[bot]@users.noreply.github.com'
	commit_message: 'Publish to gh-pages'

view raw godot-ci.yml hosted with ❤ by GitHub

My custom build script usse NatrimCZ's approach of reducing project download size by zipping the project files and extracting them client-side, and it was surprisingly straightforward to incorporate that into an alternative GitHub workflow:

	# Workflow to publish Godot HTML5 games to GitHub Pages
	#
	# Make sure your project is configured for Web export
	# to the path `build/web`.
	name: 'Publish to GitHub Pages'
	env:
	GODOT_VERSION: 3.2.2 # Remember to manually set image to this version below.
	on:
	push:
	branches:
	- master
	jobs:
	deploy:
	runs-on: ubuntu-18.04
	container:
	image: barichello/godot-ci:3.2.2
	steps:
	- name: Checkout
	uses: actions/checkout@v2
	- name: Move HTML5 templates into position
	run: |
	mkdir -v -p ~/.local/share/godot/templates
	mv /root/.local/share/godot/templates/${GODOT_VERSION}.stable ~/.local/share/godot/templates/${GODOT_VERSION}.stable
	- name: Create staging directory
	run: mkdir -v -p build/web
	- name: Build
	run: godot -v --export "HTML5" build/web/index.html
	- name: Compress project
	run: |
	cd build/web
	wget https://raw.githubusercontent.com/nodeca/pako/master/dist/pako_inflate.min.js
	gzip -f index.wasm
	gzip -f index.pck
	FIND="<script type='text/javascript' src='index.js'></script>"
	REPLACE="<script type=\"text/javascript\" src=\"pako_inflate.min.js\"></script>$FIND"
	sed -i -e "s@$FIND@$REPLACE@" index.html
	FIND="function loadXHR(resolve, reject, file, tracker) {"
	REPLACE=$FIND" if (file.substr(-5) === '.wasm' || file.substr(-4) === '.pck') { file += '.gz'; var resolve_orig = resolve; resolve = function(xhr) { return resolve_orig(xhr.responseURL.substr(-3) === '.gz' ? { response: pako.inflate(xhr.response), responseType: xhr.responseType, responseURL: xhr.responseURL, status: xhr.status, statusText: xhr.statusText } : xhr); }; }"
	sed -i -e "s@$FIND@$REPLACE@" index.js
	- name: Deploy
	uses: peaceiris/actions-gh-pages@v3
	with:
	github_token: ${{ secrets.GITHUB_TOKEN }}
	publish_dir: ./build/web
	force_orphan: true
	user_name: 'github-ci[bot]'
	user_email: 'github-actions[bot]@users.noreply.github.com'
	commit_message: 'Publish to gh-pages'

view raw godot-ci.yml hosted with ❤ by GitHub

Either approach, just like with Flutter, requires you to have an authoritative push to gh-pages before using GITHUB_TOKEN for authentication will work; once again, you can do something like this to get that done:

git push origin master:gh-pages

Also, as mentioned in the comments, the script assumes that you have already configured the project with HTML5 export and that you have set the export location to build/web.