Pizzozz! logo
    1.   Make-a-Websites
    1. Home
    2. Make-a-Websites
    3. Fixing HTTPS with AWS CloudFront. PART 3

    Fixing HTTPS with AWS CloudFront. PART 3

    Posted on March 18, 2025 • 4 min read • 844 words
    Aws   S3   Tutorial   Website   Tech   Internet   How-To   Amazon   Route 53   CloudFront  
    Aws   S3   Tutorial   Website   Tech   Internet   How-To   Amazon   Route 53   CloudFront  
    Share via
    Pizzozz!
    Link copied to clipboard

    We will be using Amazon AWS Cloudfront to reroute our website through HTTPS

    Fixing HTTPS with AWS CloudFront. PART 3
    “So. Many. Steps! Why so many things?? I just want my site up and working!”

    Patience my internet-friend. Remember how I mentioned we were going to fix that “Not secure” bit when visiting our site?

    Alt text for accessibility


    We’re gonna do that now! Why? Because someone on the internet decided that HTTP is not secure enough so now all sites have to be HTTP-Secure…or HTTPS. Otherwise browsers are going to yell at us every time we visit our site.

    The good news is that after we are done with this bit, we can start working on our actual site. The bad news is that this process is a bit chomp-licated, AAAAAND cost some extra $ since we are paying for traffic that is going through CloudFront. Adds maybe $1-$2 extra a month. The other good news is that I’m going to tell you how to do it step-by-step!

    First thing to know, we are going to be using AWS CloudFront. CloudFront is basically like a bunch of computers in the CLOUD all around the world that take snapshots of your site so when someone visits it two things happen: 1. It shows your site faster because it’s already sort of saved on those computers, and
    B. It will try to pick a contuter in the cloud that’s close to whoever is vising the site so it can show it faster. So if someone from France is visiting it, it will try to pick a contuter from France to show the saved version.

    Alt text for accessibility


    Okay, here we go. Go into your CloudFront AWS location like above. We’re going to click “Create Distribution”

    Alt text for accessibility


    For the next part under “origin domain” select your s3 website. The one that has s3-website on it, but no worries, AWS will show you a warning if you pick the incorrect one.

    Alt text for accessibility


    For this part choose “redirect HTTP to HTTPS”

    Alt text for accessibility


    Everything stays like this here

    Alt text for accessibility


    Same here

    Alt text for accessibility


    Now for this part! Here we are going to create our own certificate. That’s what makes this stuff HTTPS! So click on that blue “Request Certificate” link which will open a new window/tab.

    Alt text for accessibility


    Click next

    Alt text for accessibility


    Here we want to add both pizzozz.com AND www.pizzozz.com

    Alt text for accessibility


    Then just hit request

    Alt text for accessibility


    Now it’s going to say “pending”

    Alt text for accessibility


    But we actually want to go back to the Certificate manager screen where we can see the “Certificate ID” and then click on that ID

    Alt text for accessibility


    This next step is basically us “Verifying” the certificate by saying, “Why! Yes! I do own this website!” by creating some other records in Route 53.
    Thankfully AWS has done this for us so we can just hit the “Create records in route 53” button

    Alt text for accessibility


    Then just hit “Create Records”

    Alt text for accessibility


    Then we’ll be taken back to the “pending validation” screen where it might take 5 minutes to A WHOLE HOUR! For this certificate to be verified.

    Alt text for accessibility


    And when you get a green “Issued” and “success” we go back to our previous open window in CloudFront and after hitting that refresh arrow button to the right of “Choose Certificate”
    Waa-blaaa! We can see our pizzozz certificate. So select that!

    Alt text for accessibility


    Leave the settings just like this

    Alt text for accessibility


    And finally hit “Create Distribution”

    Alt text for accessibility


    Which will take you to this screen that shows the status of the CloudFront distribution.
    Distribution, because it’s a whole lot of computers around the world that take the snapshot of your site

    Alt text for accessibility


    Leave the above window open and let’s do one..last..jobbers before all this stuff falls into place.
    We have to connect our actual website name in Route 53 to point to our CloudFront distribution which does the HTTPS stuff!
    So we have to go back Route 53 and change the those two “A” records from pointing to our s3-website to point to our CloudFront distribution.
    So pick either one to start with, I did pizzozz.com and hit “Edit Record”

    Alt text for accessibility


    Here we select “Route traffic to” and then from dropdown “Alias to CloudFront distribution”
    Now if the dropdown doesn’t appear just copy and paste the distribution ID without the https stuff as shown here. Then slam that “Save”!

    Alt text for accessibility


    HOLD ON! IT WILL NOT WORK IF YOU FORGOT TO DO ONE THING!
    Sometimes I forget to update this ‘cause I not good, and you might have as well. If the site still doesn’t work make sure this step is done. Go back to CloudFront and select our distribution and hit “Edit” under settings.

    Alt text for accessibility


    For the alternate domain names we want to add both pizzozz.com and www.pizzozz.com so they work correctly through CloudFront. “Save Changes”

    Alt text for accessibility


    and
    finally
    drum-roll
    after all that work…

    Alt text for accessibility


    No more security issues! We are running https Wow…so…anti-climactic. I know. But! trust me you just went through a full back-end-ish website set-up!
    That’s amazing! You should pat yourself on the back. Not a lot of people can do this from scratch!

    At this point, if you remember anything from your MySpace days with HTML, well, you know what TODO! Go make your site!


    But if you don’t, then head over to the next article to figure out how to make the Front-End stuff!

    And make it look prettys

    www.pizzozz.com/make-a-websites/staticsitegenerator/
     Static site generator! PART 4-1
    Connecting the domain and bucket. PART 2 
    Copyright © 2025 Pizzozz! All rights reserved. | Powered by coffee and rainbows
    Pizzozz!
    Code copied to clipboard