Personalização e Otimização de Sites no GitHub Pages

Descubra como personalizar e otimizar seu site no GitHub Pages para obter melhor desempenho.

Personalização do Design

1. Tema 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;
}

Otimização de Desempenho

1. Otimização de Imagens

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

2. Minificação de Assets

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

Integração de Funcionalidades

1. Formulário de Contato

<!-- _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 Comentários

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

SEO e Analytics

1. Configuração 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. Integração com o 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>

Boas Práticas

1. Desempenho

   • Otimização de imagens
   • Minificação de assets
   • Cache eficiente
   • Carregamento adiado (lazy loading)

2. SEO

   • Tags meta
   • Estrutura semântica
   • URLs limpas
   • Sitemap

3. Acessibilidade

   • Contraste suficiente
   • Navegação pelo teclado
   • Textos alternativos para imagens
   • Estrutura ARIA

Conclusão

Pontos-chave a lembrar:

• Design personalizado
• Desempenho otimizado
• SEO eficiente
• Acessibilidade

Recomendações:

• Otimizar os assets
• Seguir os padrões web
• Testar regularmente
• Atualizar regularmente
• Estudar Jekyll