Delder's Domain
My personal website files for www.elderek.com and www.derekmelder.com
Hosting a static website in AWS
Manual Steps
- 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)
- Go to Services > Route 53
- On the left hand side click on Registered domains under Domains
- Click Register Domain
- Enter in your desired domain name, check if it's available, and click Continue
- Enter in your contact details and click Continue
- Verify your details and click Purchase
- Verify your email through the link Amazon sends you
- Wait a little while for the domain to be registered (the time for this step can vary)
- Go to Services > S3
- Click on Create bucket
- Use your website domain name for the bucket name (ex: www.elderek.com)
- Choose a region for the bucket
- Uncheck Block all public access
- Click Create bucket
- Click on the bucket name to go into the bucket
- Click the Upload button
- Drag over all of your website files and then click Upload
- Click on the Properties tab
- Click on Static website hosting
- Click Use this bucket to host a website
- Enter in your index html file (index.html by default)
- Click Save
- Click the Permissions tab
- Click on Bucket Policy
- 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/*"
}
]
}
- Click Save
- Click on CORS configuration
- Paste the following in:
[
{
"AllowedHeaders": [
"Authorization",
"Content-Length"
],
"AllowedMethods": [
"GET"
],
"AllowedOrigins": [
"*"
],
"ExposeHeaders": [],
"MaxAgeSeconds": 3000
}
]
- Click Save
- 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
- Optional: Enable Cache-Control per https://stackoverflow.com/questions/22501465/how-to-add-cache-control-in-aws-s3
- Back in S3, click on Create bucket
- Use your website domain name minus www for the bucket name (ex: elderek.com)
- Choose a region close to you and click Next
- Uncheck Block All Public Access
- Click Create bucket
- Click on the bucket name to go into the bucket
- Click on the Properties tab
- Click on Static website hosting
- Click Redirect requests
- In the Target bucket or domain field supply your other bucket's name (ex: www.elderek.com)
- Click Save
- Click back to Route 53
- Click on Registered domains under Domains
- Click on your new domain name (ex: elderek.com)
- Click Manage DNS
- Click on the domain name
- Click Create Record Set
- Enter www in the name field
- Keep A - IPv4 address
- Click Yes next to Alias
- For the Alias target use the bucket alias from S3 (ex: s3-website-us-west-2.amazonaws.com.)
- Leave Routing Policy and Evaluate Target Health alone
- Click Save Record Set
- Click Create Record Set
- Leave the name field blank
- Keep A - IPv4 address
- Click Yes next to Alias
- Use the Alias Target of your other record (ex: www.elderek.com.)
- Click Save Record Set
- Leave Routing Policy and Evaluate Target Health alone
- Now type your website into your browser and confirm both addresses (ex: elderek.com and www.elderek.com) are working
Using create-website.py
- Read: https://docs.aws.amazon.com/cli/latest/userguide/getting-started-install.html
- Install aws-cli
- Configure aws-cli credentials with aws configure
- Install Python 3
- pip install boto3 PyYaml
- Update the region, domain_name, and stack_name varibales in create-website.py
- py create-website.py
Docker image
Setup the Docker container
- cd to the root of the website folder
- docker build -t elderek-website-image:latest -f docker/Dockerfile .
- docker run -itd --name elderek-website-image-container --publish 8080:80 elderek-website-image:1.0
- docker ps -a
- Visit http://localhost:8080/home.html
Tear down the Docker container
- docker rm
$(docker stop $ (docker ps -aq --filter ancestor=elderek-website-image --format="{{.ID}}")) - Alternate tear down commands:
- docker ps -aq | xargs -n 1 docker stop
- docker ps -aq | xargs -n 1 docker rm
- docker system prune -a
- 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