Skip to main content
200 Mates is a static website that can be deployed to any static hosting platform. The current production site runs on GitHub Pages.

​
Current Production Setup

Live site: https://paintingcreatures-a11y.github.io/200mates/ Repository: https://github.com/paintingcreatures-a11y/200mates Hosting: GitHub Pages
As a vanilla JavaScript application with no build step, deployment is as simple as uploading the files to a static hosting service.

​
GitHub Pages Deployment

The project is currently deployed using GitHub Pages. Here’s how it’s configured:

​
Automatic Deployment

1

Enable GitHub Pages

  1. Go to your repository on GitHub
  2. Navigate to Settings → Pages
  3. Under “Source”, select the branch to deploy (typically main or master)
  4. Select the root directory / (not /docs)
  5. Click Save
2

Wait for deployment

GitHub Actions will automatically build and deploy your site. You can monitor the progress in the Actions tab.The first deployment typically takes 1-2 minutes.
3

Access your site

Once deployed, your site will be available at:
https://<username>.github.io/<repository>/
For 200 Mates:
https://paintingcreatures-a11y.github.io/200mates/
4

Configure custom domain (optional)

If you have a custom domain:
  1. Add a CNAME file to the repository root with your domain: 
    200mates.com
  2. Configure your DNS provider to point to GitHub Pages
  3. Enable “Enforce HTTPS” in GitHub Pages settings

​
Manual Deployment

For manual updates: 
git add .
git commit -m "Deploy updates"
git push origin main
GitHub Pages will automatically redeploy when changes are pushed to the configured branch.
Since there’s no build process, every push to the main branch is instantly deployable. Just push and wait for GitHub Actions to complete.

​
Alternative Hosting Options

200 Mates can be deployed to any static hosting platform:

​
Netlify

1

Connect repository

  1. Create a Netlify account
  2. Click “Add new site” → “Import an existing project”
  3. Connect your GitHub repository
2

Configure build settings

Build settings:
  • Build command: (leave empty)
  • Publish directory: / or ./
  • No build step needed!
3

Deploy

Click “Deploy site”. Netlify will assign a random subdomain or you can configure a custom domain.
Netlify advantages:
  • Automatic HTTPS
  • Branch previews
  • Form handling (though not needed for this project)
  • Instant rollbacks

​
Vercel

1

Import project

  1. Create a Vercel account
  2. Click “Add New” → “Project”
  3. Import your GitHub repository
2

Configure

Framework Preset: OtherBuild settings:
  • Build Command: (leave empty)
  • Output Directory: ./
3

Deploy

Click “Deploy”. Vercel will build and deploy your site, providing a .vercel.app URL.

​
Cloudflare Pages

1. Log in to Cloudflare Dashboard
2. Go to Pages → Create a project
3. Connect your GitHub repository
4. Build settings:
   - Build command: (none)
   - Build output directory: /
5. Click Save and Deploy

​
Firebase Hosting

# Install Firebase CLI
npm install -g firebase-tools

# Login to Firebase
firebase login

# Initialize hosting
firebase init hosting
# Select public directory: . (current directory)
# Configure as single-page app: No
# Set up automatic builds: No

# Deploy
firebase deploy

​
AWS S3 + CloudFront

1

Create S3 bucket

aws s3 mb s3://200mates --region us-east-1
2

Enable static hosting

aws s3 website s3://200mates \
  --index-document index.html \
  --error-document index.html
3

Upload files

aws s3 sync . s3://200mates \
  --exclude ".git/*" \
  --exclude "README.md" \
  --acl public-read
4

Set up CloudFront (optional)

Configure a CloudFront distribution pointing to the S3 bucket for CDN benefits and HTTPS.

​
Deployment Checklist

Before deploying to production:
✅ Verify Supabase credentials in config/constants.js✅ Ensure production Supabase project has proper RLS policies✅ Test database connection from deployed environment
✅ Confirm all CDN resources load correctly (Bootstrap, Globe.gl, etc.)✅ Check that external font loads properly✅ Verify images compress appropriately (handle this in Supabase Storage settings)
✅ Test form submission from production URL✅ Verify GPS permission prompts work on HTTPS✅ Check language switching✅ Test gallery loading and lightbox✅ Confirm globe renders on various devices
✅ Check Lighthouse scores (should be high since it’s vanilla JS)✅ Test load time on slow connections✅ Verify auto-refresh (30-second polling) doesn’t cause issues
✅ Ensure HTTPS is enabled✅ Verify Supabase RLS policies are active✅ Check that file uploads respect size limits✅ Test content moderation flow

​
CI/CD Pipeline (Optional)

For automated deployments, create a GitHub Actions workflow:
.github/workflows/deploy.yml
name: Deploy to GitHub Pages

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      
      - name: Deploy to GitHub Pages
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./
          exclude_assets: '.git,README.md,.gitignore'
Since 200 Mates has no build step, the CI/CD pipeline is optional. GitHub Pages already auto-deploys on push.

​
Post-Deployment

​
Monitoring

Monitor your deployment with:
  • Google Analytics or Plausible for traffic
  • Sentry or LogRocket for error tracking
  • Supabase Dashboard for database activity and API usage
  • Browser Console for client-side errors

​
Maintenance

Regular maintenance tasks:
  1. Update dependencies - CDN links in index.html:11-15 
    <!-- Check for new versions periodically -->
<script src="https://unpkg.com/[email protected]/dist/globe.gl.min.js"></script>
  2. Monitor Supabase quotas - Free tier has limits on storage and API requests
  3. Review submissions - Check for inappropriate content via moderation panel
  4. Backup data - Export mate submissions periodically from Supabase

​
Rollback Procedure

If you need to rollback a deployment:

​
GitHub Pages

# Revert to previous commit
git revert HEAD
git push origin main

# Or reset to specific commit
git reset --hard <commit-hash>
git push --force origin main

​
Netlify/Vercel

Use the dashboard to rollback to a previous deployment with one click.

​
Domain Configuration

If using a custom domain:

​
DNS Records

For apex domain (200mates.com): 
A     @     185.199.108.153
A     @     185.199.109.153
A     @     185.199.110.153
A     @     185.199.111.153
For subdomain (www.200mates.com): 
CNAME www   <username>.github.io

​
HTTPS Certificate

GitHub Pages automatically provisions Let’s Encrypt certificates for custom domains. Enable “Enforce HTTPS” in repository settings after DNS propagates.
DNS propagation can take 24-48 hours. Don’t panic if your custom domain doesn’t work immediately after configuration.

​
Troubleshooting

Problem: Refreshing pages shows 404Solution: For GitHub Pages, this shouldn’t happen since 200 Mates is a single-page app. If it does, add a custom 404.html that redirects to index.html:
404.html
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="refresh" content="0; url=/200mates/">
</head>
</html>
Problem: Database requests return errorsSolution:
  • Check CORS settings in Supabase
  • Verify URL and anon key in config/constants.js
  • Check browser console for specific error messages
Problem: CDN resources fail to loadSolution:
  • Check CDN URLs are correct and using HTTPS
  • Verify no Content Security Policy is blocking external resources
  • Test CDN availability from your region
Problem: Geolocation permission deniedSolution:
  • Ensure site is served over HTTPS (required for geolocation API)
  • Check browser console for permission errors
  • Verify GPS code in modules/gps.js handles errors gracefully

Back to Development Docs

Return to the development setup guide.

Build docs developers (and LLMs) love

Get started for freeTalk to us