Alojando una página HTML en 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 alojando una página web que puedes crear tomando el curso Bootstrap: Build Stylish Websites. Este curso cubre el uso de varios estilos con Bootstrap, y al final, tendrás tu propio sitio web de portafolio, que utilizaremos en este 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

Ten en cuenta que incluso en este código, se utilizan tecnologías en la nube para importar Bootstrap así como para la imagen, que sirve como nuestro avatar en el portafolio.

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.

Hay otra manera de alojar una página web en S3, y este método será más especializado para páginas web. Veamos cómo hacerlo.

Primero, necesitamos crear un nuevo bucket y subir el archivo HTML que será la página principal de nuestro sitio web estático.

Nota

Es una buena práctica crear una carpeta separada y subir allí estilos CSS, scripts de JavaScript, varios medios y otros materiales relacionados con tu sitio web estático.

Para hacer esto, creemos un nuevo bucket y subamos el archivo HTML con el portafolio:

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.