برنامه نویسی

راهنمای گام به گام برای استقرار پروژه Next.js به عنوان صفحات GitHub

Summarize this content to 400 words in Persian Lang
استقرار a Next.js پروژه به صفحات GitHub می تواند بسیار چالش برانگیز باشد، به خصوص اگر روش های مختلفی را دنبال کنید که ممکن است آن طور که انتظار می رود کار نکنند. پس از مبارزه با رویکردها و پیکربندی های متعدد، سرانجام راه حلی پیدا کردم که به طور یکپارچه کار می کند. این راهنما شما را گام به گام از طریق این فرآیند راهنمایی می‌کند و اطمینان می‌دهد که می‌توانید با موفقیت راه‌اندازی کنید Next.js کاربرد.

نکته مهم: ایجاد مخزن شما

قبل از شروع، ایجاد یک مخزن در GitHub به طور خاص برای پروژه شما ضروری است. برای استقرار یک سایت کاربر در صفحات GitHub، باید مخزن خود را با فرمت زیر نام گذاری کنید:

.github.io

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

به عنوان مثال، اگر نام کاربری GitHub شما LovelyDev829 است، مخزن شما باید LovelyDev829.github.io نامگذاری شود. این قرارداد نامگذاری بسیار مهم است زیرا به GitHub اجازه می دهد آن را به عنوان یک سایت کاربر تشخیص دهد و به درستی آن را ارائه دهد.

راه اندازی اولیه: پیکربندی package.json

قبل از اینکه وارد فرآیند استقرار شویم، بیایید آن را تنظیم کنیم package.json درست فایل کنید این فایل برای مدیریت اسکریپت هایی که توسعه، ساخت و استقرار شما را تسهیل می کنند ضروری است Next.js کاربرد.در اینجا نحوه شما است package.json باید نگاه کرد:

{
“name”: “LovelyDev829-github-page”,
“version”: “1.0.0”,
“homepage”: “https://LovelyDev829.github.io”,
“scripts”: {
“dev”: “next dev”,
“build”: “next build”,
“export”: “next export”,
“start”: “next start”,
“predeploy”: “touch out/.nojekyll”,
“deploy”: “gh-pages -d out –dotfiles”
},
“dependencies”: {

}
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

صفحه اصلی: این را روی URL صفحات GitHub خود تنظیم کنید. این تضمین می کند که مسیرها به درستی حل و فصل می شوند که برنامه شما ساخته و اجرا می شود.

توسعه دهنده: شروع می کند Next.js سرور توسعه

ساختن: برنامه را می سازد و آن را به صورت فایل های ثابت صادر می کند.

شروع کنید: شروع می کند Next.js سرور تولید

از قبل مستقر کنید: قبل از استقرار یک فایل .nojekyll خالی در فهرست خارج ایجاد می کند.

استقرار: محتویات فهرست خروجی را در صفحات GitHub، از جمله فایل‌های نقطه‌ای مانند nojekyll.

مرحله 1: پروژه خود را بسازید

قبل از استقرار، باید خود را آماده کنید Next.js برنامه برای صادرات استاتیک این شامل ساخت پروژه و تولید فایل های لازم است.دستور Build را اجرا کنید:ترمینال خود را باز کنید و به فهرست پروژه خود بروید. دستور زیر را اجرا کنید:

npm run build

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

صادرات پروژه:پس از ساخت، پروژه خود را برای ایجاد یک نسخه استاتیک صادر کنید:

npm run export

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

این دستور یک را ایجاد می کند out پوشه حاوی تمام فایل های ثابت مورد نیاز برای استقرار.

مرحله 2: فایل .nojekyll را ایجاد کنیدبرای اینکه صفحات GitHub از پردازش فایل‌های شما از طریق Jekyll جلوگیری کنید (که می‌تواند فایل‌هایی را که با زیرخط شروع می‌شوند نادیده بگیرد)، باید یک .nojekyll فایل در پوشه outایجاد فایل:دستور زیر را در ترمینال خود اجرا کنید:

touch out/.nojekyll

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

توجه داشته باشید: .nojekyll فایل باید خالی باشد نیازی به نوشتن چیزی درون آن نیست.

مرحله 3: برنامه خود را مستقر کنید

اکنون که همه چیز تنظیم شده است، وقت آن است که برنامه خود را در صفحات گیت هاب مستقر کنید.دستور Deployment را اجرا کنید:دستور زیر را در ترمینال خود اجرا کنید:

npm run deploy

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

این دستور محتویات را فشار می دهد out دایرکتوری به gh-pages شعبه مخزن شما

مرحله 4: تنظیمات GitHub را پیکربندی کنید

پس از استقرار، باید تنظیمات GitHub Pages را برای مخزن خود پیکربندی کنید:

به مخزن خود در GitHub بروید: به مخزن خود در GitHub بروید.

دسترسی به تنظیمات: روی تب “تنظیمات” کلیک کنید.

پیکربندی صفحات: به قسمت «صفحات» به پایین بروید. در بخش «منبع»، را انتخاب کنید gh-pages به عنوان منبع استقرار خود منشعب کنید و تغییرات را ذخیره کنید.

مرحله 5: استقرار خود را تأیید کنید

هنگامی که تمام مراحل قبلی را کامل کردید، مهم است که بررسی کنید که برنامه شما فعال است و به درستی کار می کند:

URL سایت خود را بررسی کنید: برو به https://github.io. جایگزین کنید با نام کاربری واقعی GitHub شما. در این مورد، https://LovelyDev829.github.io

بررسی عملکرد: مرورگر خود را باز کنید و به این URL بروید. اطمینان حاصل کنید که همه صفحات به درستی بارگیری می شوند و سبک ها همانطور که انتظار می رود اعمال می شوند.

کنسول را برای خطا بررسی کنید: از ابزارهای توسعه دهنده مرورگر خود (معمولاً با فشار دادن F12 قابل دسترسی است) برای بررسی هرگونه خطای کنسول یا مشکلات بارگیری منابع استفاده کنید.

نتیجه گیری

با دنبال کردن این مراحل، اکنون باید یک کاملاً کاربردی داشته باشید Next.js برنامه مستقر در صفحات GitHub. اگر با مشکلی مواجه شدید، هر مرحله را دوباره بررسی کنید، به خصوص اطمینان حاصل کنید که .nojekyll فایل موجود است و شما از دستورات استقرار صحیح استفاده می کنید.

لینک Repository و Live را بررسی کنید.مخزن ستاره و من را در Github دنبال کنید

استقرار a Next.js پروژه به صفحات GitHub می تواند بسیار چالش برانگیز باشد، به خصوص اگر روش های مختلفی را دنبال کنید که ممکن است آن طور که انتظار می رود کار نکنند. پس از مبارزه با رویکردها و پیکربندی های متعدد، سرانجام راه حلی پیدا کردم که به طور یکپارچه کار می کند. این راهنما شما را گام به گام از طریق این فرآیند راهنمایی می‌کند و اطمینان می‌دهد که می‌توانید با موفقیت راه‌اندازی کنید Next.js کاربرد.

نکته مهم: ایجاد مخزن شما

قبل از شروع، ایجاد یک مخزن در GitHub به طور خاص برای پروژه شما ضروری است. برای استقرار یک سایت کاربر در صفحات GitHub، باید مخزن خود را با فرمت زیر نام گذاری کنید:

.github.io
وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

به عنوان مثال، اگر نام کاربری GitHub شما LovelyDev829 است، مخزن شما باید LovelyDev829.github.io نامگذاری شود. این قرارداد نامگذاری بسیار مهم است زیرا به GitHub اجازه می دهد آن را به عنوان یک سایت کاربر تشخیص دهد و به درستی آن را ارائه دهد.

راه اندازی اولیه: پیکربندی package.json

قبل از اینکه وارد فرآیند استقرار شویم، بیایید آن را تنظیم کنیم package.json درست فایل کنید این فایل برای مدیریت اسکریپت هایی که توسعه، ساخت و استقرار شما را تسهیل می کنند ضروری است Next.js کاربرد.
در اینجا نحوه شما است package.json باید نگاه کرد:

{
  "name": "LovelyDev829-github-page",
  "version": "1.0.0",
  "homepage": "https://LovelyDev829.github.io",
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "export": "next export",
    "start": "next start",
    "predeploy": "touch out/.nojekyll",
    "deploy": "gh-pages -d out --dotfiles"
  },
  "dependencies": {
    ...
  }
}
وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

  • صفحه اصلی: این را روی URL صفحات GitHub خود تنظیم کنید. این تضمین می کند که مسیرها به درستی حل و فصل می شوند که برنامه شما ساخته و اجرا می شود.
  • توسعه دهنده: شروع می کند Next.js سرور توسعه
  • ساختن: برنامه را می سازد و آن را به صورت فایل های ثابت صادر می کند.
  • شروع کنید: شروع می کند Next.js سرور تولید
  • از قبل مستقر کنید: قبل از استقرار یک فایل .nojekyll خالی در فهرست خارج ایجاد می کند.
  • استقرار: محتویات فهرست خروجی را در صفحات GitHub، از جمله فایل‌های نقطه‌ای مانند nojekyll.

مرحله 1: پروژه خود را بسازید

قبل از استقرار، باید خود را آماده کنید Next.js برنامه برای صادرات استاتیک این شامل ساخت پروژه و تولید فایل های لازم است.
دستور Build را اجرا کنید:
ترمینال خود را باز کنید و به فهرست پروژه خود بروید. دستور زیر را اجرا کنید:

npm run build
وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

صادرات پروژه:
پس از ساخت، پروژه خود را برای ایجاد یک نسخه استاتیک صادر کنید:

npm run export
وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

این دستور یک را ایجاد می کند out پوشه حاوی تمام فایل های ثابت مورد نیاز برای استقرار.

مرحله 2: فایل .nojekyll را ایجاد کنید
برای اینکه صفحات GitHub از پردازش فایل‌های شما از طریق Jekyll جلوگیری کنید (که می‌تواند فایل‌هایی را که با زیرخط شروع می‌شوند نادیده بگیرد)، باید یک .nojekyll فایل در پوشه out
ایجاد فایل:
دستور زیر را در ترمینال خود اجرا کنید:

touch out/.nojekyll
وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

توجه داشته باشید: .nojekyll فایل باید خالی باشد نیازی به نوشتن چیزی درون آن نیست.

مرحله 3: برنامه خود را مستقر کنید

اکنون که همه چیز تنظیم شده است، وقت آن است که برنامه خود را در صفحات گیت هاب مستقر کنید.
دستور Deployment را اجرا کنید:
دستور زیر را در ترمینال خود اجرا کنید:

npm run deploy
وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

این دستور محتویات را فشار می دهد out دایرکتوری به gh-pages شعبه مخزن شما

مرحله 4: تنظیمات GitHub را پیکربندی کنید

پس از استقرار، باید تنظیمات GitHub Pages را برای مخزن خود پیکربندی کنید:

  1. به مخزن خود در GitHub بروید: به مخزن خود در GitHub بروید.
  2. دسترسی به تنظیمات: روی تب “تنظیمات” کلیک کنید.
  3. پیکربندی صفحات: به قسمت «صفحات» به پایین بروید. در بخش «منبع»، را انتخاب کنید gh-pages به عنوان منبع استقرار خود منشعب کنید و تغییرات را ذخیره کنید.

مرحله 5: استقرار خود را تأیید کنید

هنگامی که تمام مراحل قبلی را کامل کردید، مهم است که بررسی کنید که برنامه شما فعال است و به درستی کار می کند:

  1. URL سایت خود را بررسی کنید: برو به https://github.io. جایگزین کنید با نام کاربری واقعی GitHub شما. در این مورد، https://LovelyDev829.github.io
  2. بررسی عملکرد: مرورگر خود را باز کنید و به این URL بروید. اطمینان حاصل کنید که همه صفحات به درستی بارگیری می شوند و سبک ها همانطور که انتظار می رود اعمال می شوند.
  3. کنسول را برای خطا بررسی کنید: از ابزارهای توسعه دهنده مرورگر خود (معمولاً با فشار دادن F12 قابل دسترسی است) برای بررسی هرگونه خطای کنسول یا مشکلات بارگیری منابع استفاده کنید.

نتیجه گیری

با دنبال کردن این مراحل، اکنون باید یک کاملاً کاربردی داشته باشید Next.js برنامه مستقر در صفحات GitHub. اگر با مشکلی مواجه شدید، هر مرحله را دوباره بررسی کنید، به خصوص اطمینان حاصل کنید که .nojekyll فایل موجود است و شما از دستورات استقرار صحیح استفاده می کنید.

لینک Repository و Live را بررسی کنید.
مخزن ستاره و من را در Github دنبال کنید

نوشته های مشابه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دکمه بازگشت به بالا