Skip to content

Instantly share code, notes, and snippets.

@xiaomi7732

xiaomi7732/PublishFullHTTPSWebSitePages.2022.md

Last active March 3, 2022 01:47
Show Gist options
  • Save xiaomi7732/444df06b5de5c047f3e064c18f3393fe to your computer and use it in GitHub Desktop.
Save xiaomi7732/444df06b5de5c047f3e064c18f3393fe to your computer and use it in GitHub Desktop.
Download ZIP
I published a full HTTPS encrypted website on GitHub pages (in year 2022)
Raw
PublishFullHTTPSWebSitePages.2022.md

I published a full HTTPS encrypted website on GitHub pages (in year 2022)

It had always been a pain to host a small/basic/quick/light-weight website on a custom domain that supports HTTPS. Common issues are Domain verification, certificate rotation/management, and quick iteration with a easy to understand CI/CD pipeline.

However, this year, when I try it again with GitHub pages, it blowed my mind. I think it addresses all those pain points and I have to say, good job GitHub!

image

(Image comes from internet)

I'll put down some reasons to enable HTTPs on a custom domain of my own. If you only want to see how I did it, jump to How I did it.

Why custom domain?

Well compare these:

Even for a quick prototype, for me, https://stack.codewithsaar.net is the winner!

Why do I have to have HTTPS for small sites?

Becuase there are issues. When the time this gist got published, these issues should have been addressed but still:

  1. It is 2022, why leaving the website unencrypted?

    • And the browser's going to mark the site as NOT secure to use. Good luck explain that there's no password transfer and your information is probably okay balabala... and, well, just encrypt the traffic.

    image

  2. Okay, then turn on HTTPS, what's the deal? Well, this is the deal when there's no certificate from a proper authority:

    GitHubPagesHttpsInvalidCertificate

    And my friend, you & me, I believe, either of us is an authoriy. In other words, self-signed certificate is not going to pull this off. So, how can I get a certificate? I could:

    • buy one; or
    • I cloud use a free one like it here on Let's encrypt.

Since I am hosting a hobby site & I am cheap, I usually pick the free options. The problem is, the certificate I got for my domain usually will only be valid for a short amount of time - around 3 months and that had given me huge pain - I am not operating a website 24/7 and I forget to rotate the certificate all the time and every 3 month, my website might just go back to NOT secure because the certificate would be expired. That always ruin my days.

What does the site look like, that I was trying to publish this time

You can check it out for yourself: https://stack.codewithsaar.net. In the nut shell, it is a static website with 1 js file, several css, 1 html page. There is a backend RESTful API that I have already hosted on Azure, and that's out of scope for this post.

And also I believe someday, gist is going to render this flow (that might be today):

graph LR
    A[Frontend hosted on GitHub] -->|Fetch| B(Backend hosted on Azure)
Loading

How I did it

  1. Host the website using GitHub page. Basically, put the site into the folder of /docs under the repo. Like it here.

    • The page didn't show up for the first couple of minutes. And I found there's actually a GitHub action created for releasing the page like this with progress/error - that's my free CI/CD pipeline.

    • Custom domain aside, it worked. The address is: https://xiaomi7732.github.io/StackBeauty, HTTPS enabled/enforced. (although, I am sorry, you won't actually see it, it automatically redirects to my custom domain now.);

  2. Then, I added a CName record on my domain (codewithsaar.net) DNS manager:

    Type Host Value
    CNAME Record stack xiaomi7732.github.io.

    Don't know what that means? Me either. I don't know about DNS or all those teminologies. But here's what I find out - an A record points to a specific IP. CName is like an alias to an A record or another CName and that's all I need to know.

    By setting it above, it tells DNS, route the traffic for stack.codewithsaar.net to xiaomi7732.github.io. and let github.io to handle the rest.

    There is a gap, though, from xiaomi7732.github.io to xiaomi7732.github.io/StackBeauty. And that is where the page settings be used: image

    That is per repo settings. It is telling GitHub: route traffic for stack.codewithsaar.net to this repo (aka, StackBeauty)'s page.

  3. Now, certificate for SSL. This is why I think it is AWESOME. I do NOT need to buy or get a certificate. All I need to do, is to put my domain name there, and click a button to verify the domain:

    GitHubPagesHttpsCertificate
    • Well, it did take me 30+ minutes before the certfiicate was acquired, but I didn't need to do anything by myself, only need to wait, patiently.
    • On the side, I had a different configuration for stack.codewithsaar.net, when I put it in GitHub pages, it didn't pass the validation even after I corrected the settings. I waited for about 15 minutes and then everything started to work for me.
    • After I verified https works, I checked the checkbox of Enforce HTTPS, of course.

At this stage, I assume that I do NOT need to worry about certificate rotation any further. I find peace in my heart. :-)

Some take aways

  • Update CORS rules for the backend before binding the custom domain - otherwise, once bound, the requests to the backend would be blocked;
  • Create the CNAME before you try to bind it on GitHub Page settings - not a big deal, but might save you some error messages / waiting time.

What I hope to be better

  • The time to generate the certificate for my page took more than 30 minutes to finish - I actually left it overnight before validation. I wish that would be 5 minutes at the max.

References

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment