آیا تا به حال یک پروژه جانبی را به پایان رسانده اید – شاید یک برنامه React جالب ، یک وب سایت استاتیک یا یک نمونه کارها – و سپس از خود پرسید “حالا چی؟ چگونه این را زنده می کنم؟”
یکی از ساده ترین راه حل ها (و رایگان!) است صفحات githubبشر
در این مقاله ، ما به این دلیل شیرجه می زنیم که از آن استفاده می کنید gh-pages، نحوه تنظیم آن ، و گام به گام نحوه استقرار پروژه خود.
بیایید وارد آن شویم! 🎯
📌 مشکل: شما یک پروژه دارید اما میزبان نیست
وقتی یک پروژه جلوی محلی می سازید ، فقط در رایانه شما است. برای نشان دادن آن به جهان (یا یک استخدام کننده) ، باید آن را در جایی میزبانی کنید.
گزینه های سنتی میزبانی (NetLify ، Vercel ، AWS) عالی هستند اما می توانند باشند بیش از حد برای پروژه های کوچک
صفحات github یک جایگزین عالی است:
- رایگان است
- پیکربندی ساده است.
- این مستقیماً با مخازن GitHub شما ادغام می شود.
- نیازی به سرور پس زمینه نیست!
با این حال ، تنظیم دستی پروژه خود را برای صفحات GitHub (به خصوص برای برنامه های React یا Vite) می تواند یک درد باشد – زیرا شما اغلب به یک فرآیند ساخت و یک شاخه خاص نیاز دارید (gh-pages) برای میزبانی کد کامپایل شده خود.
اینجاست gh-pages بسته وارد می شود!
🛠 روش: از gh-pages بسته NPM
gh-pages استقرار را برای شما خودکار می کند:
- پروژه شما را می سازد.
- خاص ایجاد می کند
gh-pagesشاخه - پرونده های ساخته شده شما را در آنجا فشار می دهد.
- GitHub سپس به صورت زنده خدمت می کند!
در اینجا چگونه می توانید آن را تنظیم کنید:
⚙ راهنمای تنظیم مرحله به مرحله
1. نصب gh-pages
ابتدا باید اضافه کنید gh-pages به عنوان یک وابستگی به توسعه:
npm install gh-pages --save-dev
این به شما امکان می دهد دستورات استقرار را به راحتی اجرا کنید.
2. اضافه کردن homepage زمینه در خود package.json
صفحات GitHub باید بداند که برنامه شما در کجا زندگی خواهد کرد.
خود را باز کنید package.json وت موارد زیر را در سطح بالا اضافه کنید:
"homepage": "https://.github.io/"
به عنوان مثال:
"homepage": "https://johndoe.github.io/my-portfolio"
👉 این تضمین می کند که دارایی ها و مسیرهای شما به درستی اداره می شوند.
3. خود را به روز کنید scripts در package.json
هنوز در package.json، در زیر "scripts" بخش ، اضافه کنید:
"scripts": {
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
}
-
predeployاراده ساخت خودکار پروژه شما قبل از استقرار -
deployاراده فشار درbuildمحتوای پوشه بهgh-pagesشاخه
توجه: اگر از آن استفاده می کنید سریع، پوشه خروجی شما ممکن است باشد
distبه جایbuildبشر بر اساس آن تنظیم کنید!
4. پروژه خود را به GitHub فشار دهید
اگر قبلاً یک repo git را آغاز نکرده اید ، انجام دهید:
git init
git add .
git commit -m "Initial commit"
git branch -M main
git remote add origin https://github.com//.git
git push -u origin main
این تضمین می کند که GitHub در مورد پروژه شما می داند و می تواند آن را میزبانی کند.
5. استقرار!
اکنون قسمت سرگرم کننده
اجرا:
npm run deploy
این دستور:
- روند ساخت شما را اجرا می کند.
- پرونده های کامپایل شده را به
gh-pagesشاخه - به طور خودکار استقرار را تنظیم می کند.
6. تنظیمات صفحات GitHub (اختیاری) را بررسی کنید
- به مخزن خود در GitHub بروید.
- به سمت تنظیمات → صفحاتبشر
- در زیر “منبع” ، انتخاب کنید
gh-pagesشاخهبشر - GitHub URL را که سایت شما زنده است نمایش می دهد.
بوم 🚀 پروژه شما اکنون با جهان زنده و به اشتراک گذاشته شده است.
🧩 GOTCHA های مشترک
-
URL صفحه اصلی اشتباه: همیشه از قالب استفاده کنید
https://بشر.github.io/ -
404 خطا در REFRESH (روتر React): صفحات GitHub مسیریابی سمت مشتری را به خوبی خارج از جعبه انجام نمی دهد. ممکن است شما نیاز به ایجاد
404.htmlفایل را هدایت کنید یا خود را تنظیم کنیدBrowserRouterبهHashRouterبشر -
فهرست خروجی اشتباه: اگر از ابزاری مانند استفاده می کنید سریع، مطمئن شوید که پوشه صحیح را مستقر کنید (
distنهbuild).
thoughts افکار نهایی
استقرار پروژه ها نباید سخت تر از ساختن آنها باشد!
با تشکر از ابزارهایی مانند gh-pages، به اشتراک گذاشتن کار شما بی دردسر می شود.
حالا شما بهانه ای ندارید – استقرار آن پروژه!
آن را به اشتراک بگذارید ، آن را در نمونه کارها خود قرار دهید ، برای آن کار اقدام کنید و آنچه را که ساخته اید نشان دهید.
🚀 نکته جایزه: استقرار خودکار
شما حتی می توانید هر بار که فشار می آورید اقدامات GitHub را برای مستقر کردن خودکار تنظیم کنید mainبشر اما این یک داستان برای مقاله دیگری است …
با تشکر از خواندن!
اگر این آموزش را دوست داشتید ، یک ❤ یا اظهار نظر در زیر کنید – دوست دارم ببینم چه چیزی مستقر شده اید!
