Cloudflare এর হাতেখড়ি (পর্ব ১) – পরিচিতি ও Pages দিয়ে প্রথম সাইট ডেপ্লয়

Firebase এর হাতেখড়ি সিরিজে আমরা ব্যাকএন্ড শিখেছিলাম — Auth, Database, Storage। কিন্তু সেই প্রজেক্ট মানুষ পর্যন্ত পৌঁছাতে হলে একটা হোস্টিং লাগে। আজ থেকে শুরু হচ্ছে নতুন সিরিজ — Cloudflare এর হাতেখড়ি। এই পর্বে জানব Cloudflare আসলে কী, কেন এটা এত জনপ্রিয়, আর Cloudflare Pages দিয়ে কীভাবে প্রথম স্ট্যাটিক সাইট একদম ফ্রিতে লাইভ করা যায়।

Cloudflare কী?

Cloudflare মূলত একটা বিশাল গ্লোবাল নেটওয়ার্ক, যা তিনটা প্রধান কাজ করে — CDN (কনটেন্ট দ্রুত পৌঁছানো), Security (DDoS প্রোটেকশন, ফায়ারওয়াল), আর Hosting/Compute (সাইট হোস্ট করা, সার্ভারলেস কোড চালানো)। আমাদের সিরিজে আমরা মূলত এর হোস্টিং ও কম্পিউট সার্ভিসগুলো নিয়ে কাজ করব:

• Pages — স্ট্যাটিক সাইট ও ফ্রন্টএন্ড অ্যাপ হোস্টিং (React, Vite, Blogger-স্টাইল স্ট্যাটিক HTML)
• Workers — সার্ভারলেস ফাংশন, যেখানে ব্যাকএন্ড কোড চলে
• R2 — ফাইল/ইমেজ স্টোরেজ (S3-এর বিকল্প, কিন্তু ফ্রি egress)
• KV ও D1 — কী-ভ্যালু স্টোরেজ ও SQLite ডেটাবেজ

কেন Cloudflare ব্যবহার করবেন?

• জেনারাস ফ্রি টিয়ার — Pages হোস্টিং, R2-এ egress ফি নেই, Workers-এও একটা বড় ফ্রি কোটা আছে
• গ্লোবাল CDN বিল্ট-ইন — সাইট ডেপ্লয় করলেই স্বয়ংক্রিয়ভাবে বিশ্বজুড়ে সার্ভারে ছড়িয়ে যায়, বাংলাদেশ থেকেও দ্রুত লোড হয়
• Git-ভিত্তিক ডেপ্লয়মেন্ট — GitHub-এ পুশ করলেই অটো-ডেপ্লয় হয়ে যায়
• Firebase-এর সাথে ভালো জোড়া লাগে — Cloudflare হোস্টিং + Firebase ব্যাকএন্ড, এই কম্বিনেশনেই ArifStack-এর বেশিরভাগ প্রজেক্ট (Pathok Ghar, CastFM, Midnight Craving) চলছে

Cloudflare Pages কী?

Pages হলো Cloudflare-এর স্ট্যাটিক সাইট ও ফ্রন্টএন্ড হোস্টিং সার্ভিস। HTML/CSS/JS ফাইল, বা React/Vite/Next.js-এর মতো ফ্রেমওয়ার্কের বিল্ড আউটপুট — দুটোই হোস্ট করা যায়। GitHub রিপোজিটরির সাথে সংযুক্ত করলে প্রতিবার কোড পুশ করলেই নতুন ভার্সন অটোমেটিক লাইভ হয়ে যায়।

অ্যাকাউন্ট তৈরি করা

1. dash.cloudflare.com/sign-up-এ গিয়ে একটা ফ্রি অ্যাকাউন্ট তৈরি করুন
2. ইমেইল ভেরিফাই করুন
3. Dashboard-এ লগইন করলে বাম পাশে Workers & Pages মেনু দেখা যাবে

পদ্ধতি ১ — ম্যানুয়াল আপলোড (দ্রুততম শুরু)

GitHub-এর ঝামেলা ছাড়াই সবচেয়ে সহজ উপায় — সরাসরি একটা ফোল্ডার আপলোড করে দেওয়া। শেখার জন্য এটা দিয়েই শুরু করা যাক।

1. Workers & Pages → Create → Pages → Upload assets-এ যান
2. একটা প্রজেক্টের নাম দিন (যেমন my-first-site)
3. নিজের HTML/CSS/JS ফাইলসহ একটা ফোল্ডার ড্র্যাগ করে ছেড়ে দিন, বা বেছে নিন
4. Deploy site চাপুন

কয়েক সেকেন্ডের মধ্যেই একটা লাইভ URL পাওয়া যাবে, যেমন my-first-site.pages.dev।

পদ্ধতি ২ — GitHub দিয়ে সংযুক্ত করা (প্রোডাকশনের জন্য সেরা)

বাস্তব প্রজেক্টে GitHub-এর সাথে সংযুক্ত করাই সবচেয়ে ভালো — এতে প্রতিবার কোড বদলালে অটোমেটিক নতুন ভার্সন ডেপ্লয় হয়ে যায় (এটা পরের পর্বে CI/CD নিয়ে বিস্তারিত আলোচনা হবে)।

1. Workers & Pages → Create → Pages → Connect to Git-এ যান
2. GitHub অ্যাকাউন্ট অথরাইজ করুন, নিজের রিপোজিটরি বেছে নিন
3. Build settings ঠিক করুন —
   • স্ট্যাটিক HTML প্রজেক্ট হলে: Build command খালি রাখুন, Output directory / (রুট)
   • React/Vite প্রজেক্ট হলে: Build command npm run build, Output directory dist
4. Save and Deploy চাপুন

প্রতিটা পুশেই একটা Preview URL

GitHub-এ সংযুক্ত করলে Cloudflare একটা বাড়তি সুবিধা দেয় — main ব্রাঞ্চে পুশ করলে প্রোডাকশন আপডেট হয়, কিন্তু অন্য যেকোনো ব্রাঞ্চে পুশ করলে একটা আলাদা Preview URL তৈরি হয়। এতে লাইভ সাইট না ছুঁয়ে নতুন ফিচার টেস্ট করা যায়।

git checkout -b new-feature
# কিছু পরিবর্তন করে
git push origin new-feature
# Cloudflare স্বয়ংক্রিয়ভাবে একটা preview URL বানাবে, যেমন:
# https://a1b2c3d4.my-first-site.pages.dev

ইন্টারেক্টিভ — Deploy Workflow

নিচে দেখো GitHub-connected Pages প্রজেক্টে একটা কোড পুশ থেকে লাইভ হওয়া পর্যন্ত পুরো ফ্লো কেমন দেখতে।

ভালো অভ্যাস

• শুরুতে ম্যানুয়াল আপলোড দিয়ে দ্রুত পরীক্ষা করুন, তারপর প্রোডাকশনে GitHub-connected পদ্ধতিতে যান
• প্রজেক্টের নাম সহজ ও স্মরণযোগ্য রাখুন — এটাই ডিফল্ট .pages.dev সাবডোমেইনে পরিণত হবে
• Preview URL ব্যবহার করুন — নতুন ফিচার সরাসরি main-এ পুশ না করে আলাদা ব্রাঞ্চে টেস্ট করাই নিরাপদ

নিজে চেষ্টা করো

Exercise:

1. একটা Cloudflare অ্যাকাউন্ট তৈরি করো, একটা সাধারণ index.html ফাইল বানাও, ম্যানুয়াল আপলোড দিয়ে Pages-এ ডেপ্লয় করো।
2. নিজের একটা GitHub রিপোজিটরি (পুরনো কোনো প্রজেক্ট বা নতুন একটা) Cloudflare Pages-এর সাথে সংযুক্ত করো, main ব্রাঞ্চে পুশ করে অটো-ডেপ্লয় দেখো।
3. একটা নতুন ব্রাঞ্চ বানিয়ে সেখানে পুশ করে দেখো Preview URL কেমন তৈরি হয়।

পরের পর্বে যা থাকছে

পরের পর্বে আমরা শিখব GitHub Actions দিয়ে অটো-ডেপ্লয় (CI/CD) — Cloudflare-এর বিল্ট-ইন Git integration-এর বাইরে গিয়ে কীভাবে নিজের কাস্টম বিল্ড পাইপলাইন (যেমন PDF/EPUB জেনারেশনের মতো এক্সট্রা স্টেপ) GitHub Actions দিয়ে চালিয়ে Cloudflare Pages-এ ডেপ্লয় করা যায়।