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

فرض کنید پروژه react نوشته ایم. برای راه اندازی آن مراحل زیر را دنبال کنید:

(فرض بر اینست که اکانت گیت هاب دارید، با دستورات گیت آشنا هستید و node.js را هم بر روی سیستم نصب دارید)

1- یک پروژه react بسازید:

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

cd desktop 

و با دستور زیر ، پروژه را بسازید:

npx create-react-app "your-project-name"

بعد وارد فولدر پروژه شوید:

cd "your-project-name"

* برای اطلاعات بیشتر ، این لینک را ببینید.

2- یک repository بسازید:

وارد سایت github شوید و یک repository یا مخزن برای پروژتان بسازید:

3- کدهای پروژه را روی گیت هاب push کنید:

git init
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/nelsonmic/testxx.git
git push -u origin main

* برای آشنایی با دستورات گیت ، این لینک را ببینید.

4- نصب سرویس gh–pages:

با دستور زیر،gh-pages را نصب کنید:

npm install gh-pages --save-dev

5- اضافه کردن اسکریپت های deploy:

وارد فایل package.json شوید و property زیر را به این فایل اضافه کنید:

"homepage":"http://{github-username}.github.io/{repo-name}",

* به جای {github-username} ، یوزرنیم گیت هابتان و به جای {repo-name} هم اسم repository پروژه تان را قرار دهید. در واقع این آدرسی است که پروژه شما روی آن بالا می آید.

حالا در قسمت scripts ، اسکریپت های زیر را قرار دهید:

"predeploy" : "npm run build",
"deploy" : "gh-pages -d build",

6- تغییرات را commit کرده و بعد هم push کنید:

git add -A
git commit -m "setup gh-pages"
git push origin main

در آخر، با دستور زیر، پروژه را ران کنید (بعد از این دستور فایل های build در فولدر پرژه تان ساخته می شوند)

npm run deploy

7- راه اندازی Pages:

حالا کافی است تا وارد سایت github شوید، روی repository پروژه تان بروید و گزینه settings و بعد هم pages را کلیک کنید. همانند تصویر زیر می توانید ببینید که پروژه تان آنلاین شده 🙂

نکته: اگر با رفتن به آدرس پروژه تان، به جای پروژه ، محتوای فایل readme را می بینید، به این خاطر است که pages ، فایل index.html پروژه تان را پیدا نمی کند و به جای آن فایل readme.md را نمایش می دهد. کل محتوای فولدر build (که حاوی فایل index.html هم هست) را روی فولدر root پروژه تان کپی پیست کنید.

نکته: بهتر است که یک branch جدا (مثلاً: gh-pages) درست کنید که از branch اصلی منشعب شده و آدرس gh-pages را به جای main به pages بدهید.

نکته: اگر در پروژه تان از Route استفاده می کنید، می بینید که هیچ کدام از صفحه هایی که با Route ساختید نمایش داده نمی شوند. برای درست کردن این مشکل، باید به جای BrowserRouter از HashRouter در فایل index.js استفاده کنید:

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <HashRouter>
      <App />
    </HashRouter>
  </React.StrictMode>
);