These posts are a 2-part series on the set up I use currently for my sites and my projects.

In this first one, I’ll talk about the stack I use and the reasons behind it. In the second I’ll talk how to take advantage of this set up and publish all your projects in GitHub pages within subdomains of you main project name.

context

On my personal site, my domain registrar is Google domains and my infrastructure with AWS. To publish my website, I stored the files in an S3 bucket, set up a CloudFront distribution and put the servers that CloudFront use in the DNS settings within google domains.

issue

Everything worked like a charm until I realize that my website had a warning of being unsecure. 😭

I started researching and found few people having issues with it as well. I tried their solutions, it didn’t work for me. I tried to follow the guide amazon has to work with google domains but couldn’t make the website HTTPS either.

solution

Now I’m going to share the solution that worked for me after trying many approaches. It involved another provider but on their free tier, so it won’t cost anything plus later you’ll be able to use their DNS settings to send your projects from GitHub pages to different subdomains 🥳

First thing make sure to have your domain SSL certificate. You can get it from amazon ACM Docs to help you set up this

Once you have your certificate, head to Cloudflare and set up a free account. Make sure you chose a flexible SSL configuration.

Then, finish the setup of your domain to get 2 addresses. Paste those 2 within google domains to point your domain to Cloudflare’s servers.

That's the only thing you'll need to do on the Google side so you can close the window.

Once this is done, go to AWS S3 buckets and create your bucket. Give a name of your domain without the first www. Make sure you set it up as a serverless site, make it open to the public and put this info in the policy.

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Deny",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::www.example.com/*",
            "Condition": {
                "NotIpAddress": {
                    "aws:SourceIp": [
                        "2400:cb00::/32",
                        "2405:8100::/32",
                        "2405:b500::/32",
                        "2606:4700::/32",
                        "2803:f800::/32",
                        "2c0f:f248::/32",
                        "2a06:98c0::/29",
                        "103.21.244.0/22",
                        "103.22.200.0/22",
                        "103.31.4.0/22",
                        "104.16.0.0/12",
                        "108.162.192.0/18",
                        "131.0.72.0/22",
                        "141.101.64.0/18",
                        "162.158.0.0/15",
                        "172.64.0.0/13",
                        "173.245.48.0/20",
                        "188.114.96.0/20",
                        "190.93.240.0/20",
                        "197.234.240.0/22",
                        "198.41.128.0/17"
                    ]
                }
            }
        }
    ]
}

more info on this link

This will make sure, although your bucket is open to the public, to only be accessible by Cloudflare’s servers.

Then you’ll need to create another bucket with the name of your domain, but this time with the www and make it point at the bucket we have created in the step above.

After all this steps, we have just to set up Cloudflare’s dns. To do so, head to your Cloudflare’s account DNS and add a cname pointing to the address of the s3 bucket and another another one pointing at the address of the www bucket.

After completing all the steps above, give it sometime as these configurations could take a few moments to propagate but soon you should see your site served as secured HTTPS website.

I hope you have found this useful. There is a second part on the making. There I'll talk about how this set up is useful if you deploy your projects in GitHub pages and want to use subdomains to show them to the world.

Also, if you'd like, you can follow me on twitter here and see what I am up to in (GitHub)[github.com/liteljaime]

Thanks for reading! 💜 See you soon!