AWS Builder Center

Builder Center

Professional Deployment 🚀 - GitHub, Amplify, and Modern Web Development

Professional Deployment 🚀 - GitHub, Amplify, and Modern Web Development

Learn modern web development workflow using GitHub for code storage and deploy with AWS Amplify.

Ana Cunha

Developer Advocate @ AWS
Welcome to Day 5 of the AWS Builder Challenge #2  🚀! Yesterday you successfully deployed your website using CloudFront + S3. Today we'll learn the modern, professional way to build and deploy websites, 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 are learning tools that enable automatic deployments and better code management.
By the end of today, you will have a development setup that automatically deploys your website whenever you make changes.

What you will accomplish today

  • Learn what Git and GitHub are and why they are important
  • Store your website 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

  • Your AWS account from Day 1  💻
  • Your website files from Day 3  📁
  • About 45 minutes ⏰
  • GitHub  account 🐙

Step 1: Understanding Git and GitHub 🤔

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

What is Git?

Git  is a system that tracks changes to your files over time. Think of it like "Track Changes" in Microsoft Word, but much more powerful:
  • Version history: See every change you've ever made
  • Backup: Your code is safely stored in multiple places
  • Collaboration: Multiple people can work on the same project
  • Experimentation: Try new features without breaking your working code

What is GitHub?

GitHub  is a website that stores your Git repositories (containing your projects) in the cloud. It's like Google Drive, but specifically designed for code:
  • Cloud storage: Your code is backed up online
  • Portfolio: Others can see your projects and coding skills
  • Collaboration: Share projects with others easily
  • Integration: Connects with deployment services like Amplify

Why this matters for your website

Right now, your website 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 website, 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 website updates automatically whenever you make changes: no more manual uploads or cache management. This is the professional workflow that developers use worldwide.

Step 2: Create Your GitHub Account and Repository 🐙

Create GitHub account 

  1. Go to GitHub - Visit github.com 
  2. Sign up - Click "Sign up" and create a free account
  3. Choose username carefully - This becomes part of your professional identity (e.g., anacunha)
  4. Verify email - Check your email and verify your account

Create your repository 

A repository (or "repo") is like a project folder in which Git tracks all your files and their history. GitHub stores these repositories in the cloud.
  1. Create new repository - Click the green "New" button or "+" in top right
  2. Repository details:
    • Name: my-builder-challenge-website
    • Description: "My Builder Challenge website built on AWS"
    • Visibility: Up to you! Amplify will be able to deploy both your public or private repos. (My recommendation is to make it public if you want it to be visible for your portfolio)
    • Add README: ✅ Check this (creates a description file where you can add information about your project)
  3. 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 website files 

Now let's add your website files to GitHub using the web interface (no command line needed!).
  1. Add files - Click "Add file" → "Upload files"
  2. Upload your files:
    • Drag and drop your index.html, style.css, and profile photo
    • Or click "choose your files" and select them
  3. Commit changes:
    • Commit message: "Add initial website files"
    • Description: "Personal website with HTML, CSS, and profile photo"
    • Click "Commit changes"
You've created your first commit: a snapshot of your project files at this moment. Git now tracks these files and any future changes.

Step 3: Deploy with AWS Amplify + GitHub 🚀

Now let's deploy your website 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 site 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.

Create Amplify App with GitHub

Now you will connect your GitHub repository to Amplify so that every time you make changes to your code, your website automatically updates. This creates a deployment pipeline where GitHub stores your code and Amplify handles the website hosting and global distribution.
  1. Navigate to Amplify - In AWS Console, search for "Amplify" and click on it
  2. Create new app - Click "Deploy an app"
  3. Choose source code provider - Select "GitHub" and click "Next"
  4. Authorize GitHub - Click "Authorize AWS Amplify" and sign in to GitHub if prompted
  5. 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 my-builder-challenge-website repository
    • Click "Install & Authorize"
  6. Select repository: (You might have to reload the page on your browser for the authorized GitHub repos to appear on Amplify)
    • Choose your my-builder-challenge-website repository from the list
    • Branch: main (default)
    • Click "Next"

Configure app settings

  1. App name - Enter my-builder-challenge-website
  2. Build settings - Amplify auto-detects this is a static site, no need to change anything here, just click on "Next"
  3. 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.

Verify initial deployment

  1. Get your URL - Copy the Amplify domain (like https://main.ddrcpyox7wwsr.amplifyapp.com/ )
  2. Test website - Your site should load with automatic HTTPS
You'll know you're done when your website 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.

Make a change on GitHub

  1. Edit a file - In your GitHub repository, click on index.html
  2. Click edit - Click the pencil icon (✏️) to edit
  3. Make a small change - Update one of your fun facts or add a new emoji
  4. Commit change: (Use a message/description explaining the change you made)
    • Commit message: "Update fun fact"
    • Description: "Changed second fun fact to be more interesting"
    • Click "Commit changes"

Watch automatic deployment

  1. Go to the Amplify console - You'll see a new build started automatically
  2. Watch progress - You'll see the build status update in the Amplify console as it processes your deployment
  3. Wait for completion - Takes about 1-2 minutes
  4. Test your site - 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 website is updated to reflect that change. There were no manual file uploads to manage and no cache invalidation to worry about, the entire process happened automatically.

Step 5: Clean Up Your Manual Setup 🧹

Once your Amplify deployment is working, 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

  1. Go to CloudFront console - Search for "CloudFront" in AWS Console
  2. Find your distribution - Look for the one you created on Day 4
  3. Disable distribution:
    • Select your distribution
    • Click "Disable"
    • Wait for status to change to "Disabled" (5-10 minutes)
  4. 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 costs.
  1. Go to S3 console - Search for "S3" in AWS Console
  2. Empty bucket:
    • Select your bucket
    • Click "Empty"
    • Type "permanently delete" to confirm
  3. 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 website files to GitHub
  • [ ] Deployed website using Amplify + GitHub integration
  • [ ] Tested automatic deployment by making a code change
  • [ ] Cleaned up original CloudFront distribution
🎉 Congratulations! You now have a professional web development setup that automatically deploys your changes and showcases your work!
# cloud-launch-challenge-1
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