ساخت یک وب‌سایت شخصی رایگان با Cloudflare Pages و GitHub: راهنمای جامع (نسخه ۲۰۲۶)

۱۴۰۴/۱۰/۵ نوشته شده توسط مهرداد اولیائی

ساخت یک وب‌سایت شخصی رایگان با Cloudflare Pages و GitHub: راهنمای جامع (نسخه ۲۰۲۶)

در عصر دیجیتال امروز، داشتن یک وب‌سایت شخصی برای نمایش نمونه کارها، وبلاگ یا برند شما ضروری است—بدون اینکه هزینه زیادی داشته باشد. تصور کنید یک سایت حرفه‌ای مانند mehr1dad.com ایجاد کنید که به عنوان یک پایگاه شخصی برای رزومه‌ها، مقالات و موارد دیگر عمل می‌کند و همه آن‌ها به صورت رایگان میزبانی می‌شوند. بهترین بخش ماجرا کجاست؟ برای شروع نیازی به خرید هاست یا حتی دامین ندارید. با استفاده از Cloudflare Pages به همراه یک مخزن GitHub، می‌توانید یک وب‌سایت استاتیک را بدون هیچ هزینه‌ای مستقر کنید، همراه با به‌روزرسانی‌های خودکار در چندین دامین (در صورت تمایل به افزودن آن‌ها).

این راهنمای جامع همه چیز را به شما آموزش می‌دهد: از اصول اولیه اینکه چرا این سیستم به خوبی کار می‌کند، تا ویژگی‌های آن (از جمله سئو، وبلاگ‌نویسی و پشتیبانی از چند دامین)، قابلیت‌ها و محدودیت‌های فنی و یک آموزش گام‌به‌گام. در پایان، شما یک منبع مرجع برای ساخت، استقرار و نگهداری سایت خود خواهید داشت. هیچ تخصص کدنویسی مورد نیاز نیست—اگرچه آشنایی اولیه با Git کمک‌کننده است.

چرا Cloudflare Pages و GitHub؟ انقلاب میزبانی رایگان

Cloudflare Pages یک پلتفرم رایگان برای استقرار وب‌سایت‌های استاتیک به طور مستقیم از ارائه‌دهنده Git شما (مانند GitHub) است. این پلتفرم از شبکه توزیع محتوای (CDN) جهانی Cloudflare برای بارگذاری بسیار سریع، گواهینامه‌های SSL خودکار و پهنای باند نامحدود بهره می‌برد—همه این‌ها بدون پرداخت حتی یک سکه برای امکانات اولیه.

  • شروع کاملاً رایگان: از یک ساب‌دامین رایگان مانند yourproject.pages.dev استفاده کنید. هیچ هزینه میزبانی و هاستی در کار نیست، هرگز.
  • دامین‌های اختیاری: اگر یک دامین سفارشی (مانند yourname.com) می‌خواهید، می‌توانید یکی را ارزان بخرید (حدود ۱۰ دلار در سال)، اما الزامی نیست. همانطور که در سایت‌هایی مانند mehr1dad.com مشاهده می‌شود، شما حتی می‌توانید چندین دامین (مانند mehr1dad.com، mehr1dad.ir، digimehrdad.ir) را به همان سایت متصل کنید. به‌روزرسانی‌ها به طور فوری در همه آن‌ها همگام‌سازی می‌شوند.
  • یکپارچه‌سازی با GitHub: محتوای سایت خود را در یک مخزن GitHub مدیریت کنید. تغییرات را پوش (Push) کنید، و Cloudflare به طور خودکار آن را مستقر می‌کند—که برای کنترل نسخه و همکاری عالی است.
  • مثال واقعی: سایت mehr1dad.com یک پورتفولیو شخصی است که در Cloudflare Pages میزبانی می‌شود و میزبانی رزومه، انتشار مقاله و نام‌های مستعار چند دامنه‌ای را نشان می‌دهد. این سایت به طور یکپارچه در دامین‌های .com و .ir به‌روز می‌شود و کارایی این سیستم را ثابت می‌کند.

این ترکیب از گزینه‌های رایگان سنتی مانند GitHub Pages به تنهایی بهتر عمل می‌کند و سرعت، امنیت و مقیاس‌پذیری بهتری را ارائه می‌دهد.

ویژگی‌ها و قابلیت‌های کلیدی

Cloudflare Pages در سایت‌های استاتیک برتری دارد اما با ابزارهایی برای نیازهای پویاتر ادغام می‌شود. در اینجا یک تفکیک ارائه شده است:

۱. میزبانی سایت استاتیک

  • پشتیبانی از HTML/CSS/JS ساده یا فریم‌ورک‌هایی مانند React، Vue، Angular، Svelte.
  • استفاده از تولیدکنندگان سایت استاتیک (SSG) برای سایت‌های پیشرفته: Jekyll (مبتنی بر Ruby، عالی برای وبلاگ‌ها)، Hugo (مبتنی بر Go، فوق‌العاده سریع)، Eleventy، یا Gatsby.
  • CDN جهانی: سایت شما در سراسر جهان به سرعت بارگذاری می‌شود، با محافظت داخلی در برابر DDoS و HTTPS.

۲. پشتیبانی از وبلاگ‌نویسی

  • به راحتی با استفاده از SSG ها یک وبلاگ راه‌اندازی کنید. پست‌ها را در Markdown بنویسید، و تولیدکننده HTML می‌سازد.
  • مثال Jekyll: ایده‌آل برای کاربران GitHub؛ تم‌ها و پست‌ها را به طور خودکار می‌سازد.
  • مثال Hugo: بسیار سریع؛ مناسب برای وبلاگ‌های بزرگ با هزاران پست.
  • ویژگی‌ها: دسته‌بندی‌ها، برچسب‌ها، فیدهای RSS، نظرات (از طریق شخص ثالث مانند Disqus، ادغام شده به صورت استاتیک)، و جستجو (از طریق Algolia یا Lunr.js).
  • نیازی به دیتابیس نیست—همه چیز مبتنی بر فایل در مخزن GitHub شما است.

۳. قابلیت‌های سئو (SEO)

سایت‌های استاتیک ذاتاً سازگار با سئو هستند: زمان بارگذاری سریع (گوگل صفحات زیر ۲ ثانیه را دوست دارد)، URLهای تمیز و متا تگ‌های آسان.

بهترین روش‌ها:

  • تولید sitemap.xml و robots.txt از طریق SSG شما (مثلاً نقشه سایت داخلی Hugo).
  • افزودن توضیحات متا (Meta descriptions)، تگ‌های Open Graph و نشانه‌گذاری اسکیما (Schema) در قالب‌ها.
  • ثبت در Google Search Console: سرعت Cloudflare رتبه‌بندی را افزایش می‌دهد؛ کش (Caching) را برای عملکرد بهتر فعال کنید.
  • تجزیه و تحلیل: گوگل آنالیتیکس یا Zaraz رایگان Cloudflare را برای ردیابی بدون کند کردن سایت خود ادغام کنید.
  • سازگار با موبایل: از طراحی‌های واکنش‌گرا استفاده کنید؛ با Mobile-Friendly Test گوگل تست کنید.

بهبودهای Cloudflare: بهینه‌سازی خودکار تصویر، هینت‌های مرورگر و بهینه‌سازی برای امتیازهای بهتر Core Web Vitals.

محدودیت‌ها: سئوی پویا (مانند محتوای تولید شده توسط کاربر) به Cloudflare Workers نیاز دارد (طرح رایگان محدود به ۱۰۰ هزار درخواست در روز).

۴. پشتیبانی از چند دامین و نام‌های مستعار (Alias)

  • اتصال تا ۱۰۰ دامین سفارشی به ازای هر پروژه در طرح رایگان (مثلاً yourname.com، yourname.ir).
  • همه دامین‌ها به یک محتوا اشاره می‌کنند؛ به‌روزرسانی‌ها فوراً منتشر می‌شوند.
  • نام‌های مستعار (Aliases): تغییر مسیر یا نام مستعار دامین‌ها (مثلاً www. به ریشه) از طریق Cloudflare DNS.
  • مثال: مانند mehr1dad.com که نام مستعار نسخه‌های .ir است—یک بار به GitHub پوش کنید و همه همگام‌سازی می‌شوند.

۵. سایر قابلیت‌های فنی

  • Functions (توابع): افزودن JS بدون سرور (مثلاً برای فرم‌ها، APIها) از طریق Pages Functions—رایگان تا حد محدودیت‌های Workers.
  • یکپارچه‌سازی‌ها: با Cloudflare Workers، R2 (ذخیره‌سازی)، D1 (پایگاه داده)، اما محدودیت‌های طرح رایگان اعمال می‌شود.
  • استقرارهای پیش‌نمایش: تست شاخه‌ها (branches) قبل از ادغام (merge).
  • تغییر مسیرها/هدرها: سفارشی‌سازی از طریق فایل‌های _redirects یا _headers (تا ۲۱۰۰ ریدایرکت).
  • پهنای باند/کاربران نامحدود: بدون محدودیت در ترافیک یا همکاران.

محدودیت‌ها

اگرچه قدرتمند است، Cloudflare Pages برای همه چیز نیست. محدودیت‌های کلیدی طرح رایگان (از سال ۲۰۲۵):

  • ساخت‌ها (Builds): ۵۰۰ بار در ماه؛ هر کدام پس از ۲۰ دقیقه متوقف می‌شود. (Pro/Business: ساخت‌های بیشتر.)
  • فایل‌ها: تا ۲۰,۰۰۰ فایل به ازای هر سایت؛ حداکثر ۲۵ مگابایت برای هر فایل.
  • دامین‌ها: ۱۰۰ عدد در هر پروژه (Pro: ۲۵۰؛ Business: ۵۰۰).
  • ساخت‌های همزمان: محدود در هر حساب (مشخص نشده است، اما میزان استفاده را کنترل کنید).
  • ذخیره‌سازی/پهنای باند: پهنای باند نامحدود؛ ذخیره‌سازی در محدودیت‌های فایل پنهان است.
  • محتوای پویا: به طور پیش‌فرض فقط استاتیک است. برای دیتابیس‌ها/فرم‌ها، از Workers استفاده کنید (رایگان: ۱۰۰ هزار درخواست در روز، ۱۰ میلی‌ثانیه زمان پردازنده در هر درخواست).
  • سایر موارد: عدم وجود زبان‌های سمت سرور مستقیم (مانند PHP/Node)؛ _headers محدود به ۱۰۰ قانون/۲۰۰۰ کاراکتر؛ _redirects در مجموع به ۲۱۰۰ عدد.

بهترین روش‌ها برای جلوگیری از محدودیت‌ها: بهینه‌سازی ساخت‌ها (مثلاً کش کردن وابستگی‌ها)، استفاده از Bulk Redirects برای مقادیر اضافی، درخواست افزایش محدودیت از طریق فرم در صورت نیاز. برای سایت‌های پویای پر ترافیک، به طرح‌های پولی ارتقا دهید (حدود ۲۰ دلار در ماه برای Pro).

اگر سایت شما به بک‌اند کامل نیاز دارد (مانند فروشگاه اینترنتی)، اضافه کردن Cloudflare Workers یا مهاجرت به VPS را در نظر بگیرید.

آموزش گام‌به‌گام: ساخت وب‌سایت رایگان از ابتدا

این راهنما را دنبال کنید تا سایت خود را در کمتر از یک ساعت راه‌اندازی کنید. ما از Hugo برای مثال وبلاگ استفاده خواهیم کرد، اما می‌توانید آن را برای HTML ساده یا Jekyll نیز تنظیم کنید.

پیش‌نیازها

  • حساب کاربری رایگان GitHub (github.com/signup).
  • حساب کاربری رایگان Cloudflare (dash.cloudflare.com/signup).
  • اختیاری: یک دامین سفارشی از یک ثبت‌کننده مانند Namecheap یا IRNIC (.ir).
  • ابزارهای محلی: Git، Node.js (برای برخی SSGها) و نصب‌کننده Hugo/Jekyll.

گام ۱: راه‌اندازی مخزن GitHub

۱. وارد GitHub شوید و یک مخزن (repository) جدید ایجاد کنید (مثلاً yourusername.github.io یا هر نامی). ۲. آن را به صورت محلی کلون کنید: git clone https://github.com/yourusername/your-repo.git. ۳. نصب یک تولیدکننده سایت استاتیک (SSG): * برای Hugo: از gohugo.io دانلود کنید، hugo new site . را در پوشه مخزن خود اجرا کنید. * برای Jekyll: gem install jekyll bundler و سپس jekyll new . را اجرا کنید. ۴. افزودن محتوا: * ایجاد یک پست وبلاگ: hugo new posts/my-first-post.md (ویرایش در Markdown). * سفارشی‌سازی قالب: اضافه کردن یک زیرماژول قالب (مثلاً git submodule add https://github.com/adityatelange/hugo-PaperMod themes/PaperMod). ۵. ثبت (Commit) و ارسال (Push): git add .، git commit -m "Initial site"، git push origin main.

گام ۲: اتصال و استقرار در Cloudflare Pages

۱. وارد داشبورد Cloudflare شوید > Workers & Pages > Overview > Create (زیر Pages). ۲. “Connect to Git” را انتخاب کنید > مجوز GitHub را تأیید کنید > مخزن خود را انتخاب کنید. ۳. پیکربندی ساخت (Build): * Framework: هوگو (Hugo) (یا Jekyll/None برای HTML). * Build command: hugo --minify (در Jekyll: bundle exec jekyll build). * Output directory: public (در Hugo) یا _site (در Jekyll). * Environment variables: در صورت نیاز (مثلاً HUGO_VERSION=0.121.1). ۴. ذخیره و استقرار (Save and Deploy). یک تا دو دقیقه صبر کنید—سایت شما در yourproject.pages.dev آنلاین است!

گام ۳: افزودن دامین‌های سفارشی (از جمله چند دامین)

۱. در صورت خرید دامین: خرید کنید (مثلاً yourname.com) و نیم‌سرورها (Nameservers) را به کلودفلر تغییر دهید (در داشبورد > Add Site). ۲. در پروژه Pages خود > Custom Domains > Add Custom Domain. ۳. دامین را وارد کنید (مثلاً mehr1dad.com) > Continue > دستورالعمل‌های DNS را دنبال کنید (CNAME اضافه کنید: name=@، target=yourproject.pages.dev، proxy=on). ۴. برای دامین‌های چندگانه: این کار را برای هر کدام تکرار کنید (مثلاً mehr1dad.ir، digimehrdad.ir). همه به یک پروژه ارجاع داده می‌شوند. ۵. تأیید: کلودفلر به طور خودکار SSL را اضافه می‌کند. در مرورگر تست کنید—به‌روزرسانی‌ها در پوش‌های گیت‌هاب همگام‌سازی می‌شوند.

گام ۴: بهینه‌سازی برای سئو و وبلاگ

۱. در SSG شما: * افزودن نقشه سایت (sitemap): در تنظیمات فعال کنید (Hugo: config.toml؛ Jekyll: _config.yml). * متا تگ‌ها: ویرایش لی‌اوت‌ها (مثلاً <head> با title, description). ۲. ارسال به موتورهای جستجو: به google.com/search-console بروید > Add property (دامین شما) > تأیید از طریق DNS. ۳. تنظیمات وبلاگ: پست‌ها را از طریق Markdown اضافه کنید، به GitHub بفرستید—به طور خودکار مستقر می‌شود. ۴. تجزیه و تحلیل: اسکریپت GA (گوگل آنالیتیکس) را به قالب‌ها اضافه کنید.

گام ۵: نگهداری و به‌روزرسانی

  • به صورت محلی ویرایش کنید، به GitHub پوش کنید—Cloudflare در چند ثانیه بازسازی می‌کند.
  • نظارت: داشبورد ساخت‌ها و ترافیک را نشان می‌دهد.
  • عیب‌یابی: گزارش‌ها را برای خطاها بررسی کنید؛ زیر محدودیت‌ها بمانید.

سخن پایانی

با Cloudflare Pages و GitHub، شما یک پلتفرم قوی و رایگان برای سایت شخصی خود دارید—مقیاس‌پذیر، سئوشده و آماده برای چند دامین. سایت‌هایی مانند mehr1dad.com ثابت می‌کنند که این پلتفرم در سطح حرفه‌ای و پروداکشن است. اگر به محدودیت‌ها رسیدید، ارتقاهای پولی مقرون‌به‌صرفه هستند. از امروز شروع کنید و این راهنما را به سکوی پرتاب خود تبدیل کنید. سوالی دارید؟ آن‌ها را در نظرات مطرح کنید یا در لینکدین در ارتباط باشید.


امتیاز شما به این مقاله چیست؟

0.0|0 رأی

نظرات

در حال بارگذاری نظرات...