Hosting Options

  1. Hosting on Your Own Computer
  2. AWS Route 53 + AWS S3
  3. External Registrar + AWS Route 53 + AWS S3
  4. External Registrar + AWS Route 53 + AWS S3 + AWS Certificate Manager + AWS CloudFront + GitHub Actions
  5. Github Pages
  6. Netlify

Introduction

The instructions outlined below are for hosting a static website (ie, no server side code). It assumes you will have the following file types in your repository:

  • HTML
  • CSS
  • JavaScript

Option 3: External Registrar + AWS Route 53 + AWS S3 + AWS Certificate Manager + AWS CloudFront + GitHub Actions

Option 3 - Tools and Accounts

Make sure you have setup accounts for the tools below. All AWS products will only require the setup of one root user login. Github and any external domain purchase is separate.

  1. Registered Domain through AWS Route 53 or An External Registrar (GoDaddy etc.)
  2. AWS S3
  3. AWS CloudFront
  4. GitHub Account
  5. AWS CodePipeline
  6. AWS Certificate Manager

Option 3 - Steps

  1. Signup and/or Login to AWS Console
  2. Signup and/or Login to GitHub
  3. Create a New Repository in Github
    • Choose one of the following methods:
  4. Add Folders and Files to Repository
    • Create the following folder in your repository:
      • /css
      • /js
      • /img
    • Add the following files to the root of your repository:
      • index.html
      • error.html
      • You can use any type of HTML you want for your index.html file or copy the following which is a modified version of this template
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>HTML 5 Boilerplate</title>
    <link rel="stylesheet" href="css/style.css">
  </head>
  <body>
	<script src="js/index.js"></script>
  </body>
</html>
  • Here is a boilerplate template for the error.html from here
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>HTML 5 Boilerplate</title>
    <link rel="stylesheet" href="css/style.css">
  </head>
  <bod>
    <h1>Page Not Found</h1>
    <p>Sorry, but the page you were trying to view does not exist.</p>
  </body>
</html>

  • You can also add index.js to your /js directory and styles.css to your /css directory.

  • Your Repository should look something like this:

.
|-- /css
    |-- styles.css
|-- /img
|-- /js
    |-- index.js
|-- index.html
|-- error.html
  • If your file structure looks totally different, don’t worry about it. We will change it in the future - just make sure that the index.html and error.html files are in the root directory.
  1. Register for a Domain Name
    • Purchase and setup your domain name through your preferred registrar and login to the DNS Console in a separate tab.
      • This example assumes the domain is registered with GoDaddy.
    • Make note of your new domain which should be something like https://example-site.com.
  2. Create a New S3 Bucket
  3. Upload Files to Your New S3 Bucket
    • Recall in Step 4, you created index.html and error.html. Upload both files to your New S3 Bucket.
      • For now, just upload the index.html and error.html files and not anything else. In a later step, we will connect the repository to our S3 bucket for a seamless workflow.
      • Follow the AWS S3 Docs To upload folders and files to an S3 bucket using the S3 Console.
    • Test that these files have been uploaded by going to your S3 bucket’s endpoint.
      • For our example, we should enter http://example-site.com.s3-website.us-east-2.amazonaws.com in our browser’s url bar and see our index.html file displayed.
  4. Create a CloudFront Distribution
    • Create a CloudFront Distribution by following the AWS Docs for Creating a CloudFront Distribution
    • For Origin domain enter the endpoint that you copied in step 6. Note: Don’t select the bucket from the dropdown list. The dropdown list includes only the S3 Bucket REST API endpoints that aren’t used in this configuration.
    • For our example, our Origin domain would be http://example-site.com.s3-website.us-east-2.amazonaws.com * For Viewer protocol policy select Redirect HTTP to HTTPS * Under Alternate domain name (CNAME) add the following:
    • *.example-site.com so any future subdomains will be re-directed. * Under Custom SSL certificate select “Request Certificate”. Note: complete the steps below then return to the Create Distribution tab.
    • This will open a new tab to the AWS Certificate Manager for your appropriate S3 Bucket’s region.
      • Select Request public certificate
      • Under Fully qualified domain name enter:
        • *.example-site.com
        • Use an asterisk (*) to request a wildcard certificate to protect several sites in the same domain. For example, *.example.com protects www.example.com, site.example.com, and images.example.com.
      • Under Select validation method choose DNS validation.
    • Once you have created the certificate select View Certificate
      • You will need the following values:
        • CNAME Name
          • This will look like _a79865eb4cd1a6ab990a45779b4e0b96.example-site.com.
        • CNAME Value
          • This will look like _424c7224e9b0146f9a8808af955727d0.hkmpvcwbzw.acm-validations.aws.
    • Login to your Registrar’s DNS Console for the Domain purchased in Step 5. For this example, I am using GoDaddy.
      • Go to My Domains / Domain Settings / DNS Management / DNS Records.
      • Select Add
        • Under Type select CNAME
        • Under Name copy and paste the CNAME Name from AWS Certificate Manager. For our example, this will look like _a79865eb4cd1a6ab990a45779b4e0b96.example-site.com.. Note that since we are using the GoDaddy, you need to modify the Name by truncating the apex domain (including the period) at the end of the NAME field, as follows: _a79865eb4cd1a6ab990a45779b4e0b96. For more information, see DNS validation on GoDaddy fails.
        • Under Value copy and paste the CNAME value from AWS Certificate Manager. For our example, this will look like _424c7224e9b0146f9a8808af955727d0.hkmpvcwbzw.acm-validations.aws.
          • Back on the AWS CloudFront - Create Distribution tab, enter index.html for the Default root object.
          • Select Create Distribution
    • Note: you can only create the distribution once you have verified the SSL certificate with AWS Certificate Manager. This took less than 10 minutes for me, but can take longer depending on multiple different variables.
  5. Use AWS 53 to Route Traffic to the Amazon CloudFront distribution
    • Sign in to the AWS Management Console and open the Route 53 console
    • Setup a Hosted Zone for the website hosted on GoDaddy in the Route 53 console.
    • Setup DNS Nameservers on GoDaddy to point to Route 53. See Making Route 53 the DNS service for a domain that’s in use
    • Follow the AWS Route 53 Docs for Configuring Amazon Route 53 to route traffic to a CloudFront distribution.
      • Create the A Record. Note: make sure that the Record Name in the Record matches the Alternate domain names in the Cloudfront Distribution. If the domain name in Cloudfront is *.example-site.com then the A Record must be the same. See this Stack Overflow Answer
      • Creat the AAAA Record the same way you setup the A Record.

S3 Endpoint http://journalmakr.com.s3-website.us-east-2.amazonaws.com/

CloudFront Endpoint https://d3c2smw6z0koka.cloudfront.net

AWS CloudFront - Distributions console https://console.aws.amazon.com/cloudfront/v3/home?#/distributions

AWS S3 console https://s3.console.aws.amazon.com/s3/home?region=us-east-2&region=us-east-2

GoDaddy Journalmakr dns https://dcc.godaddy.com/manage/journalmakr.com/dns?plid=1

Notes & Research

Notes & Research - localhost

Notes & Research - GitHub

Notes & Research - AWS

Notes & Research - AWS S3

Notes & Research - AWS CloudFront

Notes & Research - AWS Certificate Manager

Notes & Research - AWS Route 53

Notes & Research - AWS CodePipeline

Notes & Research - GoDaddy

Notes & Research - Github Actions

Notes & Research - Option 3