Skip to main content

Setting up Docusaurus with Cloudflare Pages and Zero Trust

This guide will walk you through the process of setting up your Docusaurus site on Cloudflare Pages and protecting it with Cloudflare Zero Trust.

Prerequisites​

  • A GitHub account
  • A Cloudflare account
  • Your Docusaurus project repository on GitHub

Step 1: Prepare Your Docusaurus Project​

  1. Ensure your Docusaurus project is properly configured and working locally.
  2. Push your project to a GitHub repository.

Step 2: Set Up Cloudflare Pages​

  1. Log in to your Cloudflare account.
  2. Navigate to the "Pages" section.
  3. Click "Create a project".
  4. Choose "Connect to Git" and select your GitHub repository.
  5. Configure your build settings:
    • Build command: npm run build
    • Build output directory: build
  6. Click "Save and Deploy".

Step 3: Configure Custom Domain (Optional)​

  1. In your Cloudflare Pages project, go to "Custom domains".
  2. Add your desired custom domain.
  3. Update your DNS settings to point to your Cloudflare Pages site.

Step 4: Set Up Cloudflare Zero Trust​

  1. In your Cloudflare account, go to "Zero Trust" > "Access".
  2. Click "Add an application".
  3. Choose "Self-hosted" as the application type.
  4. Configure your application:
    • Name: Choose a name for your Docusaurus site
    • Session Duration: Set as needed
    • Application Domain: Enter your Cloudflare Pages URL or custom domain
  5. Set up your access policies:
    • Click "Add a policy"
    • Name your policy
    • Choose who can access your site (e.g., specific email addresses, domains, or groups)
    • Configure additional settings as needed
  6. Save your application and policy.

Step 5: Update Cloudflare Pages Settings​

  1. Go back to your Cloudflare Pages project.
  2. Navigate to "Settings" > "Functions".
  3. Enable "Zone-level Access" to integrate with Zero Trust.

Step 6: Test Your Setup​

  1. Visit your Docusaurus site URL.
  2. You should be prompted to authenticate through Cloudflare Access.
  3. After successful authentication, you should see your Docusaurus site.

Maintenance and Updates​

  • To update your site, simply push changes to your GitHub repository. Cloudflare Pages will automatically rebuild and deploy your site.
  • Manage access policies and users through the Cloudflare Zero Trust dashboard.

Troubleshooting​

  • If your site isn't building correctly, check the build logs in Cloudflare Pages.
  • Ensure your docusaurus.config.ts file is correctly configured, especially the url and baseUrl fields.
  • If you're having issues with Zero Trust access, verify your policies and test with different authentication methods.

Important Notes on Build Process and Domain​

Separate from GitHub Actions​

It's important to note that this Cloudflare Pages build process is separate from any GitHub Actions.

  • The build process on Cloudflare Pages is triggered automatically when you push changes to your connected GitHub repository.
  • This build is independent of any GitHub Actions workflows you may have configured.
  • You won't see these Cloudflare Pages builds in GitHub Actions tab or logs.

Domain Reference​

Our Docusaurus site deployed on Cloudflare Pages can be accessed through the following domain:

  • Custom Domain URL: https://docs.onghost.com