Розміщення HTML-сторінки на 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!

Примітка

Ми будемо розміщувати веб-сторінку, яку ви можете створити, пройшовши курс Bootstrap: Створення стильних веб-сайтів. Цей курс охоплює використання різних стилів з Bootstrap, і в кінці ви матимете власний портфоліо-сайт, який ми використаємо в цьому розділі!

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

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

Примітка

Зверніть увагу, що навіть у цьому коді використовуються хмарні технології для імпорту Bootstrap, а також для зображення, яке служить нашим аватаром у портфоліо.

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.

Існує інший спосіб розміщення веб-сторінки на S3, і цей метод буде більш спеціалізованим для веб-сторінок. Давайте подивимося, як це зробити.

Спочатку нам потрібно створити новий bucket і завантажити HTML-файл, який буде головною сторінкою нашого статичного веб-сайту.

Примітка

Це хороша практика створити окрему папку і завантажити туди CSS стилі, JavaScript скрипти, різні медіа та інші матеріали пов'язані з вашим статичним веб-сайтом.

Для цього давайте створимо новий bucket і завантажимо HTML-файл з портфоліо:

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.