6.8 KiB
| title | localeTitle |
|---|---|
| Use GitHub Static Pages to Host Your Front End Projects | استخدم Gitub Static Pages لاستضافة مشاريع الواجهة الأمامية |
فوائد
أنا أحب Codepen.io ، إنها أداة رائعة وسهلة الاستخدام لتجربة أمامية بسيطة. ولكن مع ازدياد تعقيد مشاريع لجنة التنسيق الفيدرالية ، أدركت أن الترميز محليًا سيوفر لي مجموعة من الصداع. محرر النص الخاص بي و combkit هي فقط waaay أسرع.
- الإكمال التلقائي
- قم بتجميع كل شيء (كان codepen يسحب بالفعل في محاولة لتجميع Jade)
- تحديث تلقائي أفضل
- بنيت في كوخ
- إصدار Git
- تحسين تجربة العقارات الشاشة
جيت إلى جيثب
نظرًا لأنني حفظ بالفعل محليًا ، وباستخدام git للتحكم في الإصدار ، فقد أحسست أيضًا بتحميله إلى GitHub. بالإضافة إلى ذلك ، لدى GitHub خدمة رائعة مجانية لمشاريع الواجهة الأمامية التي تسمى GitHub Pages . مجرد تحديث الريبو الخاص بك والتغييرات الخاصة بك على الهواء مباشرة.
كيف يعمل بسيط. يتحقق GitHub مما إذا كان لدى المستودع فرع يسمى gh-pages ويخدم أي رمز يجلس في هذا الفرع. لا توجد أشياء خلفية هنا ، ولكن HTML و CSS و JS تعمل مثل السحر.
اهم الاشياء اولا
دعونا نجعل مجلد جديد لمشروعك. سأستخدم مشروع Camper News كمثال لي.
حصلت على دليل عملك وجعل واحدة جديدة. يمكنك القيام بذلك في المحطة (أو لا).
الآن ، انتقل إلى دليل المشروع ، و (بالتأكيد في المحطة الطرفية هذه المرة) استخدم الأمر git init . ملاحظة ، يفترض هذا البرنامج التعليمي لديك git مثبتة .
حسنًا ، رائع. نحن الآن على استعداد للعمل.
الخطوات التالية
قم بإنشاء بعض الملفات في دليل campNews الخاص بك. لا أعلم ، ربما index.html وربما app.css و app.js ، أو أيًا من اصطلاحات التسمية التي تفضلها. ضع التعليمات البرمجية الخاصة بك في هذه الملفات. حسنًا ، نحن الآن جاهزون لالتزامنا الأول. يستغرق خطوتين .
- سوف
git add -Aالإعدادية كل هذه الملفات الجديدة والرمز الجديد داخلها git commit -m 'relevant message'بكل العمل الذي قمت به للفرع الذي تتواجد فيه حاليًا ("master" بشكل افتراضي)
المفتاح لهذا الأمر كله
حسنا ، حتى الآن ما زلنا المحلية. هناك بعض الأشياء التي يجب فعلها لأخذ عملنا وتحريكه إلى جيثب. في هذه المرحلة ، أحب تبديل الفروع. تذكر - github يخدم فقط من صفحات gh ، وإذا كنت قد تبعت حتى الآن ، يسمى فرعك "الرئيسي". دعونا نجعل فرع جديد من صفحات gh (محلية).
ستقوم git checkout -b gh-pages بإنشائه ، قم بنسخ كل الأعمال من الرئيسية إلى صفحات gh وقم بتحويلي إلى الفرع. تفو.
سيتخلص git branch -d master من الفرع الرئيسي. يبدو مجنونا وأنا أعلم ، ولكن ماذا نحتاج إليه؟ ما عليك سوى التفكير في صفحات gh باعتبارها الفرع الرئيسي الجديد.
الآن ، git add -A و git commit -m 'relevant message' مرة أخرى ، فقط في حالة. وكن مستعدًا لمغادرة المحرر والمطاريف والدخول إلى الإنترنت لأول مرة.
الذهاب إلى ملفك الشخصي github وإنشاء الريبو الجديد. سمّها شيئًا ملائمًا ، مثل campNews.
بمجرد إنشائه ، ادخل وأمسك عنوان URL لنسخ HTTPS. (تجاهل الملفات في لقطة الشاشة الخاصة بي ، سيكون الريبو الخاص بك فارغًا في هذه المرحلة).
ضع كل شيء معا
ويمكنك ترك العالم عبر الإنترنت. العودة إلى المحطة! دعونا ربط مشروعنا المحلي لهذا الريبو جيثب. كل ما يتطلبه الأمر هو أمر واحد.
git remote add origin <server> فقط استبدل الخادم بعنوان URL HTTPS الذي نسخته للتو. لذا تبدو قيادتي هكذا:
git remote add origin https://github.com/gkobilansky/campNews.git .
حسنًا ، لقد قمنا حتى الآن بما يلي:
- خلق مشروعنا
- إصدارها في بوابة
- ارتكز بعض التغييرات
- حولته إلى فرع "gh-pages"
- توصيله إلى جيثب
اخر خطوة!
دفع لك مشروع لجيثب. مرة أخرى ، بسيطة:
git push origin gh-pages
سيتأكد هذا الأمر من تحميل آخر تعهدات لك إلى github. بمجرد الانتهاء من ذلك مرة واحدة على الأقل ، يجب أن يكون مشروعك متاحًا http: // username .github.io / repository ، لذلك بالنسبة لي فهو http://gkobilansky.github.io/campNews .
بمجرد الانتهاء من كل هذا ، فإن العملية تكرر نفسها فقط:
git add -Agit commit -m 'relevant message'git push origin gh-pages
منحني ، منحنى التعلم أكثر انسيابية من codepen.io ، ولكن أسرع وأكثر مرونة بمجرد الحصول على تعليق منه.
الترميز سعيدة!
PS. بفضل هذا الدليل من قبل روجر دادلر للحفاظ على الأمور بسيطة.