برنامج CG-Blog مش مجرد موقع، ده محرك كامل!
تعرف على Blogging & Portfolio Engine مبني بـ React يخليك تعمل موقعك الشخصي بالكامل من ملفات Markdown وJSON من غير تعقيد.
كتير منكم شاف موقعي الشخصي، بس اللي ممكن ميكونش واضح إن ده مش مجرد موقع static... ده blogging & portfolio engine كامل تقدر انت تستخدمه لنفسك!
الموقع مكون من جزئين، والاتنين فرونت اند 😅
الجزء الأول هو الـ engine نفسه، مكتوب بـ React Router v7 ووظيفته إنه يعمل fetch لملفات static (Markdown و JSON) من أي مكان تختاره. // في حالتي أنا مستخدم cloudflare pages
الجزء التاني هو الـ engine الـ engine متصمِّم يكون dynamic جدًا ويتعامل مع أي inputs تجيله: معندكش مشاريع؟ القسم هيختفي مش كاتب author للمقال؟ مش هيظهر أي حاجة مش محتاجها؟ ببساطة optional
كل النصوص في الموقع تقدر تغيّرها من الـ JSON وأي صورة تقدر تستبدلها مباشرة من غير ما تلمس الكود.
عملت السيستم ده كده لإنّي ملقتش حل بسيط يجمع بين الـ blogging والـ portfolio، ويكون سهل لأي مبرمج يستخدمه، حتى لو مش Frontend.
أقرب حاجة كانت Framer، بس برضه محتاج حد عنده عقلية Frontend عشان يتعامل معاه بسهولة. طب تستخدمه إزاي؟
1- هتاخد محتوى فولدر templates وتعمله hosting في أي مكان، وده اللي هتغير فيه براحتك. 2- تعمل fork للبروجيكت (الـ Engine) 3- تغيّر لينك الـ data في constants.ts للينك بتاعك (في خطوة 1) 4- تعمل deploy للـ engine على Vercel أو أي منصة تحبها (لو حابب مزايا الـ seo لازم المنصة تدعم الـ SSR) وبس كده 😅 بقى عندك موقع تقدر تخصصه براحتك
البروجيكت Open Source بطبيعة الحال، وفيه docs واضحة خطوة بخطوة لحد ما تطلّع موقعك شغّال. 👇 دمتم بخير ❤️ hashtag#OpenSource hashtag#WebDevelopment hashtag#React hashtag#Frontend hashtag#JavaScript hashtag#Portfolio hashtag#Blogging hashtag#DeveloperTools hashtag#SoftwareEngineering hashtag#SideProject