Learn how to deploy MoonTV, a powerful streaming aggregator, on Cloudflare Pages for free with zero coding. Step-by-step guide covers setup, custom domain, and troubleshooting.

🔍 Stunning Features of MoonTV

MoonTV is not just an ordinary player — it packs these powerful capabilities:

  • Multi-source aggregated search: One query pulls results from dozens of resource sites
  • Smart ad-skipping: Automatically skips mid-video ad segments (experimental)
  • Full platform support: PWA delivers a native mobile experience and can be installed to your home screen
  • Watch progress sync: Favorites and playback progress synced across devices
  • Douban-style detail pages: Complete episode lists, cast, year, and synopsis
  • Adaptive interface: Desktop sidebar + mobile bottom nav, perfectly tailored for any device

Project URL: https://github.com/senshinya/MoonTV

☁️ Why Choose Cloudflare Pages?

  • Forever free: 100,000 visits per month included
  • Global CDN acceleration: Up to 200% faster access
  • No credit card required: Truly zero cost
  • Automatic HTTPS: Secure encrypted connections
  • Easy to use: Graphical interface, click-and-go

🚀 Five-Step Deployment Guide

Step 1: Get the MoonTV source code

Step 2: Enter the Pages dashboard

  • Log in to the Cloudflare dashboard
  • Find "Workers & Pages" in the left sidebar and click it
  • Click the blue "Create application" button at the top
  • Select the "Pages" tab

Step 3: Connect your GitHub repository

  • Click "Connect to Git"
  • Choose GitHub as the source
  • Authorize Cloudflare to access your GitHub account
  • Find your forked MoonTV repository in the list (named: your-username/MoonTV)
  • Click "Begin setup"

Step 4: Project configuration (critical step)

  • Project name: Enter a custom name (e.g. my-moontv)
  • Production branch: Keep it as main
  • Build settings:
  • Framework preset: Select "None"
  • Build command: Copy and paste:
pnpm install --frozen-lockfile && pnpm run pages:build
  • Build output directory: Fill in:
.vercel/output/static
  • Expand "Environment variables (advanced)" but leave it blank for now
  • Click "Save and Deploy"

Step 5: Configure environment variables (after initial deployment)

  • Wait for the initial deployment to finish (about 3 minutes)
  • On the project overview page, click "Settings" in the top nav
  • Choose "Functions" from the left menu
  • Find the "Compatibility flags" section:
  • Click "Add compatibility flag"
  • Enter: nodejs_compat
  • Click "Save"
  • Back on the settings page, choose "Environment variables" from the left
  • Click "Add variable" and select type "Secret":
Variable name: PASSWORD
Value: Enter your access password (recommend 10+ mixed characters)
  • Click "Save"

Step 6: Trigger a redeploy

  • Return to the project "Overview" page
  • Click the "Retry deployment" button in the top-right
  • Wait for the deployment to complete (status will change to "Production deployment")

Step 7: Visit your site

  • On the overview page, find the "Production deployment" section
  • Copy the link under "Your site is now live" (format: xxx.pages.dev)
  • Enter your PASSWORD on first visit
  • You'll land on the MoonTV main interface!

🌐 Detailed Steps for Binding a Custom Domain

Prerequisites:

  • You own a domain (e.g. example.com)
  • The domain is already managed in Cloudflare (if not, add the site first)

Workflow:

  • On your Pages project page, click "Custom domains" at the top
  • Click "Set up a custom domain"
  • Enter the subdomain you want to bind (e.g. tv.example.com)
  • Choose your scenario:
  • Scenario 1: Domain already in Cloudflare
  • DNS records are added automatically
  • SSL certificate is issued automatically
  • Wait a few minutes to take effect
  • Scenario 2: Domain not in Cloudflare
Step 1: At your domain registrar (e.g. Alibaba Cloud), add a CNAME record:
 Host: tv (or another prefix)
 Type: CNAME
 Value: xxx.pages.dev (your Pages domain)
 TTL: 600

Step 2: Return to Cloudflare and click "Verify"
Step 3: Wait for the SSL certificate to be issued automatically (about 5 minutes)
  • Success message:
✅ tv.example.com is now active
SSL status: Valid (green checkmark)

Advanced settings:

  • Force HTTPS: Enable it in "Custom domains" settings
  • Redirect rules: Set up www redirects in "Page Rules"
  • Cache configuration: Recommend keeping the default "Cache everything"

🎉 Visit Your Personal Streaming Site

Once deployed, enter the domain you just configured in your browser to access the video site.

You'll see the clean MoonTV interface:

  • Search bar at the top to find shows and movies
  • Categories on the left to switch between movies, TV series, and variety shows
  • Click any title to start playback

❓ Frequently Asked Questions

Q: Do I need to know how to code?
A: Not at all! Just follow the tutorial and click the buttons.

Q: Will I be charged?
A: Cloudflare Pages' free tier is more than enough (100,000 visits per month).

Q: How do I update the content?
A: When the upstream project is updated, click Sync fork on your forked repository.

Q: Can I customize the interface?
A: Yes! Edit the Vue files under /src on GitHub (basic frontend knowledge required).

💡 Advanced Tips

  • Enable auto-updates
    Add this environment variable in the build/deploy settings:
NODE_VERSION = 18
  • Fix playback issues
    If you hit a playback error, try switching the "Data source" in the settings.

⚠️ Troubleshooting Guide

IssueSolution
Deployment fails (build error)Check that the build command is copied completely, watch for spaces
Site prompts "Password required"1. Confirm the PASSWORD secret variable is set 2. Make sure you ran "Retry deployment"
Player fails to loadIn Settings > Functions, confirm nodejs_compat is enabled
Domain resolution errorCheck whether the DNS record is active: dig tv.yourdomain.com +short
SSL certificate issueIn SSL/TLS settings, set encryption mode to "Full"

📱 Mobile Optimization Settings

  • Enable PWA:
  • On your first visit, the browser will prompt "Add to Home Screen"
  • Enable "Offline cache" in the settings
  • Touch optimization:
// Add to config.json
"touchConfig": {
 "swipeThreshold": 50,
 "doubleTapTimeout": 300
}
  • Mobile data savings:
  • Enable "Mobile network compression" in playback settings
  • Set automatic quality switching

💡 Tip: After deployment, it's recommended to configure your GitHub repository:

  • Go to your MoonTV repository > Settings > Actions > General
  • Enable "Read and write permissions"
  • This allows automatic syncing of upstream updates

Wrapping Up

With Cloudflare Pages, we easily achieved:
✅ Zero-cost deployment of a streaming website
✅ No server maintenance required
✅ Global CDN-accelerated access

Go build your personal streaming library now! If you run into any issues, feel free to open an issue on MoonTV's GitHub repository for discussion.

Project URL: https://github.com/senshinya/MoonTV
Cloudflare Pages: https://pages.cloudflare.com

Note: This is the English translation of the original Chinese version.