[1048] Hosting a static website using Amazon S3

To host a static website on an Amazon S3 bucket, follow these steps:

Step-by-Step Guide

Create an S3 Bucket:
- Open the Amazon S3 console.
- Click on “Create bucket”.
- Enter a unique bucket name and choose a region.
- Click “Create bucket”.
Upload Your Website Files:
- Select your newly created bucket.
- Click on “Upload” and add your website files (e.g., index.html, error.html).
Enable Static Website Hosting:
- Go to the “Properties” tab of your bucket.
- Scroll down to “Static website hosting” and click “Edit”.
- Select “Use this bucket to host a website”.
- Specify the index document (e.g., index.html) and error document (e.g., error.html).
- Click “Save changes”.
Set Bucket Policy for Public Access:
- Go to the “Permissions” tab.
- Scroll down to “Bucket policy” and click “Edit”.
- Add a policy to allow public read access:
```
 {
  "Version": "2012-10-17",
  "Statement": [
    {
      "Effect": "Allow",
      "Principal": "*",
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::your-bucket-name/*"
    }
  ]
}
```
- Replace your-bucket-name with the name of your bucket.
- Click “Save changes”.
Disable Block Public Access:
- In the “Permissions” tab, click “Edit” under “Block public access (bucket settings)”.
- Uncheck “Block all public access” and confirm the changes.
Access Your Website:
- Your website will be available at the endpoint URL provided in the “Static website hosting” section. It will look something like http://your-bucket-name.s3-website-region.amazonaws.com.

Example

If your bucket is named example-bucket and is in the us-east-1 region, your website URL will be:

 http://example-bucket.s3-website-us-east-1.amazonaws.com

For more detailed instructions, you can refer to the AWS documentation ¹ ².

Would you like help with anything else?

Here’s a simple example of an index.html file for your S3 bucket static website:

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Welcome to My Website</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            padding: 50px;
        }
        h1 {
            color: #333;
        }
        p {
            font-size: 18px;
        }
        a {
            color: #007BFF;
            text-decoration: none;
        }
        a:hover {
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <h1>Welcome to My Website</h1>
    <p>This is a simple static website hosted on Amazon S3.</p>
    <p><a href="https://www.example.com">Learn more</a></p>
</body>
</html>

Here’s a simple example of an error.html file that you can use for your S3 bucket static website hosting:

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Error</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            padding: 50px;
        }
        h1 {
            color: #ff0000;
        }
        p {
            font-size: 18px;
        }
    </style>
</head>
<body>
    <h1>Oops! Something went wrong.</h1>
    <p>The page you are looking for might have been removed, had its name changed, or is temporarily unavailable.</p>
    <p><a href="/">Go to Homepage</a></p>
</body>
</html>

This error.html file provides a user-friendly error message and a link to return to the homepage.

posted on 2024-08-27 13:36 McDelfino 阅读(4) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· [1050] Website endpoints in AWS

· [1017] Upload and download all folders into an Amazon S3 bucket

· Youtube Note: Learn S3 by project in 10 minutes by EX-AWS intern | for beginners | AWS | Cloud

· Amazon S3 概念及如何集成到 .net 8 C#

· 关于aws-s3-bucket-静态网站托管相关的查询-S3.Client.get_bucket_website(**kwargs)

阅读排行：
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· .NET10 - 预览版1新功能体验（一）

历史上的今天：
2016-08-27 【223】◀▶ IDL HDF 文件操作说明

alex_bn_lee

导航

公告

统计

搜索

常用链接

最新随笔

我的标签

积分与排名

随笔分类 (1762)

随笔档案 (1207)

相册 (9)

阅读排行榜

评论排行榜

推荐排行榜

最新评论

Step-by-Step Guide

Example

	{
	"Version": "2012-10-17",
	"Statement": [
	{
	"Effect": "Allow",
	"Principal": "*",
	"Action": "s3:GetObject",
	"Resource": "arn:aws:s3:::your-bucket-name/*"
	}
	]
	}

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Welcome to My Website</title>
	<style>
	body {
	font-family: Arial, sans-serif;
	text-align: center;
	padding: 50px;
	}
	h1 {
	color: #333;
	}
	p {
	font-size: 18px;
	}
	a {
	color: #007BFF;
	text-decoration: none;
	}
	a:hover {
	text-decoration: underline;
	}
	</style>
	</head>
	<body>
	<h1>Welcome to My Website</h1>
	<p>This is a simple static website hosted on Amazon S3.</p>
	<p><a href="https://www.example.com">Learn more</a></p>
	</body>
	</html>