How to host a Static Website in AWS S3 - CodeBabel

Hello All! Welcome back to the third article in the AWS Series! As we already know, AWS S3 offers low cost, high performance, highly scalable, unlimited cloud storage with a pay-as-you-go approach. But, apart from being a storage option, it can also be used to host static web content. In this article, we will discuss how to host a static website in AWS S3.

Below is the overview of the steps for doing that:

Creating a bucket

Step1: First let’s create a bucket. For that, let’s first login to AWS console, and then select S3 under ‘Storage’ from the AWS ‘Console Home’.

select S3

select S3

Step2: Next, from the S3 console, let’s click on the ‘Create Bucket’ icon in the Amazon S3 console.

Creating New Bucket

Creating New Bucket

A pop up window appears wherein we enter the bucket details. Here, let’s consider the bucket name as ‘codebabel-static-website-demo and the region can be according to the requirement. Here we have chosen the default region ‘US EAST ohio’. Let’s leave everything to default settings by clicking on “Next” option. In the ‘review’ page, let’s review our configurations and click on ‘Create bucket’ to create the S3 bucket.

Create New S3 Bucket

Create New S3 Bucket

We can see the newly created S3 bucket in the AWS S3 console.

Bucket after creation

Created Bucket can be viewed in S3 Dashboard

Step3: For this demo, we have created a simple static website in HTML. It consists of an **index.html **file which has two web pages and an **error.html**file which throws an error message when something goes wrong. We also have some .css files for formatting. Now let’s upload these files in the AWS S3 demo bucket.

For this, let’s click on our S3 bucket and click on the “upload” option under the “overview” icon. We can either add or drag and drop the required files. We can also set permissions for each of the files while uploading by clicking the “Next” icon which we will discuss later in this article. For now, we will only upload the files by clicking “Upload“. Let’s upload all our files this way.

Upload Files

Upload Files

Enabling static website hosting

Step4: Let’s click on our S3 bucket, and go to Properties -> Static website hosting.

Enabling Static Website Hosting

Enabling Static Website Hosting

We can see the generated endpoint URL to access our static website, as soon as we select this option. Now below that, we will mention the following: “Index document = index.html, error document = error.html“.

#devops #aws #aws s3 #css #github #html #scm #website hosting

What is GEEK

Buddha Community

How to host a Static Website in AWS S3 - CodeBabel

How to host a Static Website in AWS S3 - CodeBabel

Hello All! Welcome back to the third article in the AWS Series! As we already know, AWS S3 offers low cost, high performance, highly scalable, unlimited cloud storage with a pay-as-you-go approach. But, apart from being a storage option, it can also be used to host static web content. In this article, we will discuss how to host a static website in AWS S3.

Below is the overview of the steps for doing that:

Creating a bucket

Step1: First let’s create a bucket. For that, let’s first login to AWS console, and then select S3 under ‘Storage’ from the AWS ‘Console Home’.

select S3

select S3

Step2: Next, from the S3 console, let’s click on the ‘Create Bucket’ icon in the Amazon S3 console.

Creating New Bucket

Creating New Bucket

A pop up window appears wherein we enter the bucket details. Here, let’s consider the bucket name as ‘codebabel-static-website-demo and the region can be according to the requirement. Here we have chosen the default region ‘US EAST ohio’. Let’s leave everything to default settings by clicking on “Next” option. In the ‘review’ page, let’s review our configurations and click on ‘Create bucket’ to create the S3 bucket.

Create New S3 Bucket

Create New S3 Bucket

We can see the newly created S3 bucket in the AWS S3 console.

Bucket after creation

Created Bucket can be viewed in S3 Dashboard

Step3: For this demo, we have created a simple static website in HTML. It consists of an **index.html **file which has two web pages and an **error.html**file which throws an error message when something goes wrong. We also have some .css files for formatting. Now let’s upload these files in the AWS S3 demo bucket.

For this, let’s click on our S3 bucket and click on the “upload” option under the “overview” icon. We can either add or drag and drop the required files. We can also set permissions for each of the files while uploading by clicking the “Next” icon which we will discuss later in this article. For now, we will only upload the files by clicking “Upload“. Let’s upload all our files this way.

Upload Files

Upload Files

Enabling static website hosting

Step4: Let’s click on our S3 bucket, and go to Properties -> Static website hosting.

Enabling Static Website Hosting

Enabling Static Website Hosting

We can see the generated endpoint URL to access our static website, as soon as we select this option. Now below that, we will mention the following: “Index document = index.html, error document = error.html“.

#devops #aws #aws s3 #css #github #html #scm #website hosting

Rory  West

Rory West

1623742620

How to Share your Notebooks as Static Websites with AWS S3

A walkthrough example of how you can share your reports as static websites with AWS S3

Data Scientists use to work with notebooks like Jupyter and RMarkdown. Through notebooks, they can easily share their analysis in HTML format. But what about when there is a need to share the notebooks publicly? In this case, the most convenient way is to configure an Amazon S3 bucket to function as a static website. In this tutorial, we will provide you a walkthrough example of how you can share your notebooks as a static website with AWS S3.

#static-websites #s3 #aws #notebook

Host a static website on S3 using AWS CDK

If you’ve built a website, whether for personal or commercial use, you probably researched web hosting options. Lots of companies provide this kind of services. In this post, we will build a very simple website, and host it on Amazon S3 (Amazon storage service), which can be used to host a static website (a site that contains static content and client-side scripts).

#aws-cdk #static-site #typescript #aws #infrastructure

Lindsey  Koepp

Lindsey Koepp

1603936365

The Benefits of Amazon S3 Explained Through a Comic

AWS S3 is one of the most fundamental services of AWS Cloud.

It’s basically your unlimited and safest cloud storage.

Read this comic style conversation between two guys and get to know why some of the biggest companies in the world are using Amazon S3 for their business and why you should use it too.

#aws-s3 #aws #cloud-computing #cloud-storage #data-storage #aws-services #aws-top-story #aws-certification

Seamus  Quitzon

Seamus Quitzon

1601341562

AWS Cost Allocation Tags and Cost Reduction

Bob had just arrived in the office for his first day of work as the newly hired chief technical officer when he was called into a conference room by the president, Martha, who immediately introduced him to the head of accounting, Amanda. They exchanged pleasantries, and then Martha got right down to business:

“Bob, we have several teams here developing software applications on Amazon and our bill is very high. We think it’s unnecessarily high, and we’d like you to look into it and bring it under control.”

Martha placed a screenshot of the Amazon Web Services (AWS) billing report on the table and pointed to it.

“This is a problem for us: We don’t know what we’re spending this money on, and we need to see more detail.”

Amanda chimed in, “Bob, look, we have financial dimensions that we use for reporting purposes, and I can provide you with some guidance regarding some information we’d really like to see such that the reports that are ultimately produced mirror these dimensions — if you can do this, it would really help us internally.”

“Bob, we can’t stress how important this is right now. These projects are becoming very expensive for our business,” Martha reiterated.

“How many projects do we have?” Bob inquired.

“We have four projects in total: two in the aviation division and two in the energy division. If it matters, the aviation division has 75 developers and the energy division has 25 developers,” the CEO responded.

Bob understood the problem and responded, “I’ll see what I can do and have some ideas. I might not be able to give you retrospective insight, but going forward, we should be able to get a better idea of what’s going on and start to bring the cost down.”

The meeting ended with Bob heading to find his desk. Cost allocation tags should help us, he thought to himself as he looked for someone who might know where his office is.

#aws #aws cloud #node js #cost optimization #aws cli #well architected framework #aws cost report #cost control #aws cost #aws tags