How to Implement Https on Your Static Website Hosted on Github Pages

by

Implementing HTTPS on your static website hosted on GitHub Pages is essential for ensuring secure data transfer and building trust with your visitors. This guide will walk you through the steps to enable HTTPS for your GitHub Pages site.

Why Use HTTPS on Your Website?

HTTPS encrypts the data exchanged between your website and its visitors, protecting sensitive information like login credentials and personal data. Additionally, browsers display security indicators, such as a padlock icon, which help establish trust and improve your site’s SEO rankings.

Prerequisites

  • A GitHub account with a repository hosting your website
  • Your custom domain (optional but recommended)
  • Access to your domain’s DNS settings (if using a custom domain)

Enabling HTTPS on GitHub Pages

GitHub Pages provides free HTTPS support through Let’s Encrypt for custom domains. Follow these steps to enable it:

1. Configure Your Repository

Ensure your repository is set up as a GitHub Pages site. Navigate to your repository’s settings, scroll to the “Pages” section, and select the branch and folder (e.g., /root) where your site is hosted. Save the settings.

2. Add a Custom Domain (Optional)

If you are using a custom domain, enter it in the “Custom domain” field in the Pages settings. Save the changes.

3. Configure DNS Records

Update your DNS records with your domain provider:

  • For a root domain (e.g., example.com), create an A record pointing to GitHub’s IP addresses:
  • 185.199.108.153
  • 185.199.109.153
  • 185.199.110.153
  • 185.199.111.153

For a subdomain (e.g., www.example.com), create a CNAME record pointing to your GitHub Pages URL (e.g., username.github.io).

Enabling HTTPS

Once your DNS is configured and propagated, return to the GitHub Pages settings. If your custom domain is correctly set up, a checkbox labeled “Enforce HTTPS” will appear. Check this box to enable HTTPS for your site.

It may take some time for the SSL certificate to be issued and the HTTPS enforcement to activate. Refresh the settings page periodically until the option becomes available and is checked automatically.

Testing Your HTTPS Setup

After enabling HTTPS, visit your website using https:// in the URL bar. Ensure that the connection is secure, indicated by a padlock icon in the browser address bar.

If you see any security warnings or the site is not loading over HTTPS, double-check your DNS configuration and wait for the SSL certificate to be issued.

Conclusion

Enabling HTTPS on your GitHub Pages site is straightforward and highly beneficial. By following these steps, you enhance your website’s security and credibility, providing a safer experience for your visitors.