AWS Builder Center

Builder Center

Pro Deploy Mode 🚀 - GitHub, Amplify, and Modern Development for Rift Rewind

Pro Deploy Mode 🚀 - GitHub, Amplify, and Modern Development for Rift Rewind

Level Up Your Deployment Game with Automated Workflows

Raghuraman, Ashwin

Sr. Solutions Architect, Games
Learn modern development workflow using GitHub for code storage and AWS Amplify for automated deployment. Build like the pros do.
Rift Rewind Developer Challenge - Day 5 🎮
Welcome to Day 5 of the Riot Games Rift Rewind Developer Challenge ! Yesterday you successfully deployed your project using CloudFront + S3. Today we'll learn the modern, professional way to build and deploy projects, starting with proper code storage and moving to automated deployment.
In about 45 minutes, you will store your code on GitHub, deploy using AWS Amplify (the recommended service for hosting static sites), and clean up your manual setup. We're learning tools that enable automatic deployments and better code management - because manual deployments are like manually last-hitting every minion when you could just use attack-move.
By the end of today, you will have a development setup that automatically deploys your project whenever you make changes. No more manual file uploads, no more waiting for cache invalidations - just push your code and watch it go live.

What You Will Accomplish Today

✅ Learn what Git and GitHub are and why they're essential for developers
✅ Store your project code on GitHub
✅ Deploy using AWS Amplify with automatic deployments
✅ Clean up your manual CloudFront + S3 setup (to save your Free Tier credits)

What You Will Need

Step 1: Understanding Git and GitHub 🤔

Before we jump into storing your code, let's understand what Git and GitHub are and why every serious developer uses them.

What is Git?

Git is a system that tracks changes to your files over time. Think of it like having a detailed match history for your code, but way more useful:
  • Version history: See every change you've ever made to your project
  • Backup: Your code is safely stored in multiple places
  • Collaboration: Multiple people can work on the same project without conflicts
  • Experimentation: Try new features without breaking your working code (like testing builds in practice tool)

What is GitHub?

GitHub is a website that stores your Git repositories (containing your projects) in the cloud. It's like Discord for developers, but for sharing and collaborating on code:
  • Cloud storage: Your code is backed up online and accessible anywhere
  • Portfolio: Others can see your projects and coding skills (like your match history, but impressive)
  • Collaboration: Share projects with others easily
  • Integration: Connects with deployment services like Amplify for automated workflows

Why This Matters for Your Project

Right now, your project files are only on your computer and in S3. While S3 + CloudFront works for serving files, it's not ideal for ongoing development.
While S3 can store multiple versions of files when versioning is enabled, it doesn't show you what actually changed between versions or provide meaningful descriptions of changes. Additionally, every time you want to update your project, you have to manually upload new files to S3, then either wait for CloudFront's cache to expire, or create a manual cache invalidation to force immediate updates.
Git solves these challenges by providing a complete history of every change you make. You can access your code from any computer and showcase your coding projects. Most importantly, when you connect GitHub to a deployment service like Amplify, your project updates automatically whenever you make changes: no more manual uploads or cache management. This is the professional workflow that developers use worldwide - it's like the difference between manually farming and having perfect CS automatically.

Step 2: Create Your GitHub Account and Repository 🐙

Create GitHub Account

Go to GitHub - Visit github.com 
Sign up - Click "Sign up" and create a free account
Choose username carefully - This becomes part of your professional developer identity (choose wisely, like picking your main champion)
Verify email - Check your email and verify your account

Create Your Repository

A repository (or "repo") is like a project folder where Git tracks all your files and their history. GitHub stores these repositories in the cloud.
Create new repository - Click the green "New" button or "+" in top right
Repository details:
  • Name: rift-rewind-project (or whatever fits your project)
  • Description: "My Rift Rewind challenge project built on AWS"
  • Visibility: Up to you! Amplify can deploy both public and private repos. (Recommendation: make it public if you want it visible for your portfolio)
  • Add README: ✅ Check this (creates a description file where you can document your project)
Create repository - Click "Create repository"
You'll know you're done when you see your new repository page with a README.md file.

Upload Your Project Files

Now let's add your project files to GitHub using the web interface (no command line wizardry needed!).
Add files - Click "Add file" → "Upload files"
Upload your files:
  • Drag and drop your index.html, styles.css, and any other project files
  • Or click "choose your files" and select them
  • Include your assets folder if you have one
Commit changes:
  • Commit message: "Add initial Rift Rewind project files"
  • Description: "Initial project submission for Riot Games Rift Rewind challenge"
  • Click "Commit changes"
You've just created your first commit: a snapshot of your project files at this moment. Git now tracks these files and any future changes - like having a save state you can always return to.

Step 3: Deploy with AWS Amplify + GitHub 🚀

Now let's deploy your project using Amplify, which automatically updates when you change your code.
AWS Amplify is essentially the same infrastructure you built manually (CloudFront + S3) but with automation and developer-friendly features added on top:
  • Same performance: Amplify uses CloudFront for global distribution, so your project loads just as fast
  • Same security: HTTPS, global CDN, and secure file serving (all automatic)
  • Better workflow: Connects directly to your GitHub repository for automatic deployments
  • Less complexity: No manual configuration of multiple services
Think of it as Amplify taking the manual CloudFront + S3 setup you learned and wrapping it in an easy-to-use service that handles all the configuration automatically. It's like having a support player who takes care of all the macro decisions so you can focus on the fun stuff.

Create Amplify App with GitHub

Now you'll connect your GitHub repository to Amplify so that every time you make changes to your code, your project automatically updates. This creates a deployment pipeline where GitHub stores your code and Amplify handles the hosting and global distribution.
Navigate to Amplify - In AWS Console, search for "Amplify" and click on it
Create new app - Click "Deploy an app"
Choose source code provider - Select "GitHub" and click "Next"
Authorize GitHub - Click "Authorize AWS Amplify" and sign in to GitHub if prompted
Update GitHub permissions - Click "Update GitHub permissions". You'll be redirected to GitHub to configure AWS Amplify on your GitHub account:
  • Choose "Only select repositories"
  • Select your rift-rewind-project repository
  • Click "Install & Authorize"
Select repository: (You might need to reload the page for the authorized GitHub repos to appear on Amplify)
  • Choose your rift-rewind-project repository from the list
  • Branch: main (default)
  • Click "Next"

Configure App Settings

App name - Enter rift-rewind-project
Build settings - Amplify auto-detects this is a static site, no need to change anything here, just click "Next"
Review and deploy - Click "Save and deploy"
Amplify will now automatically set up your entire infrastructure: it creates a CloudFront distribution for global delivery, processes your files (which happens instantly for static HTML sites), pushes everything to the worldwide CDN, and tests that the deployment works correctly. This whole process takes about 2-3 minutes - time for a quick bathroom break.

Verify Initial Deployment

Get your URL - Copy the Amplify domain (like https://main.ddrcpyox7wwsr.amplifyapp.com/)
Test your project - Your project should load with automatic HTTPS
You'll know you're done when your project loads from the Amplify URL and looks exactly like your CloudFront version.

Step 4: Test Automatic Deployments 🔄

Time to test the automatic deployment feature by making a small change to your code - this is where the magic happens.

Make a Change on GitHub

Edit a file - In your GitHub repository, click on index.html (or your main file)
Click edit - Click the pencil icon (✏️) to edit
Make a small change - Update some content, add a comment, or improve something minor
Commit change: (Use a message explaining the change you made)
  • Commit message: "Update project content"
  • Description: "Improved main page content and styling"
  • Click "Commit changes"

Watch Automatic Deployment

Go to the Amplify console - You'll see a new build started automatically (like magic!)
Watch progress - You'll see the build status update in the Amplify console as it processes your deployment
Wait for completion - Takes about 1-2 minutes
Test your project - Refresh your Amplify URL to see the changes
You just experienced how modern web development works: you made a change to your code on GitHub, and within minutes your live project is updated to reflect that change. No manual file uploads to manage, no cache invalidation to worry about - the entire process happened automatically. It's like having perfect farm while also getting kills - efficient and satisfying.

Step 5: Clean Up Your Manual Setup 🧹

Once your Amplify deployment is working perfectly, it's time to clean up the manual CloudFront + S3 setup to avoid confusion and potential costs. Only perform this step once your Amplify site is deployed and your content appears as expected.

Delete CloudFront Distribution

Go to CloudFront console - Search for "CloudFront" in AWS Console
Find your distribution - Look for the one you created on Day 4
Disable distribution:
  • Select your distribution
  • Click "Disable"
  • Wait for status to change to "Disabled" (5-10 minutes - grab some coffee)
Delete distribution:
  • Select the disabled distribution
  • Click "Delete"
  • Confirm deletion

Clean Up S3 Bucket (Optional)

You can keep your S3 bucket for learning other AWS services, or clean it up to save on storage costs (though it's minimal).
Go to S3 console - Search for "S3" in AWS Console
Empty bucket:
  • Select your bucket
  • Click "Empty"
  • Type "permanently delete" to confirm
Delete bucket:
  • Select the empty bucket
  • Click "Delete"
  • Type bucket name to confirm

Checklist ✅

Check the items below to make sure you have completed today's challenge:
  • Created GitHub account and repository
  • Uploaded project files to GitHub
  • Deployed project using Amplify + GitHub integration
  • Tested automatic deployment by making a code change
  • Cleaned up original CloudFront distribution

Next Steps 🚀

Congratulations! You now have a professional development setup that automatically deploys your changes and showcases your work. Here's what you've accomplished:
  • ✅ Professional code storage on GitHub with full version history
  • ✅ Automated deployment pipeline that updates your live project instantly
  • ✅ Global CDN performance without manual configuration
  • ✅ Portfolio-ready project that demonstrates modern development practices
Your Rift Rewind project is now deployed using industry-standard practices. Every change you make to your code will automatically appear on your live site within minutes - no manual work required.
Pro tip: Keep improving your project throughout the remaining challenge days. With this automated setup, you can iterate quickly and push updates confidently. Your GitHub repository also serves as a great portfolio piece to show potential employers or collaborators.
This is how professional developers work at companies like Riot Games - code changes flow automatically from development to production through automated pipelines. You're now using the same workflow as the pros!
GG on leveling up your deployment game! 🎮🚀
Remember: Professional development workflows aren't just about looking cool - they save time, reduce errors, and let you focus on building amazing projects instead of fighting with infrastructure.
# rift-rewind# rift-rewind-challenge-1# challenge# hackathon
Any opinions in this article are those of the individual author and may not reflect the opinions of AWS.
Enjoyed reading this content? Let the author know!

Your likes, comments, shares, and saves help creators reach more builders.

Loading recommendations

Loading article