چگونه: به سرعت یک وب سایت استاتیک را در Surge، Vercel، Netlify و موارد دیگر مستقر کنید!

ما بسیاری از پلتفرم‌های استقرار منبع باز عالی برای نمونه‌سازی سریع و استقرار وب‌سایت‌های استاتیک داریم. این به ویژه برای پروژه های سرگرمی یا ساختن نمونه کارها مفید است!

و حتی با وجود اینکه اینترنت پر از مقالات مفید در مورد آنها است، من به این فکر کردم که اطلاعات را در یک مکان تجمیع کنم و با استقرار یک سایت ثابت ساده (View Code) روی همه آنها، تجربه خود را به اشتراک بگذارم.

هر پلتفرم نقاط قوت خود را دارد، از سادگی و سرعت گرفته تا ویژگی ها و ادغام های پیشرفته. نیازهای پروژه خود را در نظر بگیرید و پس از بررسی اسناد رسمی، پلتفرمی را انتخاب کنید که به بهترین وجه با نیازهای شما مطابقت دارد.

سلب مسئولیت: این مقاله چند نمونه را نشان می دهد. همه پلتفرم‌های فهرست شده در زیر دارای یک سطح رایگان هستند که ما از آن استفاده خواهیم کرد، اما لطفاً برای جزئیات بیشتر، صفحات قیمت‌گذاری آنها را بررسی کنید.

1. Surge⚡

در اینجا نحوه استقرار یک وب سایت در Surge آورده شده است:

• در پوشه پروژه خود دستور زیر را اجرا کنید:

npx surge

• اولین بار، Surge ممکن است از شما بخواهد که ایمیل و رمز عبور خود را برای ایجاد یا ورود به یک حساب وارد کنید.
• پس از اتمام، از شما خواسته می شود که کدام فایل ها را مستقر کنید. برای این مثال وارد کنید. برای انتخاب همه فایل ها
• Surge یک نام سایت تصادفی نمایش می دهد. فقط قبول کن و ادامه بده و در آنجا که آن را دارید، سایت شما در Surge مستقر می شود!

2. Netlify 🚀

در اینجا نحوه استقرار یک وب سایت در Netlify آمده است:

• در سایت رسمی Netlify ثبت نام کنید. پس از ورود به سیستم، داشبورد خود را مشاهده خواهید کرد

• راه های مختلفی برای استقرار یک سایت وجود دارد: از طریق یکپارچه سازی Git، به صورت دستی یا از طریق یک الگو. در این مثال، ما مستقیماً از طریق Netlify CLI مستقر می‌شویم.

• ترمینال را در فهرست پروژه خود باز کنید و دستور زیر را اجرا کنید:

npx netlify-cli deploy

• Netlify نیاز به احراز هویت دارد، بنابراین اولین بار ممکن است از شما بخواهد از طریق مرورگر خود وارد شوید.

• پس از ورود به سیستم، ترمینال به طور خودکار مراحل بعدی را ادامه می دهد. در این مثال، ما یک سایت جدید با نام تصادفی و تیم پیش‌فرض را برای استقرار سایت استاتیک خود انتخاب کردیم.

• پس از اتمام، باید یک اعلان موفقیت و آدرس های وب سایت را در ترمینال مشاهده کنید.

• سایت اکنون در نتلیفای مستقر شده است!

3. Vercel🌐

در اینجا نحوه استقرار یک وب سایت در Vercel آمده است:

• به سایت رسمی سر بزنید و ثبت نام کنید.
• از روش‌های چندگانه استقرار انتخاب کنید: ادغام Git، دستی یا مبتنی بر الگو. ما مستقیماً با استفاده از Vercel CLI مستقر می‌شویم.
• ترمینال را در فهرست پروژه باز کنید، این دستور را به دنبال مراحل خودکار اجرا کنید:

npx vercel

• Vercel CLI ممکن است از شما بخواهد که وارد شوید، بنابراین فرآیند ورود به سیستم را از طریق تأیید ایمیل کامل کنید.
• از آنجایی که این یک سایت جدید بود، من از “پیوند به پروژه موجود” به عنوان NO استفاده کردم. نام پروژه نمونه را وارد کنید و از آن استفاده کنید. به عنوان فایل های پروژه شما تا شامل تمام فایل ها برای آپلود شود.
• موفقیت: سایت شما اکنون در Vercel مستقر شده است!

4. هاست فایربیس🔥

در اینجا نحوه استقرار یک وب سایت در Firebase آورده شده است:

• به سایت رسمی مراجعه کرده و ثبت نام کنید. در صورتی که حساب Google داشته باشید، به صورت خودکار وارد سیستم خواهید شد.
• یک پروژه جدید در کنسول Firebase ایجاد کنید.
• Firebase CLI را به صورت سراسری با استفاده از این دستور در ترمینال خود نصب کنید.

npm i -g firebase-tools 

• با استفاده از این دستور در ترمینال دایرکتوری پروژه خود به دنبال مراحل خودکار وارد شوید:

firebase login 

• با اجرای این دستور در ترمینال دایرکتوری پروژه خود، Firebase را پیکربندی کنید تا فایل‌های استقرار ایجاد شود.

firebase init 

• سایت را با استفاده از این دستور و مراحل خودکار را دنبال کنید:

firebase deploy

5. صفحات GitHub📄

در اینجا نحوه استقرار یک وب سایت در GitHub آورده شده است:

• اگر قبلاً یک حساب GitHub فعال ندارید، در اینجا ثبت نام کنید.
• کد خود را در یک مخزن GitHub آپلود کنید. مطمئن شوید که از مسیرهای نسبی در نام فایل‌ها استفاده می‌کنید و از زیرخط برای پیوند مناسب اجتناب کنید، در غیر این صورت ممکن است فایل‌های منبع خارجی شما اکنون به درستی پیوند داده شده باشند.
• GitHub UI یا را انتخاب کنید gh-pages افزونه برای استقرار ما در این مثال از GitHub UI استفاده خواهیم کرد.
• به “تنظیمات” > “صفحات” مخزن خود بروید تا استقرار را از شاخه ای که می خواهید تنظیم کنید، به عنوان مثال، در این مورد، من شاخه “مستر” را انتخاب کردم.

• پس از این، GitHub به طور خودکار سایت شما را هر بار که هر تعهدی به مخزن انجام می شود، مستقر می کند.
• تنظیمات > صفحات را باز کنید و در اینجا آدرس سایت را خواهید دید!

6. صفحات Cloudflare ☁️

• استقرار در Cloudflare به چند مرحله اضافی نیاز دارد، این راهنما را دنبال کنید:

Cloudflare Wrangler CLI را با استفاده از این دستور در دستگاه خود نصب کنید:

npm i -g wrangler

• در Cloudflare ثبت نام کنید، به داشبورد بروید و با کلیک بر روی دکمه “Create” در گزینه “Workers & Pages” یک “سایت صفحات Cloudflare” ایجاد کنید.
• با اجرای این دستور در ترمینال فهرست پروژه خود، از Wrangler CLI برای احراز هویت و استقرار سایت استاتیک در صفحات CF استفاده کنید و مراحل خودکار را برای ورود با OAuth دنبال کنید:

wrangler login 

• با استفاده از این دستور و با نام پروژه، سایت استاتیک را در صفحات CF مستقر کنید.

wrangler pages deploy .

• شما با موفقیت سایت خود را در صفحات Cloudflare مستقر کرده اید!

انتخاب شخصی من:🤔

💻 راه اندازی خودکار: صفحات GitHub انتخاب من خواهد بود. اصلا نیازی به ترمینال نیست. همه چیز را می توان مستقیماً از شعبه مدیریت کرد.

🛠️ رویکرد دستی: برای رویکرد مبتنی بر ترمینال، Surge و Netlify را ترجیح می‌دهم. استفاده از هر دو بسیار سریع و ساده است، با سطح رایگان سخاوتمندانه و مزایای بسیاری.

ممنون از وقتی که گذاشتید

در صورت تمایل نظرات / نظرات خود را در زیر به اشتراک بگذارید. و فراموش نکنید که برای به روز رسانی های بیشتر من را دنبال کنید!

PS:
در لینکدین با من در ارتباط باشید:
https://www.linkedin.com/in/solat-ali