Este é o repositório do website da comunidade Livres DIY, uma moderna landing page dedicada à criação de um ecossistema de liberdade digital através de tecnologias descentralizadas, privacidade e projetos DIY.
- ✨ Design Moderno: Landing page profissional com gradientes e animações
- 📱 Totalmente Responsiva: Otimizada para desktop, tablet e mobile
- ⚡ Performance Otimizada: CSS customizado sem dependências externas
- 🎯 Foco em Conversão: CTAs estratégicos e hierarquia visual clara
- 📝 Fácil de Editar: Sistema de gerenciamento de conteúdo baseado em YAML
- Jekyll - Gerador de sites estáticos
- GitHub Pages - Hospedagem gratuita
- CSS Custom - Design landing page personalizado (sem tema externo)
- YAML - Gerenciamento de conteúdo estruturado
- Markdown - Formatação de conteúdo
- SCSS - Estilização avançada com variáveis CSS
livres-website/
├── _config.yml # Configurações do site
├── _data/
│ └── content.yml # Conteúdo estruturado (NOVO!)
├── _includes/ # Seções reutilizáveis
│ ├── hero-section.md
│ ├── middle-section.md
│ └── bottom-section.md
├── _layouts/
│ └── landing.html # Layout da landing page (NOVO!)
├── assets/
│ └── main.scss # Estilos customizados da landing page
├── index.md # Página principal (atualizada)
├── Gemfile # Dependências Ruby
└── README.md # Este arquivo
- Ruby (versão 2.7 ou superior)
- Bundler
- Git
# Clone o repositório
git clone https://github.com/LivresDIY/livres-website.git
cd livres-website
# Instale as dependências
bundle install
# Execute o servidor local
bundle exec jekyll serve
# Acesse em: http://localhost:4000Este site usa um sistema modular de conteúdo que torna super fácil fazer alterações. Não se preocupe - você não precisa saber programação!
O conteúdo é gerenciado através de dois sistemas complementares:
Este é o arquivo mais importante - aqui você pode alterar:
- Títulos e subtítulos
- Textos dos botões e links
- Lista de recursos/funcionalidades
- Links das redes sociais
- Todas as frases principais
Arquivos que controlam a estrutura:
hero-section.md- Seção do topo (título principal)middle-section.md- Seção do meio (conteúdo principal)bottom-section.md- Seção inferior (call-to-action)
Para editar o conteúdo principal (RECOMENDADO):
- Acesse o repositório: Vá para https://github.com/LivresDIY/livres-website
- Navegue até:
_data/→content.yml - Clique no ícone do lápis (✏️) no canto superior direito
- Faça suas alterações no formato YAML (veja exemplos abaixo)
- Salve as mudanças: Role para baixo, adicione uma descrição e clique em "Commit changes"
Para editar a estrutura (avançado):
- Navegue até a pasta:
_includes/ - Escolha o arquivo: Clique no arquivo que deseja editar (ex:
hero-section.md) - Siga os mesmos passos de edição
🎯 As mudanças aparecerão no site automaticamente em alguns minutos!
- Baixe os arquivos: Faça download do repositório como ZIP
- Edite com qualquer editor: Use Notepad, Word, ou qualquer editor de texto
- Envie de volta: Faça upload dos arquivos editados
O YAML é um formato simples para dados estruturados. Use espaços, não tabs!
# Comentários começam com #
titulo: "Seu título aqui"
subtitulo: "Seu subtítulo aqui"
# Para textos longos, use |
descricao: |
Este é um texto longo
que pode ter várias linhas
e parágrafos.
# Para listas
recursos:
- titulo: "Primeiro recurso"
descricao: "Descrição do primeiro recurso"
- titulo: "Segundo recurso"
descricao: "Descrição do segundo recurso"
# Para links
botao_texto: "Clique aqui"
botao_link: "#secao"# Título Principal (H1)
## Título Secundário (H2)
### Título Terciário (H3)
**Texto em negrito**
*Texto em itálico*
• Lista com pontos
• Outro item da lista
[Texto do link](https://exemplo.com)
---
(Linha horizontal)Para aprender mais sobre como editar e gerenciar conteúdo:
-
Markdown Básico:
-
Usando o GitHub:
-
Jekyll e Sites Estáticos:
Arquivo: _data/content.yml - Seção hero:
hero:
title: "Seu Novo Título Aqui!"
subtitle: "Sua nova descrição da comunidade aqui."
button_text: "Novo Texto do Botão"
button_link: "#nova-secao"Arquivo: _data/content.yml - Seção middle: → features:
middle:
features:
- title: "Novo Recurso"
description: "Descrição do seu novo recurso aqui"
- title: "Blockchain"
description: "Desenvolvimento com tecnologias blockchain"
- title: "Inteligência Artificial"
description: "Projetos com IA e machine learning"Arquivo: _data/content.yml - Seção social:
social:
linkedin: "https://linkedin.com/company/seuperfil"
discord: "https://discord.gg/seuservidor"
# Adicione mais redes se necessário:
# twitter: "https://twitter.com/seuperfil"
# instagram: "https://instagram.com/seuperfil"Arquivo: _data/content.yml - Seção bottom:
bottom:
title: "Novo título da seção final!"
description: |
Seu novo texto aqui.
Pode ter múltiplos parágrafos.
E chamadas para ação personalizadas.
cta_text: "Novo Botão!"
cta_link: "#contato"Antes:
hero:
title: "Construa o futuro que deseja viver. Seja Livres!"
subtitle: "Livres é uma comunidade..."
button_text: "Conheça Livres"
button_link: "#about"Depois:
hero:
title: "Transforme Ideias em Realidade!"
subtitle: "Junte-se à maior comunidade de criadores digitais do Brasil. Aprenda, construa e compartilhe projetos incríveis."
button_text: "Começar Agora"
button_link: "#comece"Para alterar informações básicas do site (título, descrição, etc.), edite o arquivo _config.yml:
title: Livres DIY
email: contato@livres.diy
description: >-
Sua nova descrição aqui
url: "https://livres.diy"
twitter_username: seuperfil
github_username: SeuUsuario_config.yml, o site pode levar alguns minutos para atualizar.
- Hero Section: Seção de destaque com gradiente e call-to-action
- Cards Interativos: Lista de recursos com hover effects
- Botões Animados: CTAs com transformações e sombras
- Tipografia Moderna: Hierarquia visual clara e legível
- Desktop: Layout completo com todas as funcionalidades
- Tablet: Adaptação otimizada para telas médias
- Mobile: Interface simplificada para smartphones
- CSS Customizado: Sem dependências externas de temas
- Otimização de Carregamento: Estilos inline e minificados
- SEO Friendly: Meta tags e estrutura semântica
O site é automaticamente publicado no GitHub Pages sempre que você faz alterações na branch main. Não é necessário fazer nada extra - as mudanças aparecem automaticamente em alguns minutos!
URL do Site: https://livres.diy
- Edite o conteúdo (principalmente
_data/content.yml) - Commit as mudanças no GitHub
- Aguarde 2-5 minutos para o deploy automático
- Verifique o resultado no site ao vivo
- Consulte os tutoriais listados acima
- Pratique no arquivo de teste antes de fazer mudanças definitivas
- Use o preview do GitHub para ver suas alterações YAML
- Abra uma issue no GitHub descrevendo seu problema
- Entre em contato através do email: contato@livres.diy
- Consulte a documentação do Jekyll para dúvidas avançadas
- Sempre use espaços (não tabs) em arquivos YAML
- Teste localmente se possível antes de fazer commit
- Faça backup do conteúdo antes de grandes mudanças
- Commits pequenos são mais fáceis de reverter se necessário
Este projeto está sob a licença especificada no arquivo LICENSE.
_data/content.yml → _includes/*.md → _layouts/landing.html → index.md → Site Final
- Jekyll: Processamento e build
- YAML: Gerenciamento de dados
- Markdown: Formatação de conteúdo
- SCSS: Estilização avançada
- GitHub Pages: Deploy automático
Feito com ❤️ pela comunidade Livres DIY
Transformando ideias em realidade digital desde 2025