Cloudflare Pages Deployment
This document provides detailed instructions for deploying the L2 Support Tools & Documentation site to Cloudflare Pages using GitHub integration.
Overview
Cloudflare Pages is a JAMstack platform for frontend developers to collaborate and deploy websites. It offers:
- Continuous deployment from Git
- Global CDN distribution
- Free SSL certificates
- Custom domains
- Access control via Cloudflare Access (ZeroTrust)
Prerequisites
- A Cloudflare account
- Admin access to the GitHub repository
- Node.js 18.x or higher (specified in the Cloudflare build environment)
Deployment Steps
1. Connect GitHub Repository to Cloudflare Pages
- Log in to the Cloudflare Dashboard
- Navigate to Pages in the sidebar
- Click Create a project
- Select Connect to Git
- Authenticate with GitHub if prompted
- Select the L2Toolbox repository from the list
2. Configure Build Settings
Configure the following build settings:
| Setting | Value |
|---|---|
| Project name | l2-support-tools (or your preferred name) |
| Production branch | main (or your preferred branch) |
| Build command | npm install && npm run build |
| Build output directory | build |
| Root directory | / (leave as default) |
3. Environment Variables (Optional)
Add the following environment variables if needed:
| Variable | Value | Description |
|---|---|---|
| NODE_VERSION | 18 | Ensures Node.js 18.x is used during build |
4. Advanced Settings (Optional)
- Preview Deployments: Enable to create preview deployments for pull requests
- Production Deployments: Configure automatic deployments when changes are pushed to the main branch
- Build Cache: Enable to speed up builds by caching dependencies
5. Deploy
Click Save and Deploy to start the initial build and deployment process.
Post-Deployment Configuration
Custom Domain (Optional)
- In the Cloudflare Pages project, go to Custom domains
- Click Set up a custom domain
- Enter your domain name and follow the instructions
Access Control with Cloudflare Access
To implement ZeroTrust access control:
- Navigate to Access in the Cloudflare dashboard
- Create a new application
- Set the application domain to your Cloudflare Pages URL
- Configure access policies to restrict access to authorized users:
- Email domains
- Individual email addresses
- Identity provider groups
- etc.
Automatic Deployments
Once configured, Cloudflare Pages will automatically:
- Detect changes pushed to the configured branch
- Trigger a new build
- Deploy the updated site to the global CDN
No manual deployment steps are required after the initial setup.
Troubleshooting
Build Failures
If a build fails:
- Check the build logs in the Cloudflare Pages dashboard
- Verify that the build command and output directory are correct
- Ensure all dependencies are properly specified in package.json
- Check for any environment-specific code that might not work in the Cloudflare build environment
Access Issues
If users cannot access the site:
- Verify Cloudflare Access policies are correctly configured
- Check that users are authenticating with the correct credentials
- Review Access logs for failed authentication attempts