Hospedando uma Página HTML no S3

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!

Nota

Estaremos hospedando uma página da web que você pode criar fazendo o curso Bootstrap: Construa Sites Estilosos. Este curso cobre o uso de vários estilos com Bootstrap, e ao final, você terá seu próprio site de portfólio, que usaremos neste capítulo!

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

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

Nota

Observe que mesmo neste código, tecnologias de nuvem são usadas para importar o Bootstrap, bem como para a imagem, que serve como nosso avatar no portfólio.

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.

Há outra maneira de hospedar uma página web no S3, e este método será mais especializado para páginas web. Vamos ver como fazer isso.

Primeiro, precisamos criar um novo bucket e carregar o arquivo HTML que será a página principal do nosso site estático.

Nota

É uma boa prática criar uma pasta separada e carregar estilos CSS, scripts JavaScript, vários meios de comunicação e outros materiais relacionados ao seu site estático lá.

Para fazer isso, vamos criar um novo bucket e carregar o arquivo HTML com o portfólio:

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.