Um blog moderno sobre desenvolvimento, inteligência artificial e tecnologia, construído com Astro e TailwindCSS.

• ✅ Design Dark Mode com tema minimalista e elegante
• ✅ Performance otimizada com Astro (Islands Architecture)
• ✅ SEO completo com meta tags e OpenGraph
• ✅ RSS Feed automático
• ✅ Sistema de categorias organizadas
• ✅ Compartilhamento social (Twitter, LinkedIn, WhatsApp)
• ✅ Responsivo para todos os dispositivos
• ✅ TypeScript para type safety
• ✅ Content Collections para posts em Markdown
• ✅ Deploy pronto para Vercel/Netlify

• Framework: Astro
• Styling: TailwindCSS
• Typography: @tailwindcss/typography
• Language: TypeScript
• Content: Markdown com frontmatter
• Deployment: Vercel/Netlify ready

/
├── public/
│   ├── favicon.svg
│   └── robots.txt
├── src/
│   ├── content/
│   │   ├── config.ts
│   │   └── blog/
│   │       ├── introducao-astro-framework.md
│   │       ├── ia-no-desenvolvimento-2024.md
│   │       ├── ferramentas-produtividade-dev.md
│   │       ├── tailwind-css-guia-completo.md
│   │       └── devops-docker-kubernetes.md
│   ├── layouts/
│   │   ├── BaseLayout.astro
│   │   └── BlogPostLayout.astro
│   └── pages/
│       ├── index.astro
│       ├── sobre.astro
│       ├── rss.xml.js
│       ├── blog/
│       │   └── [...slug].astro
│       └── categorias/
│           ├── index.astro
│           └── [categoria].astro
├── astro.config.mjs
├── tailwind.config.mjs
└── tsconfig.json

• Node.js 18+
• npm ou yarn

# Clone o repositório
git clone <your-repo-url>
cd blog-astro

# Instale as dependências
npm install

# Inicie o servidor de desenvolvimento
npm run dev

# Abra http://localhost:4321 no seu navegador

# Desenvolvimento
npm run dev          # Inicia servidor de desenvolvimento
npm run start        # Alias para dev

# Build de produção
npm run build        # Constrói o site para produção
npm run preview      # Preview do build de produção

# Utilitários
npm run astro        # CLI do Astro

1. Crie um novo arquivo .md em src/content/blog/
2. Adicione o frontmatter necessário:

---
title: "Título do Seu Post"
description: "Descrição que aparece no preview e SEO"
date: 2024-09-22
category: "Categoria"
author: "Seu Nome"
tags: ["tag1", "tag2", "tag3"]
draft: false
---

# Seu conteúdo aqui

Escreva seu post em Markdown...

• Desenvolvimento Web
• Inteligência Artificial
• DevOps
• Ferramentas

Edite tailwind.config.mjs para personalizar as cores:

theme: {
  extend: {
    colors: {
      primary: {
        // Suas cores primárias
      },
      accent: {
        // Suas cores de destaque
      }
    }
  }
}

• BaseLayout.astro: Layout base com header/footer
• BlogPostLayout.astro: Layout específico para posts
• Customize os componentes conforme necessário

# Ou via CLI
npm i -g vercel
vercel

# Build e deploy
npm run build
# Faça upload da pasta dist/ para o GitHub Pages

• ✅ Meta tags otimizadas
• ✅ OpenGraph para redes sociais
• ✅ Twitter Cards
• ✅ Sitemap automático
• ✅ RSS Feed
• ✅ robots.txt
• ✅ URLs limpas e semânticas

• ✅ Bundle size otimizado (< 50KB)
• ✅ Images lazy loading
• ✅ CSS purging automático
• ✅ Preload crítico de recursos
• ✅ Core Web Vitals otimizados

O RSS é gerado automaticamente em /rss.xml com todos os posts publicados.

O tema escuro está habilitado por padrão. Para customizar:

/* Adicione seus estilos em globals.css */
.dark {
  /* Suas customizações de dark mode */
}

Para adicionar analytics, edite BaseLayout.astro:

<!-- Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'GA_MEASUREMENT_ID');
</script>

1. Fork o projeto
2. Crie uma branch para sua feature (git checkout -b feature/nova-feature)
3. Commit suas mudanças (git commit -m 'Adiciona nova feature')
4. Push para a branch (git push origin feature/nova-feature)
5. Abra um Pull Request

Este projeto está sob a licença MIT. Veja o arquivo LICENSE para mais detalhes.

• Astro pelo incrível framework
• TailwindCSS pelo sistema de design
• Vercel e Netlify pelo hosting gratuito

Desenvolvido com ❤️ pela equipe Coders.ia

🔗 Links Úteis:

• Documentação do Astro
• TailwindCSS Docs
• Markdown Guide

Encontrou um bug ou tem uma sugestão? Abra uma issue!