Prince Joal
Software Engineer
  • Name: Prince

  • Birthday: 28 February 1993

  • Job: Freelancer

  • Email: i@princejoal.com

  • Skype: 1081a1d198d8081c

static website using AWS S3.

The Simple Storage Service is an object-level storage solution provided by Amazon Web Services (AWS). This cloud service allows us to store any kind of file. It provides limitless storage and a single file upload limit of 5 TB. Many online applications now utilise an S3 bucket for static files as well as static hosting for single-page websites built using angular, react, and vue js among other javascript frameworks. it is fast and easy to manage create s3 bucket in AWS for static hosting. All of your application’s operations are contained inside a single HTML page in a Single Page Application (SPA). When users use your application’s features, the browser should present just the sections that are relevant to the user rather than loading a new page. This pattern may dramatically enhance the user experience of your application.

S3 buckets can be used to host a static website. In many circumstances, we do not need a dynamic website with continuously changing data. Assume you write technical articles on SQL Server. Users access the website and read the material, so it is a static website. Using Amazon’s serverless architecture, we may host a create s3 bucket in AWS for static hosting.

Let’s get started by setting up the static website using AWS S3

1: First you need to create a new bucket or select an existing bucket for static web hosting.

create s3 bucket

2:There are two options for naming your bucket: either the whole domain name of your bucket, like    princejoal.com (if you directly point your domain to s3), or any unique name (which you need to point s3    bucket from cloudfront).

3: After creating an open bucket, go to Permissions->Bucket Policy.

   -By default, AWS does not enable public access to s3 buckets. This behaviour must be modified for a static website. When you click Next, you will see the default behaviour – Block all public access.

   – Remove the check from the block all public access box. It also sends you a warning message, and you must recognise that you acted on purpose.

s3 bucket block public access

4: Edit bucket policy It launches the bucket policy editor. We may define the policy in JSON format. Replace the following JSON code with your bucket name.

s3 bucket bucket policy

{
    "Version": "2008-10-17",
    "Statement": [
        {
            "Sid": "AllowPublicRead",
            "Effect": "Allow",
            "Principal": {
                "AWS": "*"
            },
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::princejoal.com/*"
        }
    ]
}

5: Go to the object tab and upload your website files-> select all files, click action, cta, and mark as make public all objects.

upload website files s3

6: Go to properties tab-> scroll down to edit static web hosting -> click on enable

Specify the home or default page of the website. like index.html or home.html, whatever the entry point of your website’s main index.
s3 properties tab
s3 static hosting edit
s3 hosting index file set
7 It will provide you with a website URL, which you should copy and paste into your browser’s URL if everything is operating properly.
copy s3 hosting url

create s3 bucket in AWS for static hosting with cloudfront

8 Another way is cloudfront, where you need to create a distribution.
9 First you need to copy the s3 static hosting url and go to point no 7 . paste it into the origin domain field. (note: if you select direct s3 bucket, it will function as  you are using cloudfront with s3 as an asset, and for static hosting, you must paste the address without the https://.)
10.You should enter your domain name in the alternate domain name field. (Note: You must have an SSL certificate to use a custom domain. which is generated by the certificate manager. Only after that will you be able to create a static hosting distribution. ) Please check ref. screenshort below
cloudfront distribution for s3 static hosting
11.After generating the distribution, you must point your domain to cloudfront. You open route 53 on the AWS console. After that, open the domain to which you want to point with cloudfront. .Make an A record and give it an alias. select alias to cloudfront distribution in selectize.

Route 53 Console cloudfront alias

Route 53 alias cloudfront set

Conclusion

In this post, we went through the process of configuring a static website by using the Amazon Web Services S3 bucket, either with or without cloudfront. When we launched the static website, we also made use of a custom domain. Users will be able to view the website when you have created the website’s pages and uploaded them into an S3 bucket. You won’t need to worry about maintaining any backend servers at all. It is a serverless design, and Amazon Web Services will automatically handle it for you.

for more info please follow this tutorial aws

I believe this post covered how to use an Amazon S3 bucket for static hosting.
Please leave a comment if you have any questions or if you’d like a new tutorial.

I hope you find the above information useful.


5 1 vote
Article Rating
Subscribe
Notify of
guest

2 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Shelly

Very well explained!

Priyanka

Such a great piece of content!

2
0
Would love your thoughts, please comment.x
()
x