This is a submission for the Alibaba Cloud Challenge: Build a Web Game.*

Table of Contents

• What I Built
• Live Demo link
• Alibaba Cloud Services Implementation
  • Create Secrets on GitHub
  • Create the Automatic Deploy Workflow
• Game Development Highlights
• Conclusion

What I Built

In this article, you will learn how to set up an automatic deployment workflow to publish static websites directly to Alibaba Cloud (OSS) using GitHub Actions — without needing to use the local command line with ossutil.

Prerequisites

• An Alibaba Cloud account
• An OSS bucket created and configured as a static website
• A project with a public/ folder containing your files (e.g., index.html, assets/, etc.)
• A GitHub repository

Live Demo Link

👉 Play now: https://arena-magnobot.jamesrmoro.me

☁️ Alibaba Cloud Services Implementation

I've broken this tutorial down into 2 quick and easy steps to help you deploy your static content using Alibaba Cloud OSS with GitHub Actions.

Step 1: Create Secrets on GitHub

In your GitHub repository:

1. Go to Settings > Secrets and variables > Actions
2. Click New repository secret and create one at a time the following secrets:

For each secret, do the following:

1. Go to Settings > Secrets and variables > Actions
2. Click "New repository secret"
3. Fill in the fields like this:

1st secret – OSS_ENDPOINT

• Name: OSS_ENDPOINT
• Secret: oss-eu-west-1.aliyuncs.com (or your bucket’s endpoint)
• Click "Add secret"

2nd secret – OSS_BUCKET

• Name: OSS_BUCKET
• Secret: your-bucket-name
• Click "Add secret"

3rd secret – OSS_KEY_ID

• Name: OSS_KEY_ID
• Secret: your Alibaba Cloud AccessKeyId
• Click "Add secret"

4th secret – OSS_KEY_SECRET

• Name: OSS_KEY_SECRET
• Secret: your Alibaba Cloud AccessKeySecret
• Click "Add secret"

After adding the four secrets, move on to the next step to create the automatic deploy workflow.

Step 2: Create the Automatic Deploy Workflow

Now that your secrets are ready, it's time to tell GitHub Actions what to do every time you push changes to your code.

1. Create the workflow file

Inside your project, create the following folder structure (if it doesn’t exist yet):

.github/workflows/

Inside this folder, create a file named:

deploy.yml

2. Paste the following content into deploy.yml

This script tells GitHub Actions to run a deployment process every time a push is made to the main branch.

name: Deploy to Alibaba OSS

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout code
        uses: actions/checkout@v3

      - name: Download and configure ossutil
        run: |
          curl -O https://gosspublic.alicdn.com/ossutil/1.7.16/ossutil64
          chmod +x ossutil64
          ./ossutil64 config \
            -e ${{ secrets.OSS_ENDPOINT }} \
            -i ${{ secrets.OSS_KEY_ID }} \
            -k ${{ secrets.OSS_KEY_SECRET }}

      - name: Upload to OSS
        run: |
          ./ossutil64 cp -r public/ oss://${{ secrets.OSS_BUCKET }}/ --force

What this workflow does

• Step 1: Checks out your latest code from the main branch.
• Step 2: Downloads ossutil, the CLI tool used to interact with Alibaba OSS.
• Step 3: Configures ossutil using your secrets (already set in Step 1).
• Step 4: Uploads all files from the public/ folder to your OSS bucket, replacing the previous content.

Once this file is added and committed, any push to the main branch will automatically trigger the deployment process.

The GitHub Actions workflow running the automatic deployment to Alibaba Cloud OSS.

🎮 Game Development Highlights

This is my second game submission for the same Alibaba Cloud challenge, and this time I decided to take a different approach. Instead of focusing solely on gameplay and retro aesthetics, I explored modern web technologies by implementing the game as a PWA (Progressive Web App).

In addition to enhancing the mobile experience with features like home screen installation and offline support, this was a strategic choice: in the future, the same game could be published on the Play Store using TWA (Trusted Web Activity), without the need to rewrite the code in another language.

You can check out my first game here on the Alibaba Cloud challenge page.

This project was developed to demonstrate the capabilities of web technologies in a lightweight, fully browser-based gaming environment. Key highlights of the implementation include:

1. ✨ Progressive Web App (PWA): Playable instantly from your browser with offline support and installable on mobile devices.
2. 🧱 Canvas-based gameplay: Developed entirely with CreateJS to deliver smooth 2D animations and real-time interactions.
3. 📲 Responsive controls: Designed for all devices — keyboard support for desktops and tap-based input for touchscreens.
4. 🔊 Dynamic audio: Background music and sound effects enhance immersion, with a simple toggle for sound control.
5. 📐 Orientation guidance: Automatically detects mobile landscape mode and prompts users to rotate their device for the best experience.
6. 🏆 Local high score tracking: Challenge yourself to improve, as your highest score is saved directly in the browser.
7. 🌍 Internationalization built-in: Language selection right at the start — currently supporting Portuguese, English, and Chinese.

Conclusion

Every time you push to the main branch, GitHub Actions will automatically handle deployment to Alibaba Cloud:

• Download and configure ossutil – the official CLI for interacting with Alibaba OSS
• Upload all files from the public/ folder to your designated bucket
• Deploy your static website live on Alibaba Cloud OSS – no manual steps required!

You can track the full process via the Actions tab in your GitHub repository.