Pular para o conteúdo

Exemplo4 min de leitura

Exemplo: como publicar um artigo neste blog

Texto provisório que mostra a página de leitura e explica como colocar um novo artigo no ar.

Este artigo é um exemplo. Ele existe para mostrar como um texto longo fica na página e para servir de manual até o primeiro artigo de verdade chegar. Quando não for mais útil, basta apagar o arquivo.

O blog foi montado para que publicar seja simples. Não há painel, banco de dados nem senha para lembrar: cada artigo é um arquivo de texto, guardado em uma única pasta do projeto. Quem sabe escrever um arquivo de texto sabe publicar aqui.

Onde os artigos ficam

Todos os artigos moram na pasta src/content/artigos. Cada arquivo termina em .md e vira uma página do site. O nome do arquivo define o endereço da página, então um arquivo chamado primeiro-artigo.md será publicado em /artigos/primeiro-artigo/.

Prefira nomes curtos, em letras minúsculas, sem acentos e com hifens no lugar dos espaços. O nome não aparece para o leitor como título, mas aparece no endereço que ele vai copiar e compartilhar.

O cabeçalho do arquivo

Todo arquivo começa com um pequeno cabeçalho, entre duas linhas de três hifens. É nele que ficam as informações que o site usa para montar as listas e as páginas:

---
titulo: "O título do artigo"
linhaDeApoio: "Uma ou duas frases que resumem o texto."
categoria: "Economia"
data: 2026-11-06
---

O título aparece no topo da página e nas listas. A linha de apoio aparece logo abaixo dele e também nas prévias, quando alguém compartilha o link em uma rede social. A categoria identifica o assunto do texto. A data define a ordem: o artigo mais recente sempre aparece primeiro.

O tempo de leitura não precisa ser informado, porque o site calcula sozinho, a partir do tamanho do texto.

Como guardar um rascunho

Um artigo pode ficar pronto pela metade sem que ninguém o veja. Basta acrescentar uma linha ao cabeçalho:

rascunho: true

Com essa linha, o artigo fica fora das listas, do RSS e do mapa do site final, e sua página não é gerada. No npm run dev, ele continua visível, para que você possa revisá-lo. Para publicar, apague a linha ou troque true por false.

Como formatar o texto

Depois do cabeçalho, o texto é escrito em Markdown, um jeito de marcar a formatação usando poucos símbolos. Parágrafos são separados por uma linha em branco. Palavras entre dois asteriscos ficam em negrito, e entre um asterisco, em itálico. Um link é escrito assim, com o texto entre colchetes e o endereço entre parênteses.

Subtítulos começam com dois sinais de cerquilha, como os desta página. Use-os para dar respiro aos textos longos, porque ajudam quem lê a encontrar o caminho de volta depois de uma interrupção.

Citações começam com o sinal de maior:

Esta é uma citação de exemplo. Ela ganha um recuo e uma linha lateral, para se separar do texto ao redor sem precisar gritar.

Listas são igualmente simples. Com hifens no início da linha, formam uma lista sem ordem:

  • Um primeiro item, curto e direto.
  • Um segundo item, um pouco mais longo, para mostrar como a linha se comporta quando precisa quebrar antes de chegar ao fim da coluna de leitura.
  • Um terceiro item, para fechar.

Com números, formam uma sequência:

  1. Crie o arquivo na pasta de artigos.
  2. Preencha o cabeçalho.
  3. Escreva o texto logo abaixo.

Como ver o resultado

Com o projeto aberto no terminal, o comando npm run dev mostra o site no seu computador e atualiza a página sempre que um arquivo é salvo. É a melhor forma de revisar o artigo como o leitor vai vê-lo, antes de publicá-lo.

Quando estiver tudo certo, o comando npm run build gera a versão final do site, na pasta dist. Se houver algum erro no cabeçalho, como um campo obrigatório faltando, o comando avisa qual é o arquivo com problema, em vez de publicar uma página quebrada.

Sobre a largura desta coluna

A coluna de leitura é propositalmente estreita. Linhas muito longas cansam, porque o olho precisa viajar demais e tem dificuldade de encontrar o começo da linha seguinte. Em torno de 68 caracteres por linha, a leitura flui sem esforço, mesmo em textos extensos.

O mesmo vale para o tamanho da letra e para o espaço entre as linhas. Nada disso chama atenção quando está certo, e essa é justamente a intenção: o melhor trabalho visual em uma página de leitura é aquele que o leitor não percebe.

O que fazer com este exemplo

Quando o primeiro artigo estiver pronto, apague os três arquivos cujo nome começa com exemplo, na pasta src/content/artigos. Mesmo que a pasta fique vazia por um tempo, o site continua funcionando e mostra um aviso de que ainda não há artigos publicados.

A partir daí, o blog é seu.

Ver todos os artigos