Configuring a Static Website With S3 And CloudFront

1. In the AWS Management Console search bar, enter S3, and click the S3 result under Services:

2. To start creating a new Amazon S3 bucket, in the top-right, click Create bucket:

3. Under General configuration, enter the following:

• Bucket name: Enter Unique-Name
• Region: Ensure Region is selected

4. Make sure to select ACLs Enabled:

5. In the Block Public Access section, un-check the Block all public access check box:

6. To acknowledge that you want to make this bucket publicly accessible, check I acknowledge that the current settings might result in this bucket and the objects within becoming public:

7. To finish creating your Amazon S3 bucket, scroll to the bottom of the form and click Create bucket:

8. In the list, click the name of your bucket:

9. In the row of tabs under Bucket overview, click Properties:

10. Scroll to the bottom of the Properties page and in the Static website hosting section, on the right, click Edit:

11. In the Static website hosting field, select Enable:

12. Enter the following, leaving all other fields at their defaults:

• Index document: Enter index.html
• Error document: Enter error/index.html

13. To finish enabling static website hosting, scroll to the bottom, and click Save changes:

14. In the row of tabs, click Permissions:

15. Scroll down to the Bucket policy section, and on the right, click Edit.

The Edit bucket policy form will load

16. In the Policy editor, copy and paste the following and replace YOUR_BUCKET_NAME with the name of your S3 bucket:

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

17. To save your bucket policy, at the bottom of the page, click Save changes.

18. To download a zip file containing a basic website, click here.

19. Extract the zip to your local file system.

20. In the row of tabs, click Objects.

21. To begin uploading the website to your Amazon S3 bucket, scroll down and click Upload:

22. In the Files and folders section, click Add files:

23. Using the file picker, select all files and folders from inside the zip file you downloaded and extracted earlier.

24. Scroll to the bottom of the page and click Upload.

25. To exit the Upload form, on the right, click Close.

26. To retrieve the endpoint for your bucket, click the Properties tab, scroll to the bottom, and click the copy icon next to the Bucket website endpoint:

27. Paste the endpoint into the address bar of a new browser tab.

You will see a website load that looks like this:

28. In the AWS Management Console search bar, enter CloudFront, and click the CloudFront result under Services:

29. To start creating a distribution, click Create a CloudFront Distribution:

30. Under Origin, in the Origin Domain text-box, enter the Amazon S3 static website hosting endpoint that you created earlier:

31. Under Origin, in the Origin access, select Origin access control settings and click Create control setting:

Under Create control setting, enter the following values:

• Name: Enter Name-<UniqueNumber> (Append a unique number to the end of calabs-s3cf-)
• Signing behavior: Ensure Sign requests is selected

32. Click Create

33. Scroll down to Settings, and in the Price class selection, select Use only North America and Europe:

34. In the Default root object field, enter index.html.

35. To finish configuring your distribution, at the bottom of the page, click Create distribution:

36. Return to the Distributions table by clicking the breadcrumb link at the top of the page:

37. To view details of your distribution, click the random alphanumeric ID:

Note: Your ID will be different.

38. Copy the value of the Distribution Domain Name field:

39. Paste the domain name into the address bar of a new browser tab.