It's MIKE! It's MIKE! but SMILING!
Complete Jekyll + GitHub + Cloudflare Setup Guide
⚙️

Full end-to-end guide for setting up your Jekyll website, pushing to a private GitHub repo, and deploying on Cloudflare Pages with enterprise security.

What is Jekyll, GitHub, and Cloudflare Pages?

Jekyll is a static site generator that transforms plain text into beautiful websites without a database. GitHub provides version control and private repository hosting for your project code. Cloudflare Pages is a lightning-fast JAMstack platform that automatically deploys your site whenever you push changes. Together, they create a secure, scalable, and maintenance-free publishing workflow perfect for developers who want full control over their web presence.

Part 1: Local Jekyll Setup (If You Haven’t Already)

Prerequisites

Step 1: Install Ruby (if needed)

On macOS:

brew install rbenv
rbenv init
# Close and reopen terminal
rbenv install 3.2.2
rbenv global 3.2.2
ruby --version

On Windows: Download and install from https://www.ruby-lang.org/en/downloads/

On Linux:

sudo apt-get install ruby-full build-essential zlib1g-dev
ruby --version

Step 2: Install Jekyll and Bundler

gem install jekyll bundler

Step 3: Create Your Jekyll Site (or use existing)

If you already have a Jekyll site, skip to Part 2. If creating new:

jekyll new my-jekyll-site
cd my-jekyll-site

Step 4: Ensure Gemfile is Configured

Your Gemfile should look like this:

source "https://rubygems.org"
gem "jekyll", "~> 4.3.0"
gem "minima", "~> 2.5"

group :jekyll_plugins do
  gem "jekyll-feed", "~> 0.12"
  gem "jekyll-seo-tag", "~> 2.8"
end

platforms :mingw, :x64_mingw, :mswin, :jemalloc do
  gem "tzinfo", ">= 1", "< 3"
  gem "tzinfo-data"
end

gem "wdm", "~> 0.1.1", platforms: [:mingw, :x64_mingw, :mswin]

Step 5: Test Locally

cd my-jekyll-site
bundle install
bundle exec jekyll serve

Visit http://localhost:4000 to verify everything works. Press Ctrl+C to stop the server.

Part 2: Create Gemfile.lock

This file is crucial for Cloudflare to build your site with the exact same dependencies.

cd /path/to/your/jekyll/site
bundle lock

This creates a Gemfile.lock file. Commit this to GitHub—Cloudflare needs it.

Part 3: Create GitHub Personal Access Token

You need a token to push code to GitHub from your PC.

  1. Go to https://github.com/settings/tokens
  2. Click Generate new token (classic)
  3. Name it something like “Jekyll Deploy”
  4. Under Select scopes, check:
    • repo (full control of private repositories)
    • workflow (optional, for CI/CD)
  5. Click Generate token at the bottom
  6. Copy the token immediately and save it somewhere safe (you won’t see it again)

Part 4: Create Private GitHub Repository

Step 1: Create the Repo

  1. Go to https://github.com/new
  2. Repository name: my-jekyll-site (or whatever you want)
  3. Description: “My Jekyll website” (optional)
  4. Visibility: Select Private
  5. Initialize this repository with: Leave all unchecked (don’t add README, .gitignore, or license)
  6. Click Create repository

Step 2: You’ll See Instructions

GitHub will show you a page with commands. We’ll use these in the next step.

Part 5: Push Your Jekyll Site to GitHub

Step 1: Navigate to Your Jekyll Site Directory

cd /path/to/your/jekyll/site

Step 2: Initialize Git and Push

Run these commands in order (replace YOUR_USERNAME with your GitHub username):

git init
git add .
git commit -m "Initial Jekyll site commit"
git branch -M main
git remote add origin https://github.com/YOUR_USERNAME/my-jekyll-site.git
git push -u origin main

Step 3: Authenticate with GitHub

When prompted for a password, paste your Personal Access Token (not your GitHub password).

Example interaction:

Username for 'https://github.com': YOUR_USERNAME
Password for 'https://YOUR_USERNAME@github.com': [paste your token here]

Step 4: Verify Upload

  1. Go to https://github.com/YOUR_USERNAME/my-jekyll-site
  2. You should see all your Jekyll files there
  3. Check that Gemfile and Gemfile.lock are both present

Part 6: Create Cloudflare Account & Connect Domain

Step 1: Create Cloudflare Account

  1. Go to https://dash.cloudflare.com/signup
  2. Sign up with email and password
  3. Verify your email

Step 2: Add Your Domain (or use free .pages.dev domain)

Option A: Use Free Cloudflare Domain

Option B: Add Your Own Domain

  1. In Cloudflare dashboard, click Add a domain
  2. Enter your domain name
  3. Select a plan (Free tier works great)
  4. Cloudflare will show you nameservers to add to your domain registrar
  5. Go to your domain registrar (Porkbun, GoDaddy, Namecheap, etc) and update nameservers
  6. Wait for propagation (5-30 minutes)
  7. Come back to Cloudflare and verify

Part 7: Connect GitHub to Cloudflare Pages

Step 1: Access Cloudflare Pages

  1. Go to https://dash.cloudflare.com
  2. In left sidebar, click Workers & Pages
  3. Click the Pages tab
  4. Click Connect to Git

Step 2: Authorize GitHub

  1. Click GitHub option
  2. You’ll be redirected to GitHub
  3. Click Authorize cloudflare (or Authorize Cloudflare)
  4. You may need to select which repositories Cloudflare can access—select your Jekyll repo
  5. Approve and return to Cloudflare

Step 3: Select Repository

  1. In the Cloudflare dashboard, under Select a repository, find and click your Jekyll repo (my-jekyll-site)
  2. Click Begin setup

Step 4: Configure Build Settings

You’ll see a form with these fields. Fill them in exactly:

Step 5: Set Environment Variables

Click Environment variables to expand it.

Add one variable:

Click Save to add the variable.

Step 6: Deploy

  1. Click Save and Deploy
  2. Cloudflare will start building your site (this takes 1-2 minutes)
  3. You’ll see a build log—look for “Build complete” message
  4. Once complete, you’ll get a unique URL like my-jekyll-site.pages.dev

Step 7: Test Your Site

Click the URL provided. Your Jekyll site should be live!

Part 8: Connect Custom Domain (Optional)

If you added your own domain in Part 6:

  1. In Cloudflare Pages, go to your project settings
  2. Click Custom domains
  3. Click Set up a custom domain
  4. Enter your domain name
  5. Add DNS records as shown
  6. SSL certificate automatically provisions in 5-10 minutes

Part 9: Enterprise-Grade Security Configuration

Step 1: Enable HTTPS Everywhere

  1. Go to your Cloudflare dashboard → select your domain
  2. Click SSL/TLS in left sidebar
  3. Set SSL/TLS encryption mode to Full (Strict)
  4. Go to SSL/TLS → Edge Certificates
  5. Toggle Always use HTTPS → ON
  6. Toggle Automatic HTTPS Rewrites → ON
  7. Toggle HSTS → ON
    • Set Max Age Header to 31536000 (1 year)
    • Check Include subdomains
    • Check Preload

Step 2: Web Application Firewall (WAF)

  1. Click Security → WAF
  2. Under Managed rulesets, click Cloudflare Managed Ruleset
  3. Toggle it ON
  4. Scroll down and toggle OWASP ModSecurity Core Rule Set → ON
  5. Go back and toggle Additional Protection Rules → ON

Step 3: DDoS Protection

  1. Click Security → DDoS
  2. Set DDoS Sensitivity Level to High

Step 4: Bot Management

  1. Click Security → Bots
  2. Toggle Bot Fight Mode → ON (free, included)

Step 5: Security Headers

  1. Click Rules in left sidebar
  2. Click Transform Rules → Modify Response Header
  3. Click Create rule

Create rules to add these headers:

Rule 1:

Rule 2:

Rule 3:

Rule 4:

Step 6: Content Security Policy (Optional but Recommended)

  1. In Transform Rules → Modify Response Header
  2. Click Create rule

Rule:

Step 7: Caching for Performance

  1. Click Caching in left sidebar
  2. Click Cache Rules
  3. Click Create rule

Rule for Static Assets:

Rule for HTML:

Step 8: Enable Compression & Minification

  1. Click Speed in left sidebar
  2. Click Optimization
  3. Under Minification, toggle ON:
    • Minify HTML
    • Minify CSS
    • Minify JavaScript

Part 10: Making Changes to Your Site

From now on, your workflow is super simple:

To Update Your Site:

  1. Make changes to your Jekyll site locally on your PC

  2. Test locally:

     bundle exec jekyll serve

  3. Commit and push to GitHub:

     git add .git commit -m "Updated homepage"git push origin main
  4. Cloudflare automatically detects the push, rebuilds your site, and deploys it (takes 1-2 minutes)
  5. Your live site updates automatically

You never have to touch Cloudflare’s dashboard again unless you want to tweak security settings.

Part 11: Troubleshooting

Build fails with “Gemfile not found”

Build fails with Ruby version error

Site looks broken (missing CSS/images)

GitHub authentication keeps failing

Cloudflare won’t connect to GitHub repo

Site is slow

Security Checklist

Before going live, verify:

Useful Commands Reference

Check Ruby version:

ruby --version

Check if Git is installed:

git --version

View Git remote:

git remote -v

Check Git status:

git status

View local commits:

git log --oneline

Push to GitHub:

git push origin main

Pull from GitHub:

git pull origin main

Create a new branch (for experiments):

git checkout -b my-feature-branch
git push origin my-feature-branch

Resources

Pulled from my Obsidian notes

Top