Deploy ListLog to Cloudflare Pages

Cloudflare Pages works with both GitHub and GitLab repositories. Set up your ListLog repository first:

Option 1: Clone from GroupList

# Clone the official ListLog repository
git clone https://github.com/grouplist/listlog.git my-blog
cd my-blog

# Update remote to your repository
git remote set-url origin https://github.com/yourusername/my-blog.git
git push -u origin main

Option 2: Fork on GitHub

1. Go to github.com/grouplist/listlog
2. Click "Fork" to create your own copy
3. Clone your forked repository locally
4. Customize the configuration and content

Update your listlog.config.json for optimal Cloudflare Pages performance:

{
  "site": {
    "name": "My Cloudflare Blog",
    "description": "Lightning-fast blog powered by ListLog and Cloudflare",
    "url": "https://yourdomain.com",
    "author": "Your Name",
    "language": "en"
  },
  "build": {
    "postsPerPage": 15,
    "excerptLength": 200,
    "generateSitemap": true,
    "generate404": true,
    "generateRobotsTxt": true
  },
  "rss": {
    "enabled": true,
    "maxItems": 50
  },
  "cloudflare": {
    "enableEdgeFunctions": true,
    "analytics": true,
    "webVitals": true
  },
  "performance": {
    "enableCompression": true,
    "optimizeImages": true,
    "preloadCriticalCSS": true
  }
}

Add Cloudflare-Specific Files

Create _headers file for custom headers:

# _headers file for Cloudflare Pages
/*
  X-Frame-Options: DENY
  X-Content-Type-Options: nosniff
  X-XSS-Protection: 1; mode=block
  Referrer-Policy: strict-origin-when-cross-origin
  Permissions-Policy: camera=(), microphone=(), geolocation=()
  Content-Security-Policy: default-src 'self'; script-src 'self' 'unsafe-inline' https://static.cloudflareinsights.com; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:

/assets/*
  Cache-Control: public, max-age=31536000, immutable

/*.html
  Cache-Control: public, max-age=0, must-revalidate

/feed.xml
  Cache-Control: public, max-age=3600

/sitemap.xml
  Cache-Control: public, max-age=86400

Create _redirects file for URL management:

# _redirects file for Cloudflare Pages
# Redirect old URLs if migrating from another platform
/blog/* /:splat 301
/posts/* /:splat 301

# Redirect RSS feeds
/rss /feed.xml 301
/rss.xml /feed.xml 301

# Pretty URLs (handled by ListLog's structure)
# Cloudflare Pages automatically serves /folder/index.html for /folder/

Connect your repository to Cloudflare Pages:

Step 1: Create Cloudflare Pages Project

1. Log in to Cloudflare Dashboard
2. Go to Pages in the left sidebar
3. Click "Create a project"
4. Click "Connect to Git"
5. Authorize Cloudflare to access your GitHub/GitLab account
6. Select your ListLog repository

Step 2: Configure Build Settings

Step 3: Environment Variables (Optional)

Set environment variables for build customization:

• NODE_VERSION = 18
• NPM_VERSION = latest
• ENABLE_ANALYTICS = true

Step 4: Deploy

1. Click "Save and Deploy"
2. Watch the build process in real-time
3. Your site will be available at https://your-project.pages.dev

Connect your custom domain to Cloudflare Pages:

Option 1: Domain on Cloudflare (Recommended)

1. Add your domain to Cloudflare:
   • Go to Cloudflare Dashboard → Websites
   • Click "Add a site"
   • Enter your domain and follow the setup wizard
   • Update nameservers at your registrar
2. Connect to Pages:
   • Go to Pages → Your Project → Custom domains
   • Click "Set up a custom domain"
   • Enter your domain (e.g., blog.yourdomain.com)
   • DNS records are automatically configured

Option 2: External Domain

If your domain is not on Cloudflare, add these DNS records:

SSL Certificate

Cloudflare automatically provisions SSL certificates:

• Universal SSL — Free SSL for all domains
• Advanced Certificate Manager — Custom certificates (paid plans)
• Automatic renewal — No manual intervention required

Analytics and Web Vitals

Enable advanced analytics for your blog:

1. Go to Pages → Your Project → Analytics
2. Enable Web Analytics for visitor tracking
3. Turn on Core Web Vitals monitoring
4. View real-time performance metrics

Edge Functions (Beta)

Add serverless functionality to your static blog:

// functions/api/views.js - Track page views
export async function onRequest(context) {
  const { request, env } = context;
  const url = new URL(request.url);
  const page = url.searchParams.get('page') || '/';
  
  // Store view count in KV storage
  const viewKey = `views:${page}`;
  const currentViews = await env.VIEWS.get(viewKey) || '0';
  const newViews = parseInt(currentViews) + 1;
  await env.VIEWS.put(viewKey, newViews.toString());
  
  return new Response(JSON.stringify({ views: newViews }), {
    headers: { 'Content-Type': 'application/json' }
  });
}

Image Optimization

Automatically optimize images with Cloudflare Images:

• Auto-resize based on device
• Format conversion (WebP, AVIF)
• Lazy loading for better performance
• Quality optimization without visual loss

Speed Optimizations

Enable Cloudflare's performance features:

• Auto Minify — CSS, JS, and HTML compression
• Brotli Compression — Better than gzip
• HTTP/3 — Latest protocol support
• Early Hints — Preload critical resources

Build Optimization

Create wrangler.toml for advanced build settings:

[build]
command = "npm run build"
cwd = "."
watch_dir = "posts"

[build.environment_variables]
NODE_VERSION = "18"
ENABLE_CLOUDFLARE_ANALYTICS = "true"

[[build.upload.rules]]
type = "include"
globs = ["dist/**/*"]

[[build.upload.rules]]
type = "exclude" 
globs = ["dist/**/*.map"]

Preview Deployments

Cloudflare Pages creates preview URLs for every branch:

• Pull Request previews — Test changes before merging
• Branch deployments — Separate URLs for each branch
• Rollback capability — Instantly revert to previous versions

Security Rules

Enhance security with Cloudflare's WAF:

• DDoS protection — Automatic mitigation
• Bot management — Block malicious crawlers
• Rate limiting — Prevent abuse
• Geo-blocking — Restrict by country

Caching Strategy

// Page Rules for optimal caching
# Static assets (CSS, JS, images)
/assets/* — Cache Level: Cache Everything, Edge TTL: 1 month

# HTML pages
/*.html — Cache Level: Standard, Edge TTL: 4 hours

# RSS and Sitemap
/feed.xml — Cache Level: Standard, Edge TTL: 1 hour
/sitemap.xml — Cache Level: Standard, Edge TTL: 1 day

Real User Monitoring (RUM)

Track real visitor performance:

• Core Web Vitals — LCP, FID, CLS metrics
• Page Load Times — Full page loading analysis
• Geographic Performance — Speed by location
• Device Performance — Mobile vs desktop metrics

Cloudflare Analytics

Built-in analytics without third-party scripts:

• Pageviews and visitors — Privacy-focused tracking
• Top pages and referrers — Content performance
• Geographic data — Visitor locations
• Threat analytics — Security events

Speed Test Integration

Automated performance testing:

# Add to your CI/CD pipeline
name: Performance Test
on: [push]

jobs:
  lighthouse:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v4
    - name: Audit URLs using Lighthouse
      uses: treosh/lighthouse-ci-action@v9
      with:
        urls: |
          https://yourdomain.com
          https://yourdomain.com/welcome/
        configPath: './lighthouserc.json'

Common Build Issues

Your ListLog blog is now powered by Cloudflare's global network! Here's what to do next:

Immediate Actions

• Test your site — Verify all pages load correctly
• Set up analytics — Enable Web Analytics in Cloudflare
• Configure caching — Optimize cache rules for performance
• Enable security features — Turn on DDoS protection and WAF

Optimization

• Monitor Core Web Vitals — Track real user performance
• Set up Edge Functions — Add dynamic functionality
• Implement image optimization — Use Cloudflare Images
• Configure Workers — Advanced edge computing

Content Strategy

• Write regularly — Publish new posts consistently
• Optimize for search — Use good SEO practices
• Monitor performance — Track visitor engagement
• Scale globally — Leverage Cloudflare's CDN