Aller au contenu

WebTuyo Installation Guide — Part 2

Step 1 — Create a Cloudflare Pages Application

  1. Go to your Cloudflare dashboard, under Workers and Pages.
  2. Click “Create Application.”
  3. Select Pages, under Import and Existing Git Repository, click “Get Started.”
  4. Click “Connect to GitHub.”
  5. Choose your organization.
  6. Under permissions, select “Only selected repositories.”
  7. Choose the repository that ends with _wt_public.
  8. Click “Install and Authorize.”
  9. Once authorized, select the wt_public repository again.
  10. In Build Settings, open Root directory (advanced).
  11. In the path field, type public.
  12. Click “Save and Deploy.”

Wait for the deployment process to finish,
then click “Continue to Project.”

Step 2 — Configure Build and Branch Settings

  1. Go to Settings.
  2. Under Branch Control, uncheck “Enable automatic production branch deployment.”
  3. In Preview Branch, select “None.”
  4. Click “Save.”

Step 3 — Create a Deploy Hook

  1. Go to Deploy Hooks.
  2. Click “+” to create a new hook.
  3. Give the webhook a name.
  4. Select main in Branch to build.
  5. Click “Save.”
  6. Click the copy button to copy the webhook URL.
  7. Go to your Worker settings (from Installation Part 1).
  8. Edit the variable CLOUDFLARE_PAGE_DEPLOY_HOOK_URL.
  9. Paste the URL into the Value field.
  10. Click Deploy.

Step 4 — Set Up a Custom Subdomain

Before continuing, make sure your domain is already added to your Cloudflare account.

  1. Go to Workers & Pages, select the project you just created.
  2. Open Custom Domains, then click “Set up a custom domain.”
  3. In the field, type static. followed by your domain.
  4. Click “Continue.”
  5. Click “Activate Domain.”
  6. Wait for the process to complete (usually within 15 minutes).

Once done:

  1. Go back to your Worker settings from Installation Part 1.
  2. Edit the variable CLOUDFLARE_PAGES_URL.
  3. Set the value to your subdomain — starting with https:// and with no spaces.
  4. Click Deploy.

Step 5 — Import a New Repository

  1. Go to github.com/new/import.
  2. Copy this repository URL : https://github.com/webtuyo/webtuyo-worker-view.git and paste it into the source repository URL.
  3. Give your repository a name.
  4. Set visibility to Private.
  5. Click “Begin Import.”
  6. Wait for the import to complete.

Then:

  1. Go to your Cloudflare dashboard.
  2. Copy your Account ID (from the browser’s address bar).
  3. Return to your new GitHub repository.
  4. Go to Settings → Secrets and variables → Actions.
  5. Click “New repository secret.”
  6. Set Name: CLOUDFLARE_ACCOUNT_ID.
  7. Paste your Account ID into the Secret field.
  8. Click “Add Secret.”

Step 6 — Create a Cloudflare API Token

  1. In your Cloudflare dashboard, go to Manage account → Account API Tokens.
  2. Click “Create Token.”
  3. Choose “Custom Token.”
  4. Click “Get Started.”
  5. Give your token a name.

Under Permissions:

  • Account → D1 → Edit
  • Click “Add More”
  • Account → Workers KV Storage → Edit
  • Click “Add More”
  • Account → Workers Scripts → Edit

Set an expiration date (recommended).
Click “Continue to Summary,” then “Create Token.”
Copy the token.

Then, go back to your GitHub repository secrets and add:

  • Name: CLOUDFLARE_API_TOKEN
  • Secret: paste the token

Click “Add Secret.”

Step 7 — Deploy the New Cloudflare Worker

  1. Go to Actions in your GitHub repository.
  2. Select “Deploy Cloudflare Worker.”
  3. Click “Run Workflow.”
  4. Choose a unique name for your new worker (different from Installation Part 1).
  5. Enter your domain, starting with https://.
  6. Click “Run Workflow.”
  7. Wait for the workflow to complete.

Once done:

  1. Go to your Cloudflare dashboard.
  2. You’ll see the new worker installed.
  3. Open the worker, click “Add Binding.”
  4. Select KV Namespace.
  5. For variable name, write WEBTUYOKV (all caps, no spaces).
  6. Under KV Namespace, select the one created in Installation Part 1.
  7. Click “Add Binding.”

Now go to Settings → Domains & Routes, click “Add.”

  • Zone: select your domain
  • Route: static.[YOUR DOMAIN]/site.json
  • Failure Mode: select Fail Open

Click “Add Route.”

Step 8 — Buy and Install the WebTuyo Renderer

  1. Purchase a WebTuyo Renderer license.
  2. Enter your email and follow the link you receive.
  3. Enter your domain (make sure it’s registered).
  4. Click Next.
  5. Confirm your domain and click “Proceed to Checkout.”
  6. Complete the form using the same email address.
  7. Click “Complete Order.”
  8. Follow the activation link in your email or go to webtuyo.com/activate.
  9. Confirm your domain again, read the Terms and Conditions,
    then click “Activate and Download.”

In the popup, enter your Site Data URL: https://static.[YOUR DOMAIN]/site.json

Click “Download.”

This will download the WebTuyo Renderer software and its license.

Step 9 — Host the Renderer for Free Using Cloudflare Pages

  1. Go to your Cloudflare dashboard → Workers & Pages → Pages.
  2. Under “Drag and drop your files,” click “Get Started.”
  3. Enter a project name (any name you prefer — we suggest using your website name for consistency.).
  4. Click “Create Project.”
  5. Under Upload your project assets, click “Select from your computer.”
  6. Choose “Upload ZIP.”
  7. Select the ZIP file you downloaded earlier.
  8. Click “Deploy Site.”
  9. When the deployment completes, click “Continue to Project.”
  10. Go to Custom Domains, enter your domain, and click “Continue.”
  11. Click “Activate Domain.”

Deployment may take up to 48 hours but usually finishes within 15 minutes.

Step 10 — Publish Your Website

  1. Go back to your Web Builder.
  2. Update your project.
  3. Publish your website.

When you visit your domain, your site will be live and updated with your latest changes.

You’re all set! 🎉