Delder's Domain

My personal website files for www.elderek.com and www.derekmelder.com

Hosting a static website in AWS

Manual Steps

1. Login to https://us-west-2.console.aws.amazon.com/console/home?region=us-west-2 (or set up an account if you don't have one)
2. Go to Services > Route 53
3. On the left hand side click on Registered domains under Domains
4. Click Register Domain
5. Enter in your desired domain name, check if it's available, and click Continue
6. Enter in your contact details and click Continue
7. Verify your details and click Purchase
8. Verify your email through the link Amazon sends you
9. Wait a little while for the domain to be registered (the time for this step can vary)
10. Go to Services > S3
11. Click on Create bucket
12. Use your website domain name for the bucket name (ex: www.elderek.com)
13. Choose a region for the bucket
14. Uncheck Block all public access
15. Click Create bucket
16. Click on the bucket name to go into the bucket
17. Click the Upload button
18. Drag over all of your website files and then click Upload
19. Click on the Properties tab
20. Click on Static website hosting
21. Click Use this bucket to host a website
22. Enter in your index html file (index.html by default)
23. Click Save
24. Click the Permissions tab
25. Click on Bucket Policy
26. Paste the following in (changing the domain name to your domain name):

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::www.elderek.com/*"
        }
    ]
}

27. Click Save
28. Click on CORS configuration
29. Paste the following in:

[
    {
        "AllowedHeaders": [
            "Authorization",
            "Content-Length"
        ],
        "AllowedMethods": [
            "GET"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": [],
        "MaxAgeSeconds": 3000
    }
]

30. Click Save
31. Optional: Enable Content-Encoding gzip compression per https://www.thepolyglotdeveloper.com/2018/10/serving-gzipped-javascript-files-amazon-s3/, see also: https://stackoverflow.com/questions/18456535/aws-s3-returns-200ok-parser-fails-if-contentencoding-gzip, https://stackoverflow.com/questions/5442011/serving-gzipped-css-and-javascript-from-amazon-cloudfront-via-s3
32. Optional: Enable Cache-Control per https://stackoverflow.com/questions/22501465/how-to-add-cache-control-in-aws-s3
33. Back in S3, click on Create bucket
34. Use your website domain name minus www for the bucket name (ex: elderek.com)
35. Choose a region close to you and click Next
36. Uncheck Block All Public Access
37. Click Create bucket
38. Click on the bucket name to go into the bucket
39. Click on the Properties tab
40. Click on Static website hosting
41. Click Redirect requests
42. In the Target bucket or domain field supply your other bucket's name (ex: www.elderek.com)
43. Click Save
44. Click back to Route 53
45. Click on Registered domains under Domains
46. Click on your new domain name (ex: elderek.com)
47. Click Manage DNS
48. Click on the domain name
49. Click Create Record Set
50. Enter www in the name field
51. Keep A - IPv4 address
52. Click Yes next to Alias
53. For the Alias target use the bucket alias from S3 (ex: s3-website-us-west-2.amazonaws.com.)
54. Leave Routing Policy and Evaluate Target Health alone
55. Click Save Record Set
56. Click Create Record Set
57. Leave the name field blank
58. Keep A - IPv4 address
59. Click Yes next to Alias
60. Use the Alias Target of your other record (ex: www.elderek.com.)
61. Click Save Record Set
62. Leave Routing Policy and Evaluate Target Health alone
63. Now type your website into your browser and confirm both addresses (ex: elderek.com and www.elderek.com) are working

Using create-website.py

1. Read: https://docs.aws.amazon.com/cli/latest/userguide/getting-started-install.html
2. Install aws-cli
3. Configure aws-cli credentials with aws configure
4. Install Python 3
5. pip install boto3 PyYaml
6. Update the region, domain_name, and stack_name variables in create-website.py
7. py create-website.py

Docker image

Setup the Docker container

1. cd to the root of the website folder
2. docker build -t elderek-website-image:latest -f docker/Dockerfile .
3. docker run -itd --name elderek-website-image-container --publish 8080:80 elderek-website-image:1.0
4. docker ps -a
5. Visit http://localhost:8080/home.html

Tear down the Docker container

1. docker rm $(docker stop $(docker ps -aq --filter ancestor=elderek-website-image --format="{{.ID}}"))
2. Alternate tear down commands:
   1. docker ps -aq | xargs -n 1 docker stop
   2. docker ps -aq | xargs -n 1 docker rm
3. docker system prune -a
4. docker images -a

References and Code

• https://getbootstrap.com/
• https://codetheweb.blog/2017/12/07/fullscreen-image-hero/
• https://www.pentacom.jp/pentacom/bitfontmaker2/
• https://transfonter.org
• https://dev.twitch.tv/docs/embed/everything
• https://steamprofile.com/
• https://blog.discordapp.com/add-the-discord-widget-to-your-site-d45ffcd718c6
• https://developers.google.com/youtube/player_parameters
• https://blackbirdpublishing.com/adding-a-goodreads-books-widget-to-your-author-website/
• https://medium.com/@kyle.galbraith/how-to-host-a-website-on-s3-without-getting-lost-in-the-sea-e2b82aa6cd38
• https://docs.aws.amazon.com/AmazonS3/latest/dev/website-hosting-custom-domain-walkthrough.html#root-domain-walkthrough-s3-tasks
• https://favicon.io/favicon-generator/
• https://www.minifier.org
• https://developers.google.com/speed/pagespeed/insights/
• https://gtmetrix.com
• https://aws.amazon.com/premiumsupport/knowledge-center/s3-website-cloudfront-error-403/
• https://securityheaders.com