Introduction

Hosting a Jekyll blog on GitHub Pages allows you to leverage GitHub’s servers, while CloudFlare can provide additional security and performance enhancements. This guide will show you how to deploy your Jekyll theme to a custom domain using both platforms.

Step 1: Create a CNAME File

First, you need to create a CNAME file that GitHub Pages will use to route your custom domain to your GitHub-hosted site.

  1. Open your favorite text editor.
  2. Type your custom domain name, for example:
www.yourcustomdomain.com
  1. Save the file as CNAME without any extension.
  2. Upload this file to the root of your gh-pages branch on GitHub.

Step 2: Configure DNS Settings in CloudFlare

To point your custom domain to your GitHub-hosted Jekyll theme, you’ll need to configure your DNS settings in CloudFlare:

  1. Log in to your CloudFlare account.
  2. Select your domain.
  3. Navigate to the DNS settings page.
  4. Add the following A records pointing to GitHub’s IP addresses:
Type: A
Name: www
Value: 192.30.252.153

Type: A
Name: www
Value: 192.30.252.154

Ensure that the CloudFlare proxy status (orange cloud icon) is enabled for these records to take advantage of CloudFlare’s performance and security features.

Step 3: Verify and Celebrate

After updating your DNS settings, it can take anywhere from a few minutes to 48 hours for changes to propagate across the internet. Once the DNS changes have taken effect, your custom domain should properly display your Jekyll site hosted on GitHub.

Congratulations! Your website is now hosted on GitHub with a custom domain secured by CloudFlare.

By following these steps, you have successfully deployed your Jekyll theme to a custom domain using GitHub and CloudFlare, enhancing your site’s security and loading speed. Enjoy the benefits of a professionally managed domain with the simplicity of GitHub Pages.