Tutorial 04

Publish Your Game on the Web

Getting your game from your laptop to a real URL that anyone in the world can visit. A custom domain, free hosting, and automatic deployment from GitHub โ€” the complete production setup for a solo indie developer.

Deployment Netlify GitHub Custom Domain ~25 min

1The Publishing Stack

Publishing a web game involves three services working together. Each one has a specific job, and choosing the right tool for each job keeps costs at zero and maintenance close to zero.

๐Ÿ™

GitHub

Your code repository and deployment trigger. Every git push to your main branch automatically starts a new deployment. Your code is backed up, versioned, and free to host on GitHub's free tier.

โฌก

Netlify

Free static site hosting connected to your GitHub repo. Runs npm run build on every push, deploys the output, and serves it on a global CDN. HTTPS included. Free tier covers any indie game comfortably.

๐Ÿ”—

Squarespace Domains

A clean domain registrar with a straightforward DNS interface. Typically $15-20/year for a .com. You buy the domain here and point its DNS to Netlify's servers.

Deployment Pipeline โ€” Code to Live URL
Your Machine git push origin main push GitHub code repository webhook Netlify npm run build deploys /dist ~30 seconds live yourgame.com HTTPS ยท CDN ยท global

2Setting Up Your Repository

Before you can deploy, your game needs to live in a GitHub repository. If you initialized with Vite, you already have a local Git repository. Connect it to GitHub in four commands.

bashterminal โ€” one-time setup
# Create a new repo on github.com first, then:
git remote add origin https://github.com/YOUR_USERNAME/your-game.git

# Stage all files and make initial commit
git add .
git commit -m "initial commit"

# Push to GitHub
git push -u origin main
๐Ÿ”’
Before You Push: .gitignore and Secrets

Your .gitignore should include node_modules/ and dist/. If your game uses environment variables (API keys), use a .env file locally and add it to .gitignore โ€” never push API keys to GitHub. Configure environment variables in the Netlify dashboard instead, where they are injected at build time.

3Deploying to Netlify

Step 1

Create a Free Netlify Account

Go to netlify.com and sign up with GitHub. This allows Netlify to access your repositories directly.

Step 2

Add a New Site

Click "Add new site" โ†’ "Import an existing project" โ†’ "Deploy with GitHub". Authorize Netlify to access your repositories, then select your game repo.

Step 3

Configure Build Settings

Netlify auto-detects Vite projects. Verify the settings: Build command: npm run build. Publish directory: dist. Click "Deploy site".

Step 4

Your Game Is Live

Within 30-60 seconds, Netlify generates a URL like thrilling-game-abc123.netlify.app. Open it โ€” your game is live on the internet. Every future git push triggers a new deployment automatically.

tomlnetlify.toml โ€” optional but recommended
[build]
  command         = "npm run build"
  publish         = "dist"

[build.environment]
  NODE_VERSION    = "20"

# Ensures all routes work with Vite's router
[[redirects]]
  from   = "/*"
  to     = "/index.html"
  status = 200

4Adding a Custom Domain

The auto-generated Netlify URL works fine for testing, but a custom domain is what gives your game a professional identity. It is also what you put on social media, in a press kit, and in your game's metadata.

The recommended workflow is to buy the domain from Squarespace Domains (formerly Google Domains) and configure the DNS records to point to Netlify.

Step 1 โ€” Squarespace

Purchase Your Domain

Go to domains.squarespace.com. Search for your game name. .com domains are typically $12-20/year. .io domains are popular for games (~$40/year). Pick what fits your brand and budget.

Step 2 โ€” Netlify

Add the Domain to Your Site

In your Netlify site dashboard, go to Domain Management โ†’ Add a domain. Enter your domain name. Netlify will show you the DNS records to configure.

Step 3 โ€” Squarespace DNS

Configure DNS Records

In Squarespace Domains, go to DNS Settings. Add the records Netlify provides: typically an A record for the root domain and a CNAME for www. DNS propagation takes up to 48 hours, but usually completes in under an hour.

Step 4 โ€” Automatic HTTPS

SSL Certificate (Automatic)

Once DNS propagates, Netlify automatically provisions a free Let's Encrypt SSL certificate. Your game is served over HTTPS. No configuration required.

textDNS records to add in Squarespace
# Add these in Squarespace DNS Settings:

Type    Host    Value                        TTL
โ”€โ”€โ”€โ”€    โ”€โ”€โ”€โ”€    โ”€โ”€โ”€โ”€โ”€                        โ”€โ”€โ”€
A       @       75.2.60.5                    1 hour
CNAME   www     your-site.netlify.app.       1 hour

# The A record points your root domain to Netlify's load balancer.
# The CNAME makes www.yourdomain.com work as well.
# Netlify provides the exact values in your domain settings.

5Structuring a Multi-Game Studio Site

Once you have more than one game, the question becomes how to structure your domain and hosting. There are two common patterns for indie studios:

Pattern A: Subdomains Per Game (Recommended)

Each game lives at its own subdomain: mygame.studiodomain.com. The studio homepage lives at studiodomain.com. Each game is a separate Netlify site, independently deployable. This is the cleanest approach for games that may eventually grow into their own presence.

textsubdomain structure
studiodomain.com               โ† studio homepage
game1.studiodomain.com         โ† game 1 (separate Netlify site)
game2.studiodomain.com         โ† game 2 (separate Netlify site)

# Add CNAME records in Squarespace for each subdomain:
# game1   โ†’   game1-netlify-site.netlify.app
# game2   โ†’   game2-netlify-site.netlify.app

Pattern B: Paths on the Studio Domain

All games live under the studio domain as paths: studiodomain.com/game1. Simpler DNS setup, but all games share the same Netlify deployment. Easier to start with, but more complex to separate later.

๐Ÿ’ก
Netlify Free Tier Limits

Netlify's free tier includes 100GB of bandwidth per month and 300 build minutes. For a typical indie microgame with a few hundred players, this is more than enough. If you start getting significant traffic, Netlify's Pro tier ($19/month) gives you unlimited bandwidth. You will almost certainly not need it for your first game.

6After Launch: The Minimal Studio Web Presence

Shipping is not the end โ€” it is the beginning of a different kind of work. Here is the minimal viable presence a solo indie developer needs after launch:

๐ŸŽฎ

Game Page

A clean page with your game embedded, a one-sentence description, and a Play button. Nothing more. Friction kills plays.

๐Ÿ 

Studio Homepage

Brief studio identity, list of games, contact link. Does not need to be elaborate. Professional and clear is enough.

๐Ÿ“ง

Contact

A single email address in visible text. You will be surprised how many collaboration and press requests come through a simple hello@ address.

๐Ÿ”’

HTTPS + Fast Load

Netlify handles both automatically. But verify your game loads in under 3 seconds on mobile. Slow = abandoned before the first frame.