Personalización y optimización de sitios en GitHub Pages

Descubre cómo personalizar y optimizar tu sitio de GitHub Pages para obtener un mejor rendimiento.

Personalización del diseño

1. Tema de Jekyll personalizado

# _config.yml
theme: minima

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

2. CSS personalizado

/* 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;
}

Optimización del rendimiento

1. Optimización de imágenes

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

2. Minificación de assets

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

Integración de funcionalidades

1. Formulario de contacto

<!-- _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. Sistema de comentarios

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

SEO y analítica

1. Configuración de 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. Integración de 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>

Buenas prácticas

1. Rendimiento

   • Optimización de imágenes
   • Minificación de assets
   • Caché eficaz
   • Carga diferida

2. SEO

   • Etiquetas meta
   • Estructura semántica
   • URL limpias
   • Sitemap

3. Accesibilidad

   • Contraste suficiente
   • Navegación con teclado
   • Textos alternativos en las imágenes
   • Estructura ARIA

Conclusión

Puntos clave que hay que recordar:

• Diseño personalizado
• Rendimiento optimizado
• SEO eficaz
• Accesibilidad

Recomendaciones:

• Optimizar los assets
• Seguir los estándares web
• Probar con regularidad
• Actualizar con regularidad
• Formarse en Jekyll