In this quick start guide, we'll walk through the steps to set up and host a static website on AWS, allowing you to showcase your content or project to the world without breaking the bank. Whether you're a developer, blogger, or just someone looking to establish an online presence, AWS provides an accessible and efficient way to deploy and manage static websites with ease. Let's dive into the process and get your website up and running on the AWS cloud.
Walkthrough...
- Get you a free website template quickly.
- Create S3 bucket
- Add bucket policy
- And your website is hosted, tadaa!
Get you a free website template quickly.
If you have the source code for your website ready, then well, kudos to you!, but you came here in a hurry just to get your portfolio website out there, well, here I am to save you.
Go to HTML5 Up
Pick a template..
Hit download, and the source code will get downloaded.
Browse to the folder, and open it with vs code
Edit the index.html page, add your relevant info like name, designation, that you wish to add like shown below.
Save it.
Make sure, you don't change the folder structure of the source code, if you have no idea about how all HTML, CSS, and JS are working.
Create S3 bucket
Login to your AWS account and navigate to the S3 dashboard.
Click on 'Create Bucket'
Give a unique name to your bucket.
You need to change the 'Block Public Access' setting for the bucket.
'Uncheck the Block all public access' checkbox
and check the 'I acknowledge.....' box, as shown in the snip below.
Hit Create Bucket.
Change bucket policy
Let's add a bucket policy to our bucket, that will allow to read the objects within our AWS bucket.
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "PublicReadGetObject",
"Effect": "Allow",
"Principal": "*",
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::bucket-name/*"
}]
}
Copy the code and paste it in the 'Bucket Policy' section, under the Permissions tab, by clicking on Edit. Now, replace the 'bucket-name' with your bucket name.
Add source code to the bucket
Go back to the 'Objects' section. Click Upload.
Now, we will be uploading the files and folders that are present in our source code for our website.
First, we will upload the files. Click on Add files.
Select the files that are present in the source code folder.
After selecting the files, click Upload.
All the files will appear in front of you as Objects.
Now let us upload folders that are present in our source code folder in a similar fashion as done above.
Now the bucket will look something like this...
Get the URL for your bucket
Go to the 'Properties' section, scroll down to 'Static Website Hosting'
Copy the link, and open it in the new browser, wohoooo! your website is now hosted! For FREE!
And it's done!
Thank you for reading!!
Give a like, and share it with your folks!
Top comments (0)