تخصيص مواقع GitHub Pages وتحسينها

اكتشف كيف تخصص موقعك على GitHub Pages وتحسّنه للحصول على أداء أفضل.

تخصيص التصميم

1. سمة Jekyll مخصصة

# _config.yml
theme: minima

# Personnalisation du thème
minima:
  skin: dark
  social_links:
    - label: "GitHub"
      url: "https://github.com/votre-compte"

2. CSS مخصص

/* assets/css/style.scss */
@import "minima";

// Personnalisations
.site-header {
  background: linear-gradient(to right, #2c3e50, #3498db);
  padding: 2rem 0;
}

.site-title {
  color: white;
  font-size: 2rem;
  font-weight: bold;
}

.post-content {
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem;
}

تحسين الأداء

1. تحسين الصور

# _config.yml
image_optimization:
  enabled: true
  quality: 85
  sizes: [300, 600, 900]

2. تصغير الأصول (Minification)

# _config.yml
compress_html:
  clippings: all
  comments: all
  endings: all
  profile: false
  blanklines: false
  ignore:
    envs: [development]

دمج الميزات

1. نموذج الاتصال

<!-- _includes/contact-form.html -->
<form action="https://formspree.io/f/votre-id" method="POST">
  <div class="form-group">
    <label for="name">Nom</label>
    <input type="text" id="name" name="name" required>
  </div>
  <div class="form-group">
    <label for="email">Email</label>
    <input type="email" id="email" name="email" required>
  </div>
  <div class="form-group">
    <label for="message">Message</label>
    <textarea id="message" name="message" required></textarea>
  </div>
  <button type="submit">Envoyer</button>
</form>

2. نظام التعليقات

# _config.yml
disqus:
  shortname: votre-nom
  show_count: true
  lazy_load: true

تحسين محركات البحث (SEO) والتحليلات

1. إعداد SEO

<!-- _includes/head.html -->
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{% if page.title %}{{ page.title }} - {{ site.title }}{% else %}{{ site.title }}{% endif %}</title>
  <meta name="description" content="{{ page.description | default: site.description }}">
  <link rel="canonical" href="{{ page.url | absolute_url }}">
  
  <!-- Open Graph -->
  <meta property="og:title" content="{{ page.title }}">
  <meta property="og:description" content="{{ page.description }}">
  <meta property="og:image" content="{{ page.image | absolute_url }}">
  <meta property="og:url" content="{{ page.url | absolute_url }}">
  
  <!-- Twitter Card -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="{{ page.title }}">
  <meta name="twitter:description" content="{{ page.description }}">
  <meta name="twitter:image" content="{{ page.image | absolute_url }}">
</head>

2. دمج Google Analytics

<!-- _includes/google-analytics.html -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-VOTRE-ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-VOTRE-ID');
</script>

أفضل الممارسات

1. الأداء

   • تحسين الصور
   • تصغير الأصول (Minification)
   • ذاكرة تخزين مؤقت فعّالة
   • التحميل المؤجل

2. تحسين محركات البحث (SEO)

   • وسوم meta
   • بنية دلالية
   • عناوين URL نظيفة
   • Sitemap

3. إمكانية الوصول

   • تباين كافٍ
   • التنقل باستخدام لوحة المفاتيح
   • نصوص بديلة للصور
   • بنية ARIA

الخاتمة

النقاط الرئيسية التي يجب تذكرها:

• تصميم مخصص
• أداء محسّن
• SEO فعّال
• إمكانية الوصول

التوصيات:

• تحسين الأصول
• اتباع معايير الويب
• الاختبار بانتظام
• التحديث بانتظام
• التدرب على Jekyll