freeCodeCamp/guide/arabic/miscellaneous/use-github-static-pages-to-.../index.md

94 lines
6.8 KiB
Markdown
Raw Normal View History

---
title: Use GitHub Static Pages to Host Your Front End Projects
localeTitle: استخدم Gitub Static Pages لاستضافة مشاريع الواجهة الأمامية
---
**فوائد**
أنا أحب Codepen.io ، إنها أداة رائعة وسهلة الاستخدام لتجربة أمامية بسيطة. ولكن مع ازدياد تعقيد مشاريع لجنة التنسيق الفيدرالية ، أدركت أن الترميز محليًا سيوفر لي مجموعة من الصداع. محرر النص الخاص بي و [combkit](https://incident57.com/codekit/) هي فقط [waaay](https://incident57.com/codekit/) أسرع.
* الإكمال التلقائي
* قم بتجميع كل شيء (كان codepen يسحب بالفعل في محاولة لتجميع Jade)
* تحديث تلقائي أفضل
* بنيت في كوخ
* إصدار Git
* تحسين تجربة العقارات الشاشة
## جيت إلى جيثب
نظرًا لأنني حفظ بالفعل محليًا ، وباستخدام git للتحكم في الإصدار ، فقد أحسست أيضًا بتحميله إلى GitHub. بالإضافة إلى ذلك ، لدى GitHub خدمة رائعة مجانية لمشاريع الواجهة الأمامية التي تسمى [GitHub Pages](https://pages.github.com/) . مجرد تحديث الريبو الخاص بك والتغييرات الخاصة بك على الهواء مباشرة.
كيف يعمل بسيط. يتحقق GitHub مما إذا كان لدى المستودع فرع يسمى `gh-pages` ويخدم أي رمز يجلس في هذا الفرع. لا توجد أشياء خلفية هنا ، ولكن HTML و CSS و JS تعمل مثل السحر.
## اهم الاشياء اولا
دعونا نجعل مجلد جديد لمشروعك. [سأستخدم](http://www.freecodecamp.com/challenges/stylize-stories-on-camper-news) مشروع [Camper News](http://www.freecodecamp.com/challenges/stylize-stories-on-camper-news) كمثال لي.
حصلت على دليل عملك وجعل واحدة جديدة. يمكنك القيام بذلك في المحطة (أو لا).
![دليل المشروع](//discourse-user-assets.s3.amazonaws.com/original/2X/2/2e3faaa2752657c592a9991ceed29a0200f332e6.png)
الآن ، انتقل إلى دليل المشروع ، و (بالتأكيد في المحطة الطرفية هذه المرة) استخدم الأمر `git init` . ملاحظة ، يفترض هذا البرنامج التعليمي [لديك git مثبتة](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git) .
حسنًا ، رائع. نحن الآن على استعداد للعمل.
## الخطوات التالية
قم بإنشاء بعض الملفات في دليل campNews الخاص بك. لا أعلم ، ربما index.html وربما app.css و app.js ، أو أيًا من اصطلاحات التسمية التي تفضلها. ضع التعليمات البرمجية الخاصة بك في هذه الملفات. حسنًا ، نحن الآن جاهزون لالتزامنا الأول. يستغرق **خطوتين** .
1. سوف `git add -A` الإعدادية كل هذه الملفات الجديدة والرمز الجديد داخلها
2. `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.
![ريبو جديد](//discourse-user-assets.s3.amazonaws.com/original/2X/3/3f113af87b94fcd649c78d5f6d36463795671e7b.png)
بمجرد إنشائه ، ادخل وأمسك عنوان URL لنسخ HTTPS. (تجاهل الملفات في لقطة الشاشة الخاصة بي ، سيكون الريبو الخاص بك فارغًا في هذه المرحلة).
![استنساخ رابط](//discourse-user-assets.s3.amazonaws.com/original/2X/a/a0f3da26ba0802342d7d6f7890763a2bca32b62a.png)
## ضع كل شيء معا
ويمكنك ترك العالم عبر الإنترنت. العودة إلى المحطة! دعونا ربط مشروعنا المحلي لهذا الريبو جيثب. كل ما يتطلبه الأمر هو أمر واحد.
`git remote add origin <server>` فقط استبدل الخادم بعنوان URL HTTPS الذي نسخته للتو. لذا تبدو قيادتي هكذا:
`git remote add origin https://github.com/gkobilansky/campNews.git` .
حسنًا ، لقد قمنا حتى الآن بما يلي:
1. خلق مشروعنا
2. إصدارها في بوابة
3. ارتكز بعض التغييرات
4. حولته إلى فرع "gh-pages"
5. توصيله إلى جيثب
## اخر خطوة!
دفع لك مشروع لجيثب. مرة أخرى ، بسيطة:
`git push origin gh-pages`
سيتأكد هذا الأمر من تحميل آخر تعهدات لك إلى github. بمجرد الانتهاء من ذلك مرة واحدة على الأقل ، يجب أن يكون مشروعك متاحًا http: // _username_ .github.io / _repository_ ، لذلك بالنسبة لي فهو [http://gkobilansky.github.io/campNews](http://gkobilansky.github.io/campNews) .
بمجرد الانتهاء من كل هذا ، فإن العملية تكرر نفسها فقط:
1. `git add -A`
2. `git commit -m 'relevant message'`
3. `git push origin gh-pages`
منحني ، منحنى التعلم أكثر انسيابية من codepen.io ، ولكن أسرع وأكثر مرونة بمجرد الحصول على تعليق منه.
الترميز سعيدة!
PS. بفضل [هذا الدليل من](http://rogerdudler.github.io/git-guide/) قبل روجر دادلر للحفاظ على الأمور بسيطة.