Skip to content

webTuyo Cloudflare Worker Setup Guide

1. Import the Repository

  1. Go to github.com/new/import.
  2. copy this Repository URL: https://github.com/webtuyo/webTuyo-worker-builder.git and paste it into the source repository URL to clone the repository that contains all the code and actions needed to create the worker.
    This worker will allow you to use cloud functions — to save, edit, and share projects in the cloud, leveraging GitHub features.
  3. Give your repository a name.
  4. Select Private, and click Begin Import.

2. Add Cloudflare Secrets

  1. Once the import is complete, click Settings.
  2. Go to Secrets and Variables → Actions.
  3. Click New Repository Secret.
  4. Set the name to CLOUDFLARE_ACCOUNT_ID.

Get Your Cloudflare Account ID

  1. Go to your Cloudflare dashboard and copy your Account ID — it’s visible in the browser’s address bar.
  2. Paste it into the secret field and click Add Secret.

3. Create a Cloudflare API Token

  1. In Cloudflare, make sure you’re using the new sidebar interface.
  2. Click Manage Account → Account API Tokens.
  3. Click Create Token, choose Custom Token, and then Get Started.

Add Permissions

Resource Permission
Account, D1 Edit
Workers KV Storage Edit
Workers Scripts Edit
  1. Give your token a name, set an expiration date (recommended), then click Continue to Summary, and finally Create Token.
  2. Copy the token you’ve just created.

Add the Token to GitHub

  1. Go back to your GitHub repository secrets.

  2. Add a new secret:

  3. Name: CLOUDFLARE_API_TOKEN

  4. Secret: paste the token

  5. Click Add Secret.

4. Deploy the Worker

  1. Go to Actions.
  2. Select Deploy webTuyo Cloudflare Worker.
  3. Click Run Workflow, choose a name for your worker, and click Run Workflow again.
  4. Wait for the workflow to complete.
  5. Once it’s done, open your Cloudflare dashboard — you’ll see that the worker has been installed.

5. Organize with GitHub Organizations

All your project files saved in the cloud section of the web builder are stored on your GitHub account.
To keep things organized — especially if you plan to host multiple websites — it’s recommended to create a GitHub Organization, one for each website.

  1. Go to GitHub → Organizations → Create a Free Organization.
  2. Give it a name, then click Next and complete the setup.

Create Teams

  1. Inside your new organization, go to Teams → New Team:
  2. Name: App

  3. Click Create Team.

  4. Create another:

  5. Name: Design
  6. Click Create Team.

Team Access

  • Members of the App Team can access the Editor at app.webtuyo.com.
  • Members of the Design Team can access the Designer at design.webtuyo.com.
  • Members of both teams can access both tools.

6. Create a Personal Access Token

  1. In your organization, go to Settings → Personal Access Token.

  2. Uncheck “Fine-grained personal access tokens must expire,” and click Save.

  3. Then go to Settings → Developer Settings → Personal Access Tokens → Fine-grained Tokens, and click Create New Token.

  4. Give your token a name.

  5. Make sure your organization is selected as the resource owner (important).
  6. Set expiration to No Expiration.

Repository Access

Select All Repositories and add the following permissions:

Permission Access
Actions Read & Write
Administration Read & Write
Contents Read & Write
Discussions Read & Write
Pages Read & Write
Workflows Read & Write

Organization Permissions

Permission Access
Administration Read Only
Team Discussions Read Only
  1. Click Generate Token.
  2. Copy the token you’ve just created.

7. Configure Worker Variables

Go back to your Cloudflare worker, then:

  1. Edit the variable GITHUB_TOKEN
  2. Value: paste the token
  3. Type: Secret

  4. Click Deploy.

  5. Copy your GitHub organization name, paste it into the variable GITHUB_OWNER, and click Deploy.

  6. Copy your worker address, paste it into the variable WORKER_ADDRESS, and click Deploy again.

8. Register a GitHub OAuth App

  1. Go to your GitHub organization.
    Settings → Developer Settings → OAuth Apps → New OAuth App.
  2. Fill out the form:
  3. App Name: any name you like
  4. Homepage URL: https://app.webtuyo.com
  5. Authorization callback URL:
    [your worker address]/api/auth/github/callback

  6. Enable Device Flow, then click Register Application.

  7. Copy the Client ID, then go to your Cloudflare worker settings.

  8. Edit the variable CLOUDFLARE_ACCOUNT_ID → paste the Client ID → click Deploy.

  9. In GitHub, click Generate New Client Secret.

  10. Copy the secret, and paste it into the variable GITHUB_OAUTH_CLIENT_SECRET in your worker settings.
  11. Click Deploy.

9. Connect the Worker to webTuyo

  1. Copy your worker’s address again.
  2. Go to webTuyo Designer → Cloud → Your Cloud, and paste your worker’s address.
  3. You can now log in. Click Continue to Login.

10. Using Online Backups

  1. After logging in, open Online Backups → Shared.
    The first time you do this, it automatically creates two repositories inside your GitHub organization:
  2. wt_private

  3. wt_public

  4. To save a project to the cloud (your private repository):

  5. Click Create a New Online Backup
  6. Give your project a name

  7. Click Save

  8. Check your private repository (wt_private) — you’ll find a Backup folder containing the file you just saved.

11. Sharing Projects

  1. To share a file publicly:
  2. Click the file under Online Backups
  3. Click Share

This creates a copy in your public repository (wt_public).

  1. All shared project files appear under Shared in the web builder.
    In GitHub, open your organization’s wt_public repository → Shared folder → you’ll see the shared files.
  1. Click the file you want to share.
  2. Click Link Preview.

  3. Copy the link and open it in your browser — or share it with others.

  4. Updates are automatically applied to shared files.

  5. Editing a public file does not change the original private one.
  6. To create multiple versions, simply create new files and share each one separately.

12. Connect Free Images via Pexels API

  1. Go to pexels.com and create an account.
  2. Click Image and Video API → fill out the form → click Generate API Key.
  3. Copy your key.
  4. Go to your Cloudflare worker settings → edit variable PEXELS_API_KEY → paste the key → set as Secret → click Deploy.

You can now use and search Pexels images directly inside the web builder.

13. Integrate AI Models via OpenRouter

  1. Go to openrouter.ai and create an account.
  2. Add credits.
  3. Go to Keys → Create API Key.
  4. Give the key a name, set a credit limit (recommended), and click Create.

  5. Copy the key.

  6. Go back to your Cloudflare worker settings → edit variable OPENROUTER_API_KEY → paste the key → set as Secret → click Deploy.

  7. Refresh the web builder and log in again — you’ll now see a new AI button.

14. Using AI in the Builder

  • The AI can generate new sections, pick matching images from Pexels, and automatically translate text into all available languages.
  • The quality of the response depends on the model you select — lighter or cheaper models may give lower-quality results.

You’re all set! 🎉
Your cloud-enabled, AI-integrated webTuyo builder is ready to use.