Cloudflare: Pages, Workers, protection
Lesson 12 of 26 in the course “Vibe coding”. Free, with animations and a quiz.
A network in front of your site
Cloudflare is a company with a huge network of servers all over the world. It sits between the visitor and your site. The main trick is a CDN, a content delivery network. Copies of your site sit on servers in different countries, and each visitor gets them from the nearest one. The dots on the globe are those servers. Example: your gaming clan lives in different countries, yet the tournament schedule site loads fast for everyone.
The shield and the https lock
Cloudflare's second job is protection. For example, from a DDoS attack, when a crowd of bots floods a site with requests at the same time to knock it down. The network filters out that junk before it reaches your site: that's the shield in the figure. There's also SSL: encryption of the connection between the browser and the site, which you see as https in the address and a lock icon. Cloudflare issues the certificate for it automatically.
Pages: a site straight from GitHub
Pages is Cloudflare's site hosting. The pattern is familiar: you connect a GitHub repository, set the build command, and after every push the site updates by itself. The side arrow in the figure is exactly that. Every branch gets its own preview link. In short: everything from the deploy lesson works here. Cloudflare renames and merges sections of its dashboard over time, but the idea stays the same.
Workers: server code with no server to run
Workers are small pieces of server code that run right inside Cloudflare's network. No need to set up your own server. Example: the clan site has a tournament sign-up form, and the entries need saving. Or a button that asks AI to come up with a team name. You can't put the AI key in the frontend, remember? The Worker holds it: the browser calls the Worker, and the Worker calls the AI with the key.
Secrets: in the dashboard, not in code
Keys for Workers and Pages are added in the Cloudflare dashboard as secrets, meaning encrypted variables. Your code refers to them by name, for example AI_KEY, and the value itself never lands in the repository. Same idea as the .env file: Git remembers everything, so a key in the code will leak sooner or later. If a key did end up in the repository, revoke it in the service and create a new one.
When to pick Cloudflare
Cloudflare also has DNS for your domain (a chip in the figure) and data storage: D1, a database with tables, and KV, a simple “key → value” store. Pick Cloudflare if you have a static site or a simple backend, your own domain and visitors from different countries. There's usually a free plan; check the limits on the site. Check whether the service and payments are available in your country. Practice in the Cloudflare simulator.
Check yourself
- Why does a site need a CDN?
Correct answer: Visitors get the site from the nearest server. A CDN keeps copies of the site around the world, so the page travels from the nearest point and loads faster. - Where should you keep the AI key a Worker uses?
Correct answer: In secrets in the Cloudflare dashboard. A secret is encrypted and never lands in the repository. In the frontend or README anyone can see the key. - What do https and the lock in the address mean?
Correct answer: The browser's connection to the site is encrypted. SSL encrypts data on the way. The trap: the lock doesn't prove a site is honest; scam sites have it too.