Search for a command to run...
A product engineer focused on building things that scale 7+ years of experience in software engineering Specialized in EHR, EMR, HL7, FHIR APIs Focused on Java, Node, Typescript, and NestJS with an interest in DevOps technologies Specialized in third-party integrations including EHR Systems, EFAX, QuickBooks Online, and Xero
No comments yet. Be the first to comment.
4 Steps to configure CI/CD with GitHub Actions to deploy changes of the static website to AWS S3
Your work can wait, not your health.
Success is nothing but a consistent steps that you take each day
Long work without a timely break, breaks one's spirit and motivation to continue what they love. I have been the victim of one. Being in the tech industry for more than 5 years and having taken no breaks, things went upside down for me. I felt burnt ...
On this page
To follow this guide, you will be required to have:
AWS Account
Static Site Template or your custom HTML
To create a bucket in AWS S3, follow these steps:
Go to your AWS Console.
Search S3 and Select it from the search bar.
Click on Create bucket.
It will open up a new window where you will be required to fill up the bucket information.
Add bucket name. It should be the name of your website.
eg. buysoundbar
Skip all the settings to default and at the bottom, click on Create bucket to create your bucket.
Once the bucket is created, a pop-up message will be shown and you will be redirected to the bucket list page.
By default, Block public access is on for each new bucket. Bucket should be made public before hosting any static website on it.
Select your bucket from the list.
Select Permissions tab.
On the Block public access block, click on Edit to update the public access.
De-select the checkbox for public access.
Click on Save changes to save the settings.
Create index.html page and add the following content.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Buy Soundbar</title>
</head>
<body>
<h1>Welcome to Buy Soundbar</h1>
</body>
</html>
Select your bucket in AWS S3.
Click on Upload . In the next screen, select Add files to add file.
Select the file to upload. I have selected the index.html file from my device to upload it. Once the file is selected, click on Upload the button from the bottom of the page.
All the objects present in the bucket should be public for any static website. To make the objects public, we will be using the bucket policy.
Select your bucket.
Select Permissions the tab for the bucket.
Move to the Bucket policy block and click on Edit.
Paste the following policy in the editor.
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "PublicReadGetObject",
"Effect": "Allow",
"Principal": "*",
"Action": [
"s3:GetObject"
],
"Resource": [
"arn:aws:s3:::Bucket-Name/*"
]
}
]
}
Your editor should look like this:
Replace Bucket-Name with your bucket name. The final version should look like this:
Click on Save Changes to save the policy.
Select your bucket
Click on Properties tab. Move to the bottom of the Properties tab.
By default, static website hosting is disabled. Click on Edit.
Select Enable toggle for Static website hosting in the Edit page.
Add index.html in the Index document and click on Save changes.
Properties tab in the Static website hosting section. You will find the URL for your static site.
Congratulations 🎉. You have successfully hosted your static website using AWS S3.
Static website hosting with AWS S3 and CI/CD with Github Action.