يمنحك هذا المستودع الرمز الذي ستحتاج إليه لبدء موقع ويب شخصي يعرض عملك كمطور برامج. وعندما تقوم بإدارة الكود في مستودع GitHub ، فإنه ستقدم تلقائيًا صفحة ويب مع معلومات ملف تعريف المالك ، بما في ذلك الصورة والسيرة الحيوية والمستودعات.
موقع الويب الشخصي الخاص بك ينتظر أن يكون شخصيًا. ويشمل مساحة لتسليط الضوء على مجالات اهتمامك المحددة في تطوير البرمجيات ، مثل اللغات أو الصناعات. وهو يقف على استعداد لنشر منشور المدونة الرائع التالي.
من الممكن كل ذلك باستخدام مزيج من Jekyll (لبناء موقع الويب الخاص بك) ، صفحات GitHub (لاستضافة موقع الويب الخاص بك) ، و API من Github (لملء موقع الويب الخاص بك تلقائيًا بالمحتوى).
github/personal-website
ستقوم بإنشاء نسختك الخاصة من مستودع "موقع الويب الشخصي" حتى يكون لديك مشروع خاص بك لتخصيصه. "الشوكة" هي نسخة من مستودع. لذا حدد "شوكة" فوق مستودع github/personal-website
.
بمجرد العثور على منزل لمستودعك المتشعب ، إنه لك. أنت المالك ، لذلك أنت مستعد للنشر ، إذا كنت ترغب في ذلك.
إذا كنت ترغب في إدارة موقع الويب الخاص بك في بيئة تطوير الويب المحلية ، فستستخدم Ruby.
بمجرد العثور على منزل لمستودعك المتشعب ، استنساخه .
Jekyll هي جوهرة الياقوت التي يمكن تثبيتها على معظم الأنظمة.
gem install jekyll bundler
cd personal-website
bundle install
bundle exec jekyll serve
عندما تستضيف رمز موقع الويب الخاص بك على Github ، تحصل على دعم الاستضافة المجانية من خلال صفحات GitHub.
أسرع النهج هو إعادة تسمية username.github.io
username
المستودع الخاص بك. بعد ذلك ، في المرة التالية التي تضغط فيها على أي تغييرات على فرع master
الخاص بمستودعك ، سيكون متاحًا على الويب على عنوان username.github.io
. github.io.
إذا كنت ترغب في استخدام مجال مخصص ، فستحتاج إلى إضافته إلى إعدادات "المجال المخصص" للمستودع الخاص بك على github.com. ثم قم بتسجيل و/أو تكوين مجالك باستخدام مزود DNS.
إنه موقع الويب الخاص بك ، وأنت تتحكم في الكود المصدري. لذلك يمكنك تخصيص كل شيء ، إذا أردت. لكننا قدمنا حفنة من التخصيصات السريعة لكي تفكر فيها عند إخراج موقع الويب الخاص بك من الأرض.
يمكن إجراء معظم التخصيصات في غضون ثوانٍ ، من خلال مراجعة ملف _config.yml
الخاص بمستودعك. فقط تذكر إعادة تشغيل الخادم المحلي في كل مرة تقوم فيها بحفظ تغييرات جديدة ، بحيث يعيد موقع الويب الخاص بك على موقع Jekyll بشكل صحيح:
jekyll serve
بشكل افتراضي ، سيتم عرض موقع الويب الخاص بك في تصميم من عمود على أجهزة على الشاشة الكبيرة ، مع صورتك واسمك ومعلومات أساسية معروضة في "الشريط الجانبي" المحاذاة اليساري. ولكن يمكنك التبديل بسرعة إلى تخطيط "مكدسة" من خلال تغيير السطر في ملف _config.yml
الذي يقرأ layout: sidebar
للتخطيط layout: stacked
.
بشكل افتراضي ، يظهر موقع الويب الخاص بك بخلفية بيضاء ورمادية "الضوء" ، مع نص مظلم. ولكن يمكنك التبديل بسرعة إلى خلفية "مظلمة" مع نص أبيض عن طريق تغيير الخط في ملف _config.yml
الذي يقرأ style: light
إلى style: dark
.
يأتي موقع الويب الخاص بك مُصنّع مسبقًا بثلاثة مواضيع (على سبيل المثال "تصميم الويب" و "Sass") التي تظهر في قسم بعنوان "اهتماماتي". يتم تخزينها أيضًا في ملف _config.yml
الخاص بمستودعك ، حيث يمكنك تحديد اسم كل موضوع وتفاصيل اختيارية أخرى:
web_url
: عنوان الويب الذي ترغب في ربطه بموضوعك (على سبيل المثال https://github.com/topics/sass
).image_url
: عنوان الويب الخاص بصورة (مربعة مثالية) ترغب في الظهور مع موضوعك. لإضافة صفحة إلى موقع الويب الخاص بك (مثل السيرة الذاتية المفصلة):
.html
أو .md
جديد في جذر المستودع الخاص بك.http://yoursite.dev/filename
). ---
layout: default
---
لإضافة منشور مدونة إلى موقع الويب الخاص بك:
.md
جديد في الدليل /_posts/
_posts. YEAR-MONTH-DAY-title.MARKUP
---
title: "The title of my blog post"
---
يأتي موقع الويب الخاص بك مع منشور مدونة للمصدر النائب الذي يمكنك الرجوع إليه. والجدير بالذكر أن مسألةها الأمامية تعلن عن published
على أنها false
، بحيث لن تظهر على موقع الويب الخاص بك.
على الرغم من أنه يمكنك أيضًا تحديد layout
في المسألة الأمامية ، إلا أن موقع الويب الخاص بك يتم تكوينه مسبقًا لتعيين تخطيط post
لجميع المنشورات في الدليل /_posts/
. لذلك ليس عليك أن تعلن ذلك في مشاركاتك ، إذا كنت لا تريد ذلك.
اتفاقيات Jekyll لتأليف وإدارة منشورات المدونة مرنة للغاية. يمكنك معرفة المزيد في وثائق Jekyll لـ "المشاركات".
لإعطائك أساسًا صوتيًا لبدء موقع الويب الشخصي الخاص بك ، يتضمن مستودعك حفنة من "يتضمن"-ملفات .html
الديناميكية التي يتم إعادة استخدامها عبر موقع الويب الخاص بك. جميعها مخزنة في /_includes/
الدليل.
هناك المشتبه بهم المعتاد ، مثل header.html
و footer.html
. ولكن هناك عدد قليل من يستحق الإشارة:
interests.html
_config.yml
masthead.html
: مجموعة من صورتك الرمزية والاسمك والسيرة الحيوية والبيانات الوصفية الأخرى التي يتم عرضها بشكل بارز على جميع صفحات الويب الخاصة بك للمساعدة في تحديد ما يدور حوله الموقع.post-card.html
: عرض تقديمي مضغوط وتلخيص لنشر المدونة ، يعيد استخدامه لعرض قائمة بأحدث منشورات المدونة الخاصة بك.projects.html
: قائمة العنوان والديناميكية من "مشاريعي" ، والتي يتم ملؤها مع قائمة بأحدث مستودعات Github.repo-card.html
: عرض تقديمي مضغوط ملخص لمستودع ، يعيد استخدامه لعرض قائمة بمستودعات github الخاصة بك.thoughts.html
: قائمة العنوان والديناميكية من "أفكاري" ، والتي يتم ملؤها مع قائمة أحدث منشورات المدونة الخاصة بك.topic-card.html
: عرض تقديمي ملخص لموضوع ما (محدد في _config.yml
) ، إعادة استخدامه لعرض قائمة لمصالحك.يأتي مستودعك مع ثلاثة تخطيطات:
index.html
الصفحة الرئيسية لعرض قوائم مشاريعك واهتماماتك و (اختياريا) منشورات مدونتك./_posts/
الدليل.اتفاقية Jekyll لتحديد التخطيطات مرنة للغاية. يمكنك معرفة المزيد حول تخصيص تخطيطاتك في مستندات "تخطيطات" Jekyll.
تم تكوين موقع الويب الخاص بك مسبقًا لاستخدام إطار CSS مرن للغاية يسمى "التمهيدي" ، إلى جانب أي أنماط مخصصة تكتبها في /assets/styles.scss
sassheet. يتم الرجوع حاليًا في ملف styles.scss
، باستخدام CSS Import at-Rule:
@import url('https://unpkg.com/primer/build/build.css');
أنت ، بالطبع ، مرحبًا بك لإزالته أو استبداله بإطار آخر. فقط ضع في اعتبارك أن HTML التي تم تعبئة موقع الويب الخاص بك مسبقًا مع المراجع "فئات الأدوات" التمهيدية المتعددة لتعريف أشياء مثل عرض الأعمدة والهوامش وألوان الخلفية.
يتوفر الموضوع كمصدر مفتوح بموجب شروط ترخيص معهد ماساتشوستس للتكنولوجيا.