Nerd For Tech
Published in

Nerd For Tech

Sweet, Sweet, Release…

Setting up Continuous Deployment to itch.io with GitHub Actions

In the last article, we looked at implementing our continuous integration pipeline using GitHub actions. Now we should have a project that builds for multiple platforms and uploads those builds to a place that we can download them from every time we build (to the master branch)! That’s awesome! Now, we want to work on the other half of our CI/CD pipeline, the continuous deployment or CD.

Continuous deployment takes the uploaded builds that we set up in our last few articles and allows them to be uploaded to places where they can be accessed by other people. In the case of a website this may be a web server that hosts your site and serves it to the public. For games this is likely to be one or more distribution channels like Steam, the android or iOS stores, console deployments, cloud servers or services like itch.io. If your game is HTML based or playable in the browser there are sites like simmer.io, itch.io or even GitHub pages that can host your game and make it available for players to access. Today we’ll cover deploying to itch.io from GitHub actions.

Set up our itch.io account

The first thing we will need is an account on itch.io.

Navigate to itch.io, and click the Register Button (if you already have an account Log in, navigate to the Projects tab of the Creator Dashboard and skip to the next section)

itch.io — Register button

Next, Fill out the username, password and email address fields. Make sure to check the box that says “I’m interested in distributing content on itch.io” and check the “I accept the terms of service” check box. Then, Click the Create account button. This will land you on the Projects tab of the Creator Dashboard screen.

itch.io — Registration Page

Set up our game page

The next thing we need to do is set up a page in our account for our game. We can host multiple games in our account and gamers can find all of our games in one place linked by our account name. This is great for showcasing and entire portfolio of work!

Click the “Create a new project” button

itch.io — New project button

On the “Create a new project” screen, Fill in the Title field with the name of our game. Take note that the screen will auto-populate the Project URL field for us based on our Title. Take note of the string that is generated for us! this will be the project name we will need when we set up our GitHub action a little later! Fill in a short description of our game. Under classification take the default of “Games”. Under Kind of Project keep the default selection of “Downloadable”, If we are planning on hosting a WebGL build of our game which is playable in the browser we will come back and change this to HTML in a future step. Under Release Status, select “In development” or “Prototype” depending on the state of your game. I tend to choose “In development” to start with.

itch.io — New project pt. 1

Under Pricing, choose the pricing scheme you plan to use for your game. I take the default of “$0 or donate” for my projects right now. Which gives players the option of helping me support and maintain the project as development continues but doesn’t require a payment. I also leave the default “Suggested Donation” of $2.00. We can skip the Uploads Section because we will be using itch.io’s API, called Butler, to upload our files directly from our build pipeline. Fill in the description field, this is technically optional but it does make up the majority of the content on your page when it publishes. Select the genre of your game

itch.io — New project pt. 2

Take the defaults for the Tags, App Store Links, and Custom noun sections. We can come back and modify these later if we need to. For Community I like to select “Comments” but choose what best fits how you want to interact with your player community. Under visibility select “Draft” we can change this later when we are ready to publish the game out to the world but for now we are the only ones that need to see the game while we set things up. Click the “Save & viewpage” Button.

itch.io — New project pt. 3

You’ll then be taken to your project page, and we’re ready to move to the next step.

Set up Butler Secret

We need a token to interact with the Butler API, much like we needed one to interact with the GitHub APIs. We’re going to generate a token for Butler and then, just like our GitHub token, we’re going to store it as a secret in our repository so that we can access it from our workflow file.

Click on the down arrow next to your account name in the upper right-hand side of the site. Click on settings.

itch.io — Settings

Click on API Keys (you might have to scroll down on the page to see it). Click the “Generate new API key” button.

Generate API Key button

At this point a new key is generated and added to the list of keys on screen. Click “View” to expand the key. We will need this key in the next step where we create our GitHub secret.

Generated API Key

Set up The GitHub Secret

Head back to our repository on GitHub, click Settings, click Secrets, click the “New Repository Secret” button.

Create Secret

Name our new secret “BUTLER_CREDENTIALS”. Paste in our API token from itch.io into the value box. Click the “Add Secret” button.

Set up the Workflow Job

Now that we finally have all the setup out of the way, we can make the changes to our workflow file. Open our main.yml in our local repository and change the top of our file to look like the following

Build Triggers

Adding the release node allows us to have sections of our file that only trigger when we create a release on GitHub. In our case we only want to publish our files out to itch.io when we create a formal release.

Next we want to Zip our build artifacts so that they can be uploaded to our various deployment channels like itch. Add the following block to our existing Build job

Zip File Step

Next, we want to upload the zip file to a GitHub release channel so that we can download it into a future job for publishing. Add the following block right after our zip file block from above.

Upload Step

Next we add the job that produces the release to itch.io. Note that this is a different job than our build job and should be indented to the same level as the build job. We need to create a release job for each platform (WebGL, Windows, macOS, etc.). Because each job is very similar, I will show just the WebGL release here but will include releases for the other platforms in the completed code sample at the end of the article.

Add the following Job to the end of our file. We want to note that there is a ‘needs’ clause and an ‘if’ clause in our job. The ‘needs’ clause ensures that our build job completes successfully before running our release job. The ‘if’ clause ensures that our release job only runs when we create a new published release of our repository.

Release Job

We now need to check the changes into our repository. Due to a current limitation on GitHub we need to merge the change to master before the change will be picked up in the Actions tab of our repository.

Now that our Action is in our repository we need to create a release. To do so load up the Code tab of our repository and click the “Releases” Link to the right side of the screen.

Releases

Once on the releases screen, click the “Draft new release” Button.

Draft a new release button

Then fill out the Tag Version, Release title, and Description fields. Lastly click the “Publish Release” button.

Drafting a new release

This will kick off our action again and it will perform all of our builds from our main.yml file and then it will run our publish to itch. This takes a while to complete. Once complete, we have one final step to make our game playable in the browser on itch.io. This step is only necessary if we’re making our WebGL build playable in the browser. All of our other platforms will show up as a downloadable file on our Games page.

Make our game playable in the browser

Now we head back over to itch.io, load up our game’s page and click on edit game near the top of the page.

itch.io — Edit Game

This will take us back into the page that we filled out for our game information when we first set up our games page. We need to scroll down to the option labeled “Kind of project” and change the selection to HTML.

itch.io — Kind of project

At this point we should also see our uploaded files under the “Uploads” section. We need to find out HTML labeled upload and check the “This file will be played in the Browser” option. Finally, click the save button in the upper right-hand corner of the page.

Make the game playable in the browser

The completed file

Adding additional platforms to our process is a matter of creating a new job for each platform and filling similar information to our WebGL build. Below is the complete Actions workflow file with additional platforms included.

The completed GitHub Action workflow file

Next Time!

Now we have automated publishes to itch.io! Next time we will look at how to publish a WebGL build to a GitHub pages site and make it playable in the browser. If you enjoyed this article, or want to come along with me as I progress on my journey, follow me at gamedevchris.medium.com.

--

--

--

NFT is an Educational Media House. Our mission is to bring the invaluable knowledge and experiences of experts from all over the world to the novice. To know more about us, visit https://www.nerdfortech.org/.

Recommended from Medium

SAP Tutorial: Serving Data from an On Premise System in a CAP Java Application (Part 3)

Scheduled Tasks: The Good Way (or: Why You Should Stop Using Crontab)

Business scalability with the best in software development

Business scalability with the best in software development

Cheerp 2.6 rc1: the C++ compiler for the Web

CS373 Fall 2021: Ian Winson

Medium, Lambda, and Me (or how I export Medium stories to my website)

Authenticate Google API’s

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Christopher West

Christopher West

Unity Game Developer, Software Engineer, Gamer, Musician, and Father. Christopher is a creative that enjoys a challenge and loves coding.

More from Medium

Indy Pro ’22: IWTV

How to Set Up a Simple Drop-Loot System in Unity

Platformer: Collectible & Status Bar

O of N Log N method