Amazon Web Services (AWS) offers a massive range of services for every business, starting with essential elements, like computing, storage, and network security tools, through complex solutions like blockchain, machine learning, artificial intelligence, and robot development platforms, all the way through very specialized tool sets, like video production management systems, and orbital satellites you can rent by the minute.
This Article is divided into three sections: AWS Free tier Account and required services; S3 Bucket config and Upload; CloudFront deployment settings.
Today, we’ll be deploying a static website to AWS Cloud with:
- AWS Free-tier Account
- A code editor (I used VS Code to write the .html, .css, and .js documents). The services used in deploying this site are:
Amazon Simple Storage Service(s3): is a service that provides object-level storage. Amazon S3 stores data as objects in buckets. You can upload varying file types to Amazon S3, such as images, videos, text files, etc. On a free tier account, all objects in the s3 bucket have a 99.99 percentage probability that it remains intact after a yearly period.
Amazon CloudFront: This is a global content delivery network that delivers data, video, applications, and APIs to customers around the globe with low latency and high transfer speeds.
STEP 1: CREATE AN S3 BUCKET
The first step is to create an S3 bucket, configure the bucket for website hosting, and secure it using Identity and Access Management (IAM) policies. An IAM policy is a document that allows or denies permissions to AWS services and resources.
Navigate to the “AWS Management Console” page, type “S3” in the “Find Services” box, and then select “S3”. The Amazon S3 dashboard displays. Click “Create bucket ”.
Give the s3 bucket a unique name and select a region. In the Bucket settings for Block Public Access section, uncheck the “Block all public access”, to enable public access to the bucket objects via the S3 object URL.
Click “Next” and click “Create bucket”. Once the bucket is created, click on the bucket’s name to open the bucket to the contents.
STEP 2: UPLOAD FILES INTO THE S3 BUCKET
After creating the S3 bucket, the next thing is to upload your files. Once the bucket is open to its contents, click the “Upload” button.
Click the “Add files” and “Add folder” buttons, and upload the files and folder(s) content from your local computer to the S3 bucket. Here, the files may include .html, .css, .js and or other folders.
Kindly note, that you can upload files and folders to your s3 bucket via the AWS Command Line Interface(CLI), however, ensure, that you have created an IAM User and successfully configured it.
STEP 3: SECURE THE S3 BUCKET
Earlier in step 1, we made the s3 Bucket publicly accessible, now we must secure it. Now we’ll go to the Permissions tab, I can see the bucket allows public access for hosting, to secure it, I’ll create a Bucket policy.
The “Bucket Policy” section shows it is empty. Click on the Edit button. Enter the following bucket policy and replace “your website” with the name of your bucket and click “Save”.
You will see warnings about making your bucket public, but this step is required for static website hosting.
STEP 4: CONFIGURE S3 BUCKET
To configure your s3 Bucket, go to the Properties tab and then scroll down to edit the Static website hosting section. Click on the “Edit” button to see the Edit static website hosting screen. Now, enable the Static website hosting, and provide the default home page and error.
After successfully saving the settings, check the Static website hosting section again under the Properties tab. You must now be able to view the website endpoint as shown below:
STEP 5: AMAZON CLOUDFRONT
The last step is to distribute the website via CloudFront. Select “Services” from the top left corner and enter “cloud front” in the “Find a service by name or feature” text box and select “CloudFront”. From the CloudFront dashboard, click “Create Distribution”. For “Select a delivery method for your content”, click “Get Started”.
To create a distribution;
Origin domain — Do not select the bucket from the dropdown list, paste the hosting endpoint you got from configuring the s3 bucket above.
Enable Origin Shield — ‘No’
Compress Objects Automatically — ‘Yes’
Viewer protocol — ‘Redirect HTTP to HTTPS’
Restrict Viewer Access — ‘No’
Cache behavior, key and origin requests
Leave the defaults for the rest of the options, and click “Create Distribution”. It may take up to 10 minutes for the CloudFront Distribution to get created. Once the status of your distribution changes from “In Progress” to “Deployed”, copy the endpoint URL for your CloudFront distribution found in the “Domain Name” column.
In this article, the Domain Name is, but yours will be different.
Now, you just deployed your static website to the cloud, using the AWS free tier account. Congratulations!
Top comments (0)