Customizing and Optimizing GitHub Pages Sites

Learn how to customize and optimize your GitHub Pages site for better performance.

Design Customization

1. Custom Jekyll Theme

# _config.yml
theme: minima

# Théme customization
minima:
  skin: dark
  social_links:
    - label: "GitHub"
      url: "https://github.com/votre-compte"

2. Custom CSS

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

// Customizations
.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;
}

Performance Optimization

1. Image Optimization

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

2. Asset Minification

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

Integrating Features

1. Contact Form

<!-- _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. Comment System

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

SEO and Analytics

1. SEO Configuration

<!-- _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 Integration

<!-- _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>

Best Practices

1. Performance

   • Image optimization
   • Asset minification
   • Effective caching
   • Lazy loading

2. SEO

   • Meta tags
   • Semantic structure
   • Clean URLs
   • Sitemap

3. Accessibility

   • Sufficient contrast
   • Keyboard navigation
   • Alt text for images
   • ARIA structure

Conclusion

Key takeaways:

• Custom design
• Optimized performance
• Effective SEO
• Accessibility

Recommendations:

• Optimize your assets
• Follow web standards
• Test regularly
• Keep everything up to date
• Learn more about Jekyll