Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Select an option

  • Save frankyonnetti/3e105edd80d2962f5dc297638e763e33 to your computer and use it in GitHub Desktop.

Select an option

Save frankyonnetti/3e105edd80d2962f5dc297638e763e33 to your computer and use it in GitHub Desktop.
S3 - setting up new static site #aws #s3

Example: Setting up a Static Website Using a Custom Domain

Create Two Buckets

Add an index.html file to the example.com bucket.

<html xmlns="http://www.w3.org/1999/xhtml" >
  <head>
   <title>My Website Home Page</title>
  </head>
  <body>
    <h1>Welcome to my website</h1>
    <p>Now hosted on Amazon S3!</p>
  </body>
</html>

From the S3 Console for the example.com bucket.

  • Click on the “Properties” tab.
  • Edit “Static website hosting”.
  • Redirect request to example.com (leave protocol blank).
  • Click on “Permissions” tab and paste policy.
{
 "Version":"2012-10-17",
 "Statement":[{
        "Sid":"PublicReadGetObject",
       "Effect":"Allow",
          "Principal": "*",
     "Action":["s3:GetObject"],
     "Resource":["arn:aws:s3:::example.com/*"]
   }]
}

CloudFront

Create Distribution

  • Origin Settings
    • Origin Domain Name: example.website.net.s3.us-east-1.amazonaws.com
    • Origin Path: /s3docs
  • Default Cache Behavior Settings
    • Viewer Protocol Policy: Redirect HTTP to HTTPS
  • Distribution Settings
    • Alternate Domain Names (CNAMEs): example.website.net
    • SSL Certificate: Custom SSL Certificate
      • select: website.net (random numbers and letters)
    • Default Root Object: index.html

Route 53

  1. Go to Hosted zones.
  2. Create a new Hosted Zone
  3. Create a record set for www.example.com as an Alias for both example.com and www.example.com.

Create Recored Set fields:

  • Name: Record name (part before .website.net).
  • Type: A
  • Alias: Yes
  • Alias Target: [number].cloudfront.net.
  • Routing Policy: Simple
  • Evaluate Target Health: No

Cache control

Managing How Long Content Stays in a CloudFront Edge Cache

  1. Go into the bucket to see the list of files.
  2. In the list, choose the name of the file that you want to add a header to.
  3. Choose Properties, and then choose Metadata.
  4. Choose Add Metadata, and then in the Key menu, choose Cache-Control or Expires.
  5. In the Value field, type one of the following:
    • max-age=60 (number of seconds that you want objects to stay in a CloudFront edge cache}
  6. For an Expires field, type a date and time in HTML format.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment