Setting Up Jekyll with Chirpy Theme on GitHub and Hosting with Cloudflare Pages

Introduction

Creating a static website has never been easier, thanks to tools like Jekyll and hosting services like Cloudflare Pages. Jekyll is a popular static site generator that allows you to create websites with ease. In this guide, we’ll walk you through setting up a Jekyll site using the Chirpy theme and hosting it on Cloudflare Pages.

Prerequisites

Before you begin, make sure you have the following installed:

• Ruby (version 2.7.0 or higher)
• Bundler
• Git
• A GitHub account
• A Cloudflare account

Step 1: Fork the Chirpy Theme Repository

Go to the Chirpy theme repository on GitHub and click on the “Fork” button to create a copy of the repository in your GitHub account.

Step 2: Clone the Repository Locally

Once you’ve forked the repository, clone it to your local machine:

git clone https://github.com/<your-username>/jekyll-theme-chirpy.git
cd jekyll-theme-chirpy

Replace <your-username> with your GitHub username.

Step 3: Install Dependencies

In the cloned repository, you need to install the dependencies:

bundle install

Step 4: Configure Your Site

Open the _config.yml file in the root of your project directory and customise the settings as per your preferences. At a minimum, update the following:

• title: The title of your blog.
• author: Your name.
• url: The base URL of your site (e.g., https://.github.io).

Step 5: Build and Test Locally

To build and test your Jekyll site locally, run:

bundle exec jekyll serve

Open your browser and go to http://localhost:4000 to see your site in action.

Step 6: Push to GitHub

After you’ve customised and tested your site, push your changes back to GitHub:

git add .
git commit -m "Initial setup of Jekyll with Chirpy theme"
git push origin main

Step 7: Deploy to Cloudflare Pages

Log in to your Cloudflare account and go to Pages.

Click “Create a Project” and select “Connect to Git”.

Choose your GitHub repository that contains the Jekyll project.

Under Build Settings:

• Build Command: bundle exec jekyll build
• Build Output Directory: _site

Click “Save and Deploy”.

Cloudflare will now build and deploy your Jekyll site using the Chirpy theme.

Step 8: Custom Domain (Optional)

To use a custom domain with your Cloudflare Pages site:

In your Cloudflare dashboard, go to DNS. Add a CNAME record with your custom domain pointing to your Cloudflare Pages URL. Return to the Pages project and go to Custom Domains to add and verify your custom domain.

Conclusion

You’ve successfully set up a Jekyll site using the Chirpy theme and hosted it on Cloudflare Pages. This setup is perfect for creating a fast, static website with minimal effort. Enjoy your new blog, and don’t forget to share it with the world!