How to Deploy a Static Site on AWS With S3 and CloudFront

You can deploy a static website on AWS in under 15 minutes by uploading your files to an S3 bucket and connecting it to a CloudFront distribution. This setup provides global high-speed delivery and costs less than $1.00 per month for low-traffic sites. By using this method, you ensure your site stays online even during traffic spikes while benefiting from free SSL (Secure Sockets Layer - a technology that keeps internet connections secure) certificates.

Why use S3 and CloudFront for your website?

Amazon S3 (Simple Storage Service - an online folder for storing files) is incredibly reliable for hosting static files like HTML, CSS, and images. It is much cheaper than running a traditional server because you only pay for the storage you actually use. However, S3 by itself is not optimized for speed across different countries.

CloudFront (a Content Delivery Network or CDN - a system of distributed servers that deliver web content based on the user's location) solves this speed issue. It copies your website files to hundreds of "edge locations" (small data centers located all over the world). When someone visits your site, CloudFront serves the files from the location closest to them, making your site load almost instantly.

We've found that this combination is the most professional way to host a portfolio or small business site without managing complex servers. It allows you to focus on your code rather than worrying about server maintenance or security patches.

What do you need to get started?

Before you begin the setup, make sure you have a few things ready. Don't worry if you haven't used AWS before; the console is designed to guide you through these steps.

An AWS Account (You can sign up for the Free Tier at aws.amazon.com).
Your website files (at least an index.html file).
A code editor like VS Code or even a simple text editor.
Basic knowledge of how to navigate a web browser.

How do you create and configure your S3 bucket?

The first step is to create a storage space for your website files. In AWS terminology, these storage spaces are called "buckets."

Step 1: Create the bucket Log into your AWS Console and search for "S3" in the top search bar. Click the orange "Create bucket" button. Give your bucket a unique name, such as my-awesome-site-2026, and choose a region (a physical geographic location where AWS has data centers) close to you.

Step 2: Disable public access Scroll down to the "Block Public Access" settings. You should leave these boxes checked (blocked) because we will use a more secure method to show your files to the world via CloudFront. This prevents hackers from directly accessing or changing your bucket settings.

Step 3: Upload your files Click on your new bucket name and then click the "Upload" button. Drag your index.html, styles.css, and any image folders into the box. Click the orange "Upload" button at the bottom and wait for the "Succeeded" message.

How do you configure CloudFront for delivery?

Now that your files are in S3, you need CloudFront to act as the "delivery driver" for those files. This step ensures your site is fast and secure.

Search for "CloudFront" in the AWS search bar and click "Create distribution." In the "Origin domain" box, click and select the S3 bucket you just created. For "Origin access," select "Origin access control settings (recommended)" and click "Create new OAC" to let CloudFront talk to your private S3 bucket.

Scroll down to the "Default cache behavior" section. Under "Viewer protocol policy," select "Redirect HTTP to HTTPS" to ensure all visitors use a secure connection. This is a best practice that helps your site rank better on search engines and protects user data.

Finally, in the "Default root object" box, type index.html. This tells CloudFront which file to show when someone visits your main URL. Click "Create distribution" and wait a few minutes for the status to change from "Deploying" to "Enabled."

How do you give CloudFront permission to see S3?

Since we blocked public access to your S3 bucket earlier, your website will show an "Access Denied" error until you give CloudFront permission. AWS makes this easy by providing a "Policy" (a document that defines who can access what).

Step 1: Copy the Policy Inside your CloudFront distribution settings, look for a yellow banner that says "The S3 bucket policy needs to be updated." Click the button that says "Copy policy." This copies a piece of JSON (JavaScript Object Notation - a standard format for sharing data) code to your clipboard.

Step 2: Paste the Policy in S3 Go back to your S3 bucket, click the "Permissions" tab, and scroll down to "Bucket policy." Click "Edit," paste the code you just copied into the box, and click "Save changes."

Step 3: Verify the connection What you should see is a block of code that mentions "Allow" and "cloudfront.amazonaws.com." This confirms that only CloudFront is allowed to read the files in your bucket. It's normal to feel a bit nervous about code blocks, but as long as you copied the exact text from the CloudFront banner, it will work perfectly.

How do you test your new website?

Testing is the most exciting part because you get to see your work live on the internet. You will use the unique URL provided by AWS to check your progress.

Go back to the CloudFront console and click on your distribution. Look for the "Distribution domain name" field, which will look something like d12345678.cloudfront.net. Copy this address and paste it into a new browser tab.

If your site appears, congratulations! If you see an error, wait another 60 seconds, as it can take a moment for the permissions to propagate (spread through the system). You can now share this link with anyone in the world to show off your new static site.

Common Gotchas and Troubleshooting

Sometimes things don't go perfectly on the first try, and that is completely okay. Most errors in AWS are related to small configuration details.

403 Forbidden Error: This usually means your S3 Bucket Policy wasn't saved correctly. Double-check that you pasted the policy from CloudFront into the S3 Permissions tab.
404 Not Found Error: Make sure you typed index.html exactly in the "Default root object" field of your CloudFront distribution. If you named your file Index.html (with a capital I), it might not match.
Changes not appearing: CloudFront remembers your old files for a while to stay fast. If you upload a new version of your site, you may need to create an "Invalidation" (a command to clear the cache) in the CloudFront settings to show the new version immediately.

Next Steps

Now that your site is live, you can explore more advanced features to make it even better. You might want to connect a custom domain name (like www.yourname.com) using Route 53 (AWS's domain name system service). You could also look into setting up a CI/CD (Continuous Integration and Continuous Deployment - a way to automatically update your site when you change your code) pipeline using GitHub Actions.

If you want to build more complex sites, try using a framework like Next.js 15 or React 19. These tools work great with S3 and CloudFront when exported as static sites. The more you practice, the more comfortable you will become with the AWS ecosystem.

For more guides, visit the official Aws documentation.