Share


How to Deploy Your Website Using AWS & Google Domains using HTTPS

by Astha Sharma on 2021-02-11

Ah, there’s nothing as satisfying as finishing all your code for a website you’re making. But then comes the hard part — deploying it. Don’t worry, we got you covered with this guide.

We will go through deploying without a custom domain, with a HTTP custom domain, and a secured HTTPS domain custom.

What Will I Need For This?

  • Files containing code for your Website
  • An account on Amazon Web Services (services used in this article are free up to a year on a new account)
  • A custom domain, I am using Google Domains for this article

Deploying on Amazon Web Services (AWS)

  1. Login in or create an account on AWS
  2. Click on or search S3 and click on Buckets. Click on Create Bucket
  3. aws buckets
  4. In the Create Bucket form, name the Bucket your website’s URL
  5. aws buckets
  6. In the same form, turn off Block all public access and then Create the Bucket
  7. aws buckets aws
  8. Go back and click on your newly created Bucket and then click on Properties
  9. aws buckets
  10. Scroll down to Static website hosting and Edit to enable it
  11. aws buckets
  12. Click on Enable and write the name of your index or main file in Index document (mine was index.html)
  13. aws buckets

    If you have a file for errors, specify it in Error document. If not hit save changes.

  14. Add your website’s files in your Bucket folder by clicking on Upload
  15. aws buckets

    Click on Add files to add your code

    aws buckets

    Scroll down to Upload

    aws buckets
  16. In your Bucket go to the Permissions and scroll down to Bucket policy and click on Edit
  17. aws buckets
  18. In here we will be pasting the following code. Click here if you want to read more about it
  19.                             
    {
        “Version”: “2012–10–17”,
        “Statement”: [
            {
               “Sid”: “PublicReadGetObject”,
               “Effect”: “Allow”,
               “Principal”: “*”,
               “Action”: [ “s3:GetObject” ],
               “Resource”: [ “arn:aws:s3:::example.com/*"]
            }
         ]
    }
                                
                            

    Make sure to replace example.com with your website.

    aws buckets
  20. Check to make sure the Access is Public on your S3 Buckets dashboard
  21. aws buckets
  22. Click on your button and go to Properties and scroll down to Static website hosting and click on the Bucket website endpoint link
  23. aws buckets

Open the URL to make sure your website is working and displaying!

If all you wanted was to share your website then you’re done!

But if you have a custom domain, stay tuned and keep your website URL handy.

We will need it a few more times later on.

HTTP Custom Domain

  1. Go to wherever you purchased your domain from. I’m using Google Domains.
  2. Go to DNS settings and scroll down to Custom resource records
  3. aws buckets
    • In the Name column type in www
    • Choose CNAME in Type
    • 60 in TTL
    • Copy the URL we got from AWS in Dta
    aws buckets

    Important Note: make sure to remove the http:/ when pasting the URL from AWS.

  4. To make your site be accessible without writing www, scroll up to Synthetic records and write
    • @ in Subdomain
    • www in Destination URL
    • Click on Permanent redirect (301)
    aws buckets
  5. Your site should now be live! You may need to refresh or wait a few minutes but test out to make sure it’s working.

If you’ve noticed, this is a http:// site meaning it is not secure. If you want to have an HTTPS site and see the lock on the URL there will be a few extra steps.

Adding HTTPS and Securing Your Site

To do this we need to get a certificate from AWS.

  1. First we set up email forwarding on Google Domain so we can verify we own the site
  2. On Google Domains, click on Email. Scroll down to Email forwarding and Add email alias
  3. aws buckets aws buckets

    Putting a * in the Alias email will make it so any emails from your website (info@yoururl.com, admin@yoururl.com, water@yoururl.com etc) will get forwarded.

  4. Go on AWS and search for Certificate Manager
  5. aws buckets

    If this is your first time using this, you will need to get a Provision certificate

    aws buckets
  6. Click on Request a certificate
  7. aws buckets
  8. Request a public certificate & click on Request a certificate
  9. aws buckets
  10. Write your domain name with and without www and with a *. and click Next
  11. aws buckets
  12. We will be using Email validation
  13. aws buckets
  14. Skip the tags and click Review
  15. aws buckets
  16. Review and confirm request and continue
  17. aws buckets
  18. It will currently say the Status is Pending Validation
  19. aws buckets
  20. Check your email that you set for forwarding and approve the request for your your www and non www website
  21. Click on I Approve for both
  22. Go back to AWS to make sure Validation status shows up as Success
  23. aws buckets

Now that we have obtained our certificate, we are going to use another AWS service, Cloudfront, to tell our site to use the certificate and HTTPS

  1. Search CloudFront on AWS
  2. aws buckets
  3. Click on Create Distribution and Get Started
  4. aws buckets aws buckets
  5. In Origin Domain Name paste your AWS link
  6. aws buckets

    Very Important: Make sure you don’t use the ones from the dropdown menu! Paste the link we got way before, mine was (http://www.heyastha.com.s3-website-us-east-1.amazonaws.com/)

  7. Scroll down to Viewer Protocol Policy and click on Redirect HTTP to HTTPS
  8. aws buckets
  9. In Distribution Settings write your domain names with and without www where it says Alternate Domain Names
  10. Click on Custom SSL Certificate and select from the dropdown your domain certificate that we created in Certificate Manager
  11. aws buckets
  12. Create Distribution & it should say that your website Status is In Progress
  13. aws buckets aws buckets
  14. Copy your Domain Name
  15. aws buckets
  16. Go back to Google Domains DNS and scroll to Custom resource records
  17. Click Edit and change the Data to what you just copied
  18. aws buckets
  19. Save & visit your website!
  20. heyastha

It may take a few minutes to show up but if you followed these steps correctly, you will be seeing a secured lock on the browser.

Closing Remarks

If you have any questions or run into any errors, feel free to reach out to us at info@lovespreadsheets.com!

Good luck with your websites!