در این مقاله، قدم به قدم نحوه ساخت یک وبسایت استاتیک با استفاده از کتابخانه React و میزبانی آن روی GitHub Pages را آموزش میدهم . این روش مناسب افرادی است که می‌خواهند بدون نیاز به سرور یا زیرساخت‌های پیچیده، یک وبسایت ساده راه‌اندازی کنند. با این آموزش، شما میتوانید وبسایت خود را به صورت آنلاین و رایگان منتشر کنید.
برای اینکه وبسایت خودتون را در روی github pages بزارید نیاز است یک ریپازیتوری جدید ایجاد کنید که برای این کار مراحل زیر را دنبال کنید
ابتدا وارد اکانت github خود شوید بر روی گزینه create repository (اگر از قبل repository دارید روی new کلیک کنید) کلیک کنید
در صفحه جدید که وارد میشوید باید موارد زیر را انجام دهید
https://<username>.github.io/<repo-name>
۲. اگر دوست داشتید میتوانید توضحاتی راجب پروژه بنویسد ولی اختیاری هست و حتما باید گزینه public را انتخاب کنید
۳. گزینه های gitignore , readmi نیاز به انتخواب کردنشون ندارید و برای licence میتونید راجب انواع مختلف تحقیق کنید ولی به نظر من برای وبسایت نیازی به انتخواب ندارید
ابتدا باید یک پروژه جدید React بسازید. اگر هنوز Node.js را روی سیستم خود نصب نکرده‌اید، به Node.js مراجعه کنید و آن را نصب کنید. سپس با استفاده از دستور زیر پروژه جدیدی ایجاد کنید:
npx create-react-app my-static-site
cd my-static-site
برای انتشار پروژه روی GitHub Pages، باید پکیج gh-pages را نصب کنیم. این پکیج به شما کمک می‌کند تا پروژه را به راحتی روی GitHub منتشر کنید:
npm install gh-pages --save-devحالا باید فایل package.json را ویرایش کنیم. خط زیر را به آن اضافه کنید تا آدرس صفحه GitHub شما مشخص شود:
اگر نام ریپازیتوری را با username یکی انتخواب کردید باید به صورت زیر url را بنویسید
http://{repo-name}.github.ioمانند pikos95110.github.io در غیر این صورت به صورت زیر بنویسید
"homepage": "https://{username}.github.io/{reponame}" و دو اسکریپت جدید نیز به بخش "scripts" اضافه کنید:
"scripts": {
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
}
الان فایل اسکریپت شما باید به صورت پایین باشد
{
"name": "my-static-site",
"version": "0.1.0",
"homepage": "https://pikos95110.github.io",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
] },
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]},
"devDependencies": {
"gh-pages": "^6.1.1"
}
}
ابتدا یک مخزن (repository) جدید در GitHub ایجاد کنید. سپس، مخزن را به پروژه خود اضافه کرده و فایل‌ها را آپلود کنید:
git init
git remote add origin https://github.com/{نام کاربری شما}/{نام ریپازیتوری شما}.git
git add .
git commit -m "Initial commit"
git push -u origin master
با اجرای دستور زیر، پروژه شما روی GitHub Pages منتشر می‌شود:
npm run deploy
بعد از مشاهده کردن تصویر بالا یعنی سایت شما به درستی در github pages اضافه شده است و باید ان را بازدن url که در قسمت homepage وارد کردید مشاهدکنید (گاهی چند دقیقه طول میکشد) اما اگر مشاهده نگردید ممکن مشکل از تنظیمات page github باشد به تنظیمات ریپازیتوری رفته چک کنید که source پروژه از branch درستی انتخواب شده باشدکه gh-pages میباشد
حالا باید بتوانید به درستی صفحه اول ری اکت را در web page خودتون ببینید .
در این مقاله هدف من بیشتر پیاده سازی یک پروژه با github pages است نه اموزش ری اکت ولی برای دوستانی که با ری اکت اشنایی ندارند دوره های اموزش بسیار زیادی وجود دارد که میتوانند از انها استفاده کنند که اگر بخوام یکی از انها را معرفی کنم دوره اموزش جامع ری‌اکت از کانال یوتیوبی Sarvin Style Coding میباشد که از نظر من برای شروع دوره خوبی است و لی من در این قسمت از مقاله راجب یکی از چالش‌ها ممکن است با ان در زمانی قصد دارید React را روی GitHub Pages پیاده‌سازی کنید روبرو میشوید صحبت کنم و ان چالش‌ها مربوط به مسیریابی (Routing) در React است که ممکن است به درستی کار نکند
روتر BrowserRouter در React از History API مرورگر استفاده می‌کند تا مسیرها را مدیریت کند، اما این روش در GitHub Pages می‌تواند به مشکل برخورد کند. علت اصلی مشکل این است که GitHub Pages فقط فایل‌های استاتیک را می‌پذیرد (مانند index.html یا static/ assets) و نمی‌تواند درخواست‌های URLهای مستقیم مانند /contact را به درستی مدیریت کند به طور ساده تر بخوام بگم Pages به دلیل نداشتن قابلیت مسیریابی سمت سرور (Server-side Routing) با BrowserRouter مشکل دارد.
حل مشکل با استفاده ازHashRouter:
یک از ساده ترین راه حل حل های که میتوانید استفاده کنید استفاده از HashRouter به جایBrowserRouter میباشد . این روش URLها را به صورت https://mohsenakbari79.github.io/#/contact مدیریت می‌کند، و چون GitHub Pages نیازی به مسیریابی سمت سرور ندارد، بدون مشکل کار خواهد کرد:
import { HashRouter as Router, Route, Routes } from 'react-router-dom'; <Router> <Routes> <Route path="/" element={<Home />} /> <Route path="/contact" element={<Contact />} /> </Routes> </Router>
در این مقاله به نحوه ساخت و پیاده‌سازی یک وبسایت با استفاده از React و GitHub Pages پرداختیم. به عنوان نمونه، من رزومه خودم را به صورت یک وبسایت پیاده‌سازی کرده‌ام که میتوانید آن را مشاهده کنید. هدف اصلی، ارائه مراحل عملی برای انتشار یک پروژه در GitHub Pages و حل چالش‌های احتمالی مانند مسیریابی بود. امیدوارم این راهنما به شما در ساخت وبسایت خود کمک کرده باشد. اگر سوالی دارید، خوشحال می‌شوم در قسمت کامنت‌ها پاسخگو باشم!
