Ingredientes da receita
| Ingrediente | Por que entra? | Do que é feito? |
|---|---|---|
| Node.js | É o manjericão fresco. Deixa o JS com sabor de backend. | fs.readFile, fs.readdir, path, http, res.render() |
| Markdown | É a farinha da massa. Estrutura pura, sem firula. | #, ##, **negrito**, *itálico*, blocos `código`, ```, [link](url), > citação |
| HTML | É o molho de tomate. A base de tudo na web. | header, nav, main, article, footer, h1, p, pre, code, a, img |
| CSS | São as azeitonas pretas. O toque final, sem ele é só massa crua. | margin, padding, background, color, font-size, display, flex, grid, border-radius, max-width, line-height |
| JavaScript | É a mussarela. O queijo que derrete em tudo. | querySelector, addEventListener, fetch, innerHTML, localStorage, marked.parse() |
| Git | É a pimenta calabresa. Controla o fogo do código. | git init, git add, git commit, git push, .gitignore |
| Vercel | É o alho. O forno que assa em segundos. | Conta + import do repositório, build estático, domínio *.vercel.app, preview por branch |
💬 Do Chef: "Cada ingrediente tem seu momento. Primeiro a massa (Markdown), depois o molho (HTML), depois o manjericão (Node). Não inverta a ordem — a pizza desanda."
Modo de preparo
Seu progresso (itens marcados) fica salvo neste navegador em localStorage. Em outro aparelho ou após limpar os dados do site, a receita começa outra vez.
Carregando itens da receita…
Etapa 1: Preparando a massa (A Ideia)
⏱️ Estimado: 30 minutos
🎯 Objetivo: Definir O QUÊ e PARA QUEM antes de codar.
💬 Do Chef: "A pior pizza é aquela que você começa a fazer sem saber o sabor. Rabisque antes de ligar o forno."
Etapa 2: Espalhando a farinha (Markdown puro)
⏱️ Estimado: 1–2 horas
🎯 Objetivo: Criar posts em Markdown, sem código. Deve parecer texto limpo.
Escreva 3 posts de exemplo, cada um com:
--- title: "Meu Primeiro Post" date: "2024-01-15" author: "Seu Nome" tags: ["javascript", "tutorial"] --- # Conteúdo começa aqui...
💬 Do Chef: "Se abrir o arquivo .md e não parecer legível cru, você também não. Markdown puro é assim — simples, limpo, sem graça. Mas é a base de tudo."
Etapa 3: Acendendo o forno (Node.js + Servidor)
⏱️ Estimado: 2–3 horas
🎯 Objetivo: Node lê seus posts e serve como HTML. Sem framework pesado.
// Fluxo mental:
posts/*.md
↓ [front-matter extrai metadados]
↓ [marked converte para HTML]
↓ [Express serve via rota]
↓ [Template injeta no HTML base]
Página completa no navegador💬 Do Chef: "Forno fraco não assa. Node é o fogo — sem ele, seus posts ficam crus no disco."
Etapa 4: Espalhando o molho (HTML puro)
⏱️ Estimado: 2–3 horas
🎯 Objetivo: Estrutura semântica, zero estilo. Deve parecer 1999.
💬 Do Chef: "Se abrir no navegador e não parecer feio, você trapaceou. Molho puro é assim — vermelho, molhado, sem graça. Mas é a base de tudo."
Etapa 5: Distribuindo as azeitonas (CSS puro)
⏱️ Estimado: 3–4 horas
🎯 Objetivo: Sem frameworks. Seu olho, seu gosto, tipografia que respira.
💬 Do Chef: "Azeitona demais estraga. CSS demais também. Menos é mais — cada propriedade deve ter um propósito."
Etapa 6: Derretendo a mussarela (JavaScript leve)
⏱️ Estimado: 2–3 horas
🎯 Objetivo: Só onde o navegador não resolve sozinho. Derreta com cuidado.
💬 Do Chef: "Mussarela demais pesa. JS demais também. Se o navegador já faz sozinho, não reinvente."
Etapa 7: Ao forno! (Deploy)
⏱️ Estimado: 1–2 horas
🎯 Objetivo: URL pública. Seu amigo no iPhone deve abrir e querer ler.
💬 Do Chef: "Pizza no forno de casa não conta. Tem que sair da cozinha. Publica. Agora."
Pizza servida! Você desbloqueou: Margherita de Bronze — seu primeiro blog na mesa do cliente. O aprendizado vale mais que a perfeição.
Recompensas secretas (desbloqueáveis)
| Conquista | Como desbloquear |
|---|---|
| Margherita de Bronze | Complete todas as etapas e publique |
| Margherita de Prata | Adicione tema escuro com prefers-color-scheme |
| Margherita de Ouro | Implemente busca full-text nos posts |
| Chef Estrelado | Receba um elogio de um leitor no LinkedIn |
| Blogger Consistente | Publique 10 posts no primeiro mês |
Armadilhas do Chef
| Armadilha | Por que é perigosa | Solução |
|---|---|---|
| ⚠️ "Vou usar banco de dados pra guardar posts" | Sistema de arquivos já é perfeito pra isso. BD adiciona complexidade desnecessária. | Markdown + fs é a fonte de verdade |
| ⚠️ "Depois eu faço responsivo" | A pizza queima. Mobile-first ou não faz. | Teste em 320px desde o primeiro CSS |
| ⚠️ "Preciso de CMS agora" | Não precisa. Git + Markdown é seu CMS. | Escreva no VS Code, commita, deploy automático |
| ⚠️ "Vou fazer editor visual WYSIWYG" | Está comprando molho de pacote. Não aprende o sabor verdadeiro. | Escreva Markdown puro, veja o resultado depois |
"Algumas pizzas queimam, e tudo bem. O aprendizado de um blog vale mais que a perfeição de um Medium."