Afrooz is a project template designed for building static HTML/CSS web pages using React. It leverages React's component-based architecture to make development structured, maintainable, and scalable while generating optimized static files for deployment.
- Component-Based Development: Utilize React's power to create reusable and maintainable UI components.
- Static HTML Generation: Convert React components into static HTML for fast-loading web pages.
- CSS and Assets Handling: Easily include and manage CSS and assets like images in your projects.
- Automation: Automated rendering, folder structure handling, and build-cleanup processes for efficiency.
Follow these steps to set up and start using Afrooz.
-
Clone the repository:
git clone https://github.com/ShahroozD/Afrooz.git cd Afrooz -
Install dependencies:
npm install
Afrooz/
├── src/
│ ├── Pages/
│ │ ├── main/
│ │ │ ├── index.jsx
│ │ │ ├── render.jsx
│ │ ├── 404/
│ │ ├── index.jsx
│ │ ├── render.jsx
│ ├── utils/
│ │ ├── renderUtils.js
│ │ ├── pathHelpers.js
├── public/
├── webpack.config.js
├── package.json
-
Build the Render Files: Run Webpack to compile the render scripts:
npm run build
This will create static HTML files in the
public/directory.And remove the temporary
dist/directory after render.
-
Add a new folder under
src/Pages/, e.g.,AboutPage/. -
Create your React component in
index.jsx. -
Create a
render.jsfile in the same folder:import path from "path"; import { renderPage } from "../../utils/renderUtils"; import { resolveFromRoot } from "../../utils/pathHelpers"; import Page from "."; const scriptName = path.basename(__filename, '-render.js'); const folderName = scriptName; const outputPath = resolveFromRoot("public", `${folderName}.html`); renderPage(Page, outputPath);
-
Run the build and render steps to generate the new page.
After generating the static files, you can deploy the contents of the public/ folder to any static hosting service, such as:
Contributions are welcome! If you have ideas for improvement or want to report issues:
- Fork the repository.
- Create a new branch (
git checkout -b feature/your-feature). - Make your changes and commit (
git commit -m 'Add your feature'). - Push to the branch (
git push origin feature/your-feature). - Open a pull request.
This project is licensed under the MIT License - see the LICENSE file for details.
Enjoy building amazing static sites with Afrooz! 🚀
افروز یک قالب پروژه برای ساخت صفحات وب استاتیک HTML و CSS است که از ریاکت استفاده میکند. این پروژه از معماری مبتنی بر کامپوننت ریاکت بهره میبرد تا توسعه را ساختارمند، قابل نگهداری و مقیاسپذیر کند، و در نهایت فایلهای استاتیک بهینهسازی شده برای استقرار تولید میکند.
- توسعه مبتنی بر کامپوننت: از قدرت ریاکت برای ایجاد کامپوننتهای UI قابل استفاده مجدد و قابل نگهداری استفاده کنید.
- تولید HTML استاتیک: کامپوننتهای ریاکت را به HTML استاتیک تبدیل کنید تا صفحات وب سریعالعمل بسازید.
- مدیریت CSS و منابع: بهراحتی فایلهای CSS و منابعی مانند تصاویر را در پروژههای خود بگنجانید و مدیریت کنید.
- اتوماتیکسازی: رندر، مدیریت ساختار پوشهها و فرآیندهای پاکسازی را برای کارایی بیشتر اتوماتیکسازی کنید.
مراحل زیر را برای راهاندازی و استفاده از افروز دنبال کنید.
-
مخزن را کلون کنید:
git clone https://github.com/ShahroozD/Afrooz.git cd Afrooz -
وابستگیها را نصب کنید:
npm install
Afrooz/
├── src/
│ ├── Pages/
│ │ ├── main/
│ │ │ ├── index.jsx
│ │ │ ├── render.jsx
│ │ ├── 404/
│ │ ├── index.jsx
│ │ ├── render.jsx
│ ├── utils/
│ │ ├── renderUtils.js
│ │ ├── pathHelpers.js
├── public/
├── webpack.config.js
├── package.json
ساخت فایلهای رندر: با اجرای Webpack فایلهای رندر را کامپایل کنید:
npm run buildاین کار فایلهای استاتیک HTML را در پوشه public/ ایجاد میکند.
و سپس پوشه موقت dist/ را بعد از رندر حذف میکند
-
یک پوشه جدید در
src/Pages/اضافه کنید، مثلاًAboutPage/. -
کامپوننت ریاکت خود را در
index.jsxایجاد کنید. -
یک فایل
render.jsدر همان پوشه ایجاد کنید:import path from "path"; import { renderPage } from "../../utils/renderUtils"; import { resolveFromRoot } from "../../utils/pathHelpers"; import Page from "."; const scriptName = path.basename(__filename, '-render.js'); const folderName = scriptName; const outputPath = resolveFromRoot("public", `${folderName}.html`); renderPage(Page, outputPath);
-
مراحل ساخت و رندر را اجرا کنید تا صفحه جدید تولید شود.
پس از ایجاد فایلهای استاتیک، میتوانید محتوای پوشه public/ را به هر سرویس میزبانی استاتیک مثل زیر منتقل کنید:
مشارکتها استقبال میشود! اگر ایدهای برای بهبود دارید یا میخواهید مشکلات را گزارش کنید:
- مخزن را فورک کنید.
- یک شاخه جدید ایجاد کنید (
git checkout -b feature/your-feature). - تغییرات خود را اعمال کنید و کامیت کنید (
git commit -m 'Add your feature'). - شاخه را پوش کنید (
git push origin feature/your-feature). - یک درخواست کشش باز کنید.
این پروژه تحت مجوز MIT منتشر شده است - برای جزئیات به فایل LICENSE مراجعه کنید.
از توسعه صفحات استاتیک با افروز لذت ببرید! 🚀