Considering that we've hosted various elements like scripts and styles in our public S3 bucket, you might have thought about hosting a full-fledged HTML page or a static website on the S3 bucket. In this chapter, you'll learn how to do this on a public S3 bucket, accessible via a link. Let's get started!

Note

We'll be hosting a web page that you can create by taking the Bootstrap: Build Stylish Websites course. This course covers the use of various styles with Bootstrap, and by the end, you'll have your own portfolio website, which we'll use in this chapter!

Hosting an HTML Page on AWS S3

To start, I suggest creating a separate folder in the bucket where we'll place all the resources related to this web page for easier management and development:

Now, as usual, we need to upload the HTML file to our public bucket.

The HTML file we'll be uploading looks like this:

Note

Note that even in this code, cloud technologies are used to import Bootstrap as well as for the image, which serves as our avatar in the portfolio.

Now let's upload it to the S3 bucket:

Now all we need to do is follow the link to this bucket, and we'll have our HTML page, which serves as our portfolio, right in front of us.

The most interesting thing is that this page is in the cloud, and we will always have access to it.

Static Web Page

There is another way to host a web page on S3, and this method will be more specialized for web pages. Let's see how to do it.

First, we need to create a new bucket and upload the HTML file that will be the main page of our static website.

Note

It's a good practice to create a separate folder and upload CSS styles, JavaScript scripts, various media, and other materials related to your static website there.

To do this, let's create a new bucket and upload the HTML file with the portfolio:

Next, we navigate to the Properties tab and scroll down to the bottom of the page. We are interested in the section called Static website hosting, as shown in the screenshot below:

We open this section and select 'Enable' in the Static website hosting row.

Next, we need to specify the index document, which, in our case, is portfolio.html. If you have an error handling page, you can also specify it. Then simply save the page.

Note

Note that in order for the page to be accessible to users and to you on the internet, you need to configure its accessibility just like we did with our previous bucket.

Next, we need to save the changes, and Amazon will provide us with a link to our static website, which you can see at the bottom:

Now, when you go to this link, you'll be able to see our HTML page hosted on AWS S3:

Note that this isn't the best way to host a website; there are dedicated services for that, such as Amazon EC2.

On S3, we can host small static websites, but it might not be sufficient for larger applications.

Doing this on S3 is quite straightforward, and now you know how to upload and store your media there.