ref: 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-namewith 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.
- Your website will be available at the endpoint URL provided in the “Static website hosting” section. It will look something like
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.comFor more detailed instructions, you can refer to the AWS documentation12.
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>This index.html file provides a basic structure with a welcoming message and a link.
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>error.html file provides a user-friendly error message and a link to return to the homepage.
标签：website,S3,1048,bucket,html,static,your
From： https://www.cnblogs.com/alex-bn-lee/p/18382531