Nov 13, 2022
Hosting Static Website using AWS S3 and GoDaddy
In this article, you’ll learn to host a static website on AWS S3 using the GoDaddy domain. Additionally, this article will cover supporting HTTPS on the website and removing the file extension from the website’s path.
Note: While all the resources to host static websites on S3 are available on the internet, this article aims to put everything together and provide solutions to common problems in a single place.
Hosting Static Website
< Reference: https://docs.aws.amazon.com/AmazonS3/latest/userguide/EnableWebsiteHosting.html >
- Sign in to the AWS console https://console.aws.amazon.com/. Register using the same link if you don’t have an AWS account.
- Search “S3” in the search bar and open the S3 console.
- Click the “Create Bucket” button located in the top right.
- Under “General Configuration”
- Enter “Bucket Name,” ideally the name of the domain. For example, if you want to create www.example.com, name the bucket an “example.”
- Select “AWS Region,” which is most close to the location of your website’s user.
- Under “Block Public Access settings for this bucket,” uncheck the “Block all public access” checkbox to allow users to access the bucket files.
- Leave everything else with the default values and click “Create Bucket” at the bottom of the page.
- Upload the files of your static website using either AWS CLI or the “Upload” option under the “Objects” tab of the newly created bucket.
- Under the “Properties” tab of the newly created bucket, scroll to the bottom, and under the “Static website hosting” section, Enable static website hosting using the “Edit” button. Provide all the required information, including the default file to open when your website is visited under the “index” text field.
- Under the “Properties” tab, you’ll find the URL to visit your website at the bottom of the page under the “Static website hosting” section. It will look something like “http://<bucket-name>.s3-website.<aws-region-of-the-bucket>.amazonaws.com/”
Enabling Custom Domain & HTTPS
Why HTTPS? With HTTPS, data is encrypted in transit in both directions: going to and coming from the origin server. The protocol keeps communications secure, so malicious parties can’t observe what data is being sent. Additionally, your website user will see an insecure connection warning with HTTPS.
HTTPS connections are enabled through SSL (Secure Sockets Layer) certificates. An SSL certificate is a digital certificate that authenticates a website’s identity and enables an encrypted connection.
Creating SSL certificate in AWS
- Open AWS Certificate Manager (ACM) console by searching “Certificate” in the search bar.
- Click on the “Request” button and ensure the “Request a public certificate” radio-buttion is selected before clicking on the “Next” button.
- Under “Domain names,” enter two values for the “Fully qualified domain name” field
- www.<your-domain-name>.com
- <your-domain-name>.com
- Under the “Validation Method” section, select “DNS Validation” unless you can access email to perform validation using email.
- Open the newly created certificate and copy the “CName name” and “CName value” values for both domain names.
- Now head to your domain provider’s website and sign in to your account. In this article, steps are shared for domains registered through GoDaddy.
- Open the settings of the domain you would like to use. https://dcc.godaddy.com/control/<domain-name>/settings
- Under the “Additional Settings” section, open the “Manage DNS” link.
- Under the “DNS Records” section, click the “Add” button and enter the following. Repeat this step twice for both the values provided by ACM.
- “Type” -> “CNAME”
- “Name” -> The “CName name” copied from the ACM certification screen.
- “Value” -> The “CName value” copied from the ACM certification screen.
- “TTL” -> “Default”
- It usually takes 5–10 mins for verified status to get reflected on ACM Certificate. This is an excellent time to take a break :)
Creating CloudFront distribution
- Open the CloudFront console by searching “CloudFront” in the search bar of the AWS console.
- Click on the “Create Distribution” button. (Note: Make sure the certificate is created in the us-east-1 region, irrespective of your bucket region)
- Enter the S3-provided website URL under “Origin domain.” Note: Don’t select the auto-complete provided S3 link.
- Select “Redirect HTTP to HTTPS” as the “Viewer protocol policy” under the “Default cache behavior” section.
- Under the “Settings” section, select the created SSL certificate in the “Custom SSL certificate — optional” field.
- Under the “Settings” section, enter two values for the “Alternate domain name (CNAME) — optional” field
- www.<your-domain-name>.com
- <your-domain-name>.com
- Leave everything else with the default values and click “Create distribution” at the bottom of the page.
It takes 5–10 minutes before your custom domain URL is live :)
Removing file extension from the website’s URL
Now that your website is live and secured with HTTPS, it is important not to display file extensions in the URL of your website. While this is not a deal-breaker, it doesn’t look professional! To fix it
- Locate your HTML (assuming you are using HTML files for the static website) files under the S3 bucket, and under the “Actions” drop-down, select “Edit Meta-data.”
- Ensure the content type is “text/html”; if it is not, change it to “text/html.”
- Now go back and select the HTML file again and rename the file using the “Actions” -> “Rename object” button. Remove the .html extension from the file name and click “Save.”
Note: All the anchor (link) tags in your HTML file must remove “.html” from the “href.”
