From Code to Cloud: How to Deploy Your Static Website on AWS S3

Introduction

In today’s digital-first world, a website often serves as your front door to the internet, whether you’re a developer showcasing projects, a business reaching new customers, or an individual building a personal brand. Static websites, in particular, are simple, fast, and cost-effective to deploy. With the power of cloud services like Amazon S3, you can take your code from your local machine and launch it globally within minutes.

In this guide, we’ll walk through the step-by-step process of deploying a static website on AWS S3. By the end, you’ll have transformed your files into a live, secure, and highly available site hosted in the cloud, accessible to anyone, anywhere..

Objectives

This article aims to provide you with the knowledge and skills needed to deploy a static website on AWS S3. By the end of this guide, you'll be able to easily upload your website's code, set up AWS services, and make your site available to a global audience. Whether you're a beginner developer wanting to showcase your portfolio or a professional looking to refresh your skills, this step-by-step tutorial will help you navigate the cloud deployment process with ease and confidence.

Prerequisite

Before proceeding with the article, ensure that you have an AWS account set up and your website code ready in your preferred programming language. You also need to purchase a domain name, which you can obtain from Namecheap, or get a free one from Afraid DNS. If you haven't done this yet, please complete these steps before continuing.

Architecture

Steps

Step 1: Portfolio Source code

Getting Your Portfolio Ready for the Cloud

• We need to have our portfolio website source code ready on VSCode or any editor of your choice.

• After finalizing our source code, we need to upload and deploy our application on the AWS cloud.

Step 2: Upload to S3 Bucket

Setting Up and Configuring Your S3 Bucket

Before uploading our files to the AWS S3 bucket, we need to set up our environment to ensure our website is accessible.

• First, create a unique bucket.

• We won't block public access since we want the website to be publicly accessible. Instead, we'll set a policy that only allows the public to view the website content.

  

  

• After successfully creating our bucket, we'll click on it to set the permissions.

  

• We’ll navigate down to the bucket policy to set our policy.

• Click on the "Add new statement" button, search for "s3", and check the "GetObject" box.

  

  

  

• After that, we need to copy the Bucket ARN because we'll need it to create our resource.

  

• Click on the “Add” button to add the resource.

  

• Select "object" under the resource type, then paste the Bucket ARN we copied earlier into the Resource ARN field.

  

• Next, we need to edit the policy. In the "Resource" field, add "/" to allow access to all objects, and in the "Principal" field, add "" to allow access from all sources..

• Once we are done, we proceed to save our changes.

  

• Next, navigate to the “Properties” tab to enable static website hosting.

  

  

• Under “index document,” we need to enter our entry point on the website, which is our index.html file.

  

• Once we are done, we proceed to save our changes and go back to check the bucket URL.

  

• The bucket level URL link of the website is highlighted above. We can access our website from that link.

• Next, we need to upload our files to S3. We'll click the upload button to start uploading the files.

  

• After successfully uploading our files, we click on "Upload" to start the process.

  

  

  

• Our files have been successfully uploaded.

Step 3: Create AWS Hosted Zone

Linking Your Domain with AWS Hosted Zone

Before proceeding with this step, you should have already set up your domain name with Namecheap.

• Go to Namecheap to set up your domain name

• After completing that, we'll go to the domain list tab to find our domain name and click on it.

  

• Click on the manage button to view the details of our domain.

  

• We'll go to the Advanced DNS tab. Here, we can see the DNS templates. We'll return to this later.

  

• Next, create an AWS Hosted Zone.

To create an AWS Hosted Zone, we need to configure Route 53 on AWS. This will ensure that visitors to our website are directed to AWS servers rather than NameCheap's servers.

• We’ll search for “AWS Route 53 on the AWS console. Click on “Create hosted zones”.

  

• Click on "Get Started."

  

• We'll add our domain name from Namecheap. Click on the type we want, and then proceed to create it.

  

• After creating Route 53, we can see our name servers. We will copy each name server and paste it into Namecheap.

• We'll go back to Namecheap and, under the Domain tab for our domain name, we'll paste the nameservers from AWS into the nameservers field.

  

  

• We’ll click on the green check icon to save your changes.

Step 4: AWS Certificate Manager.

Requesting and Managing SSL Certificates

• We need to secure our website's data in transit, so we will request a certificate from AWS. To do this, we will use AWS Certificate Manager.

  

• We will request a certificate by clicking on the "Request a certificate" button and following the instructions.

  

  

  

  

• While we wait for our certificate to be approved, we need to create a CNAME record in Route 53.

• Click on the Create Records in Route 53 to automatically create the records for us.

  

  

• Once you hit Create records, you get a success message.

  

• Now we need to refresh our Route 53 page to check if the record has been created successfully.

  

• We may need to refresh the page to check if our certificate has been issued and verified.

  

Step 5: Content Delivery Network using AWS CloudFront

Distribute Your Content with AWS CloudFront.

• We’ll need to create a distribution for our website.

  

• On this page, you have the option to choose between the old version and the new version. For this website, I am selecting the old version.

  

• Choose your origin, which is your origin bucket. Click on the “Use website endpoint” option.

  

• Leave others at the default.

• Ensure you check Redirect HTTP to HTTPS.

  

• Under WAF, select the "Do not enable" option because enabling WAF will incur extra charges.

  

• We need to add our CNAME.

  

• Enter the name of your domain. Ensure there’s no space.

  

• After confirming our selection, we proceed by clicking on 'Create Distribution'.

  

• I initially received an error when creating the distribution because my account wasn't verified. If you encounter this error, take a screenshot and contact the support team to explain the issue.

  

  

• I finally received feedback, and my account was verified, which allowed me to create the distribution.

  

• We’ll wait for it to be deployed.

  

• While we wait for it to be deployed, we'll create an "A record" using the distribution domain name.

• Click on ‘Create record’.

  

• Click the alias button, then choose Alias to CloudFront distribution, and select the CloudFront distribution name.

  

  

• Once we finish creating, we'll refresh our distribution page to see if our website has been deployed.

  

• Our distribution has been deployed. Our website is now live, and you can visit it.

Conclusion

Deploying a static website on AWS S3 is a powerful way to make your content accessible to a global audience quickly and efficiently. By following the steps outlined in this guide, you have learned how to prepare your code, configure an S3 bucket, link your domain with AWS Hosted Zone, secure your site with AWS Certificate Manager, and enhance performance using AWS CloudFront. This process not only ensures that your website is live and secure but also optimizes it for speed and availability. Whether you're a beginner or a seasoned developer, leveraging AWS services for your static website deployment can significantly enhance your online presence.