bloopcommitsLaptop pe tumhari website chalti hai, par dost ke phone pe nahi khulti, kyunki wo abhi internet pe rakhi hi nahi gayi. Website ko internet pe rakhna hi hosting hai. Is guide mein Cloudflare Pages ka poora raasta hai: kya chahiye, kaise connect karna hai, Free plan ke limits kya hain, domain kaise jodna hai, aur end mein ek checklist. Sab kuch Cloudflare ke official docs ke hisaab se hai.
Cloudflare Pages kya hai
Cloudflare Pages ke landing page par likha hai ki ye ek serverless platform hai jahan applications build, test aur deploy kiye jaate hain, aur page par ek button bhi hai: Start building for free. Is guide mein hum sirf static site ki baat kar rahe hain.
| Shabd | Seedhi bhaasha mein |
|---|---|
| Hosting | Website ki files ko internet pe rakhna, taaki koi bhi link khol sake. |
| Static site | Ready files: HTML, CSS aur JavaScript. Server pe alag se code nahi chalta. |
| Pages Functions | Docs ke hisaab se server-side code ke liye alag feature. Static files ke liye iski zaroorat nahi. |
| Build | Pages tumhare code se site ki final files banata hai. |
| Deploy | Wo final files internet pe live kar dena. |
| Preview deployment | Production branch ke alawa baaki branches ka alag test version. |
Shuru karne se pehle kya chahiye
- Ek Cloudflare account (Workers & Pages dashboard tak access ke saath).
- Ek GitHub ya GitLab repository. Docs ke hisaab se public aur private, dono repositories chalti hain.
- Repository mein kam se kam ek branch push ho chuki ho. Docs: bina push kiye Production branch select nahi hoti.
- GitLab use kar rahe ho to repository par Maintainer role ya usse upar ka role chahiye.
- Tumhari site ki files, ya koi framework jo build karke files banata ho.
Step by step: Git se deploy
- Apna code GitHub ya GitLab repository mein push karo.
- Cloudflare dashboard mein Workers & Pages page par jao aur Git integration se naya Pages project shuru karo (Begin setup).
- Apna Git provider connect karo: GitHub ya GitLab. Phir apni repository select karo (personal account ya wo organization jise Pages ko access diya ho).
- Project name chuno. Isi se tumhari site ka hostname banta hai, aur default mein ye tumhare Git project ke naam jaisa hota hai.
- Production branch chuno. Docs ke hisaab se isi branch se site ka production version deploy hota hai.
- Build settings bharo: build command aur build output directory. Framework use kar rahe ho to dashboard ke presets default values bhar dete hain. Build step nahi chahiye to Build command khali chhod do.
- Pehla deploy chalao. Uske baad har git push par Pages khud build aur deploy karta hai.
- Build command = site ki files banane ka command (build step nahi hai to khali).
- Build output directory = wo folder jiska content tumhari website ban jaata hai.
- Root directory = Pages repository ki root se shuru karta hai; badalna ho to ye advanced option hai.
- Environment variables = build ke liye extra settings, agar tumhare project ko chahiye.
Banaya hua example
Ye ek banaya hua example hai, kisi asli project ka nahi. Maan lo Riya ne ek portfolio site banayi: ek folder mein index file, CSS aur JavaScript. Usne folder ko ek repository mein push kiya aur Pages se connect kiya. Chunki koi build step nahi tha, usne Build command khali chhoda aur Build output directory mein wo folder bataya jisme uski ready files thi. Ab jab bhi wo koi badlav push karti hai, Pages khud nayi site live kar deta hai.
| Field | Riya ka example (banaya hua) |
|---|---|
| Repository | riya-portfolio (GitHub) |
| Production branch | main |
| Build command | (khali, koi build step nahi) |
| Build output directory | wo folder jisme ready files hain |
Free plan ke limits (docs ke hisaab se)
| Cheez | Free plan | Paid plans |
|---|---|---|
| Builds per month | 500 | Pro: 5,000, Business: 20,000 |
| Custom domains (per project) | 100 | Pro: 250, Business: 500 |
| Files per site | 20,000 | 100,000 tak |
| Ek file ka size | 25 MiB tak | Docs mein alag number nahi |
| Projects per account | 100 | Docs mein alag number nahi |
| Build timeout | 20 minute | Docs mein alag number nahi |
| Static asset requests | Free aur unlimited | Free aur unlimited |
- Ye numbers Cloudflare ke docs ke hisaab se hain. Deploy karne se pehle limits wala official page ek baar dekh lo.
- Landing page par "unlimited" jaise shabd bhi milte hain, aur docs mein alag limits bhi. Dono ko saath padho, aur numbers ke liye docs ka limits page maano.
Apna domain jodna
- Dashboard mein Workers & Pages par jao, apna Pages project kholo, phir Custom domains.
- Set up a domain par jao aur apna domain daalo.
- Subdomain ke liye docs mein CNAME record ka tarika hai: DNS provider mein subdomain ka CNAME record banao jo tumhare Pages project ke pages.dev address ki taraf jaye.
- Poore (apex) domain ke liye docs ke hisaab se domain ko Cloudflare zone ki tarah add karna aur nameservers Cloudflare par point karna padta hai.
- Agar domain pehle se Cloudflare zone hai, to docs ke hisaab se CNAME record apne aap add ho jaata hai.
Preview aur production ka farak
| Branch | Kya banta hai |
|---|---|
| Production branch (jaise main) | Asli site ka production deployment. |
| Baaki saari branches | Preview deployment, yaani test version. |
Isliye naye badlav seedha production branch par daalne ki jagah alag branch par daalo. Pages us branch ka preview deployment banata hai, aur asli site production branch se hi chalti rehti hai.
Aam galtiyan
- Repository mein koi branch push kiye bina setup shuru karna: Production branch dropdown mein aayegi hi nahi.
- Build output directory galat dena: Pages usi directory ka content website banata hai.
- Domain ka CNAME record dashboard mein domain jode bina manually bana dena: docs ke hisaab se domain resolve nahi hota aur 522 error dikhta hai.
- CAA records ka dhyan na rakhna: docs ke hisaab se agar CAA records Cloudflare ko certificate issue karne nahi dete, to custom domain jodte waqt dikkat aa sakti hai.
- GitLab par Maintainer role ke bina deploy karne ki koshish.
- Bade video ya zip files site ke folder mein rakhna: ek file ki size limit hoti hai.
- Ye maan lena ki sab kuch free hai: Free plan ke limits hain, paid plans bhi hain, aur limits badalti rehti hain.
- Git integration se deploy karne ke baad docs ke hisaab se Direct Upload par switch nahi kar sakte; ye soch ke chuno.
Ek zaroori note: Workers
Cloudflare ke Pages docs ke home page par ek notice hai: Workers zyada tar Pages use cases support karta hai aur broader feature set deta hai, wo Cloudflare ka primary platform hai, aur naye projects Workers se shuru karne ko kaha gaya hai. Isliye Pages chunne se pehle dono ke docs dekh lo.
Deployment checklist
- ☐ Cloudflare account ban gaya hai.
- ☐ Code GitHub ya GitLab repository mein hai, aur kam se kam ek branch push ho chuki hai.
- ☐ Pages ka docs aur Workers ka docs dono dekh liye.
- ☐ Repository connect ki aur Production branch chuni.
- ☐ Build command aur build output directory sahi bhari hain (ya build step nahi hai to command khali).
- ☐ Pehla deploy chal gaya aur site khul rahi hai.
- ☐ Naye badlav alag branch par daalkar preview dekha.
- ☐ Limits ka official page dekha (builds, files, file size).
- ☐ Custom domain chahiye to Set up a domain se jodna shuru kiya.