GitHub Pages: Custom Domains and SSL

Welcome to the ninth blog of the series!
In the last blog we created our first website with GitHub Pages.
It was deployed on the domain .github.io, but did you know that you can use a custom domain name for your GitHub Pages site? In addition, you can secure your website with SSL (Secure Sockets Layer) to ensure a safe and encrypted connection. In this blog post, we will explore how to set up a custom domain and enable SSL for your GitHub Pages site.

Prerequisites

Before we begin, make sure you have the following:

1. A GitHub account. You can create one for free at github.com.
2. A registered domain name from a domain registrar (e.g., Namecheap, GoDaddy).

Setting Up a Custom Domain

To use a custom domain name for your GitHub Pages site, follow these steps:

GitHub Pages: Custom Domains and SSL
GitHub Pages provides a convenient way to host your static websites, but did you know that you can use a custom domain name for your GitHub Pages site? In addition, you can secure your website with SSL (Secure Sockets Layer) to ensure a safe and encrypted connection. In this blog post, we will explore how to set up a custom domain and enable SSL for your GitHub Pages site.

Prerequisites

Before we begin, make sure you have the following:

1. A GitHub account. You can create one for free at github.com.
2. A registered domain name from a domain registrar (e.g., Namecheap, GoDaddy).

To register your domain you can use the free domain TLD's available from the GitHub Student Developer Pack. For more information you can refer the blog below.

Setting Up a Custom Domain

To use a custom domain name for your GitHub Pages site, follow these steps:

1. Log in to your domain registrar's website and locate the DNS management settings for your domain.
2. Add a CNAME record for your custom domain. The CNAME value should be <your-username>.github.io, where <your-username> is your GitHub username.
3. Save the DNS changes and wait for the DNS propagation to take effect. This may take some time, usually up to 24 hours.

Once the DNS changes have propagated, you can proceed with configuring your GitHub repository to use the custom domain.

1. Go to your GitHub repository's page.
2. Click on the "Settings" tab.
3. Scroll down to the "GitHub Pages" section.
4. In the "Custom domain" field, enter your custom domain name (e.g., www.yourdomain.com).
5. Click on the "Save" button.

GitHub Pages will automatically configure the necessary settings to associate your custom domain with your repository. You can now access your GitHub Pages site using your custom domain.

Enabling SSL for Custom Domains

Enabling SSL (Secure Sockets Layer) for your custom domain ensures that your website is accessed securely over HTTPS. To enable SSL for your GitHub Pages site, you can use a service like Cloudflare or GitHub's Automated Certificate Management (ACM).

Using Cloudflare for SSL

1. Sign up for a Cloudflare account.
2. Add your custom domain to Cloudflare and follow their instructions to set up your DNS.
3. Once your custom domain is set up on Cloudflare, go to the "SSL/TLS" section.
4. Choose the SSL/TLS encryption mode to "Full" or "Full (Strict)".
5. Cloudflare will automatically provide an SSL certificate for your domain.

Using GitHub's Automated Certificate Management (ACM)

GitHub's ACM provides a simple way to enable SSL for your custom domain directly through your GitHub repository settings. Here's how to enable it:

1. Go to your GitHub repository's page.
2. Click on the "Settings" tab.
3. Scroll down to the "GitHub Pages" section.
4. In the "Custom domain" field, enter your custom domain name (e.g., www.yourdomain.com).
5. Click on the "Enforce HTTPS" checkbox.

GitHub will automatically generate and manage an SSL certificate for your custom domain, allowing your site to be accessed securely over HTTPS.

Verifying SSL

To verify that SSL is enabled for your custom domain, you can visit your website using the HTTPS protocol. For example, enter https://www.yourdomain.com in your web browser. If the website loads without any security warnings, SSL is successfully enabled.

Conclusion

Setting up a custom domain and enabling SSL for your GitHub Pages site can significantly enhance its professional appearance and security. By following the steps outlined in this blog post, you can easily configure your custom domain and ensure secure access to your website. Whether you're showcasing a personal portfolio or hosting a project website, custom domains and SSL provide a seamless and secure experience for your visitors. Start leveraging the power of custom domains and SSL with GitHub Pages and elevate your online presence!

Thank you for reading and do let me know your thoughts in comments!

Connect With Me :

Website | Twitter | Instagram | Mail