Quem é esse Pokémon?
É o Docusaurus!
Antes de começar a falar deste bichinho, vamos consultar a Pokédex a própria documentação dele:
🧐 O Docusaurus é um gerador de sites estáticos. Ele cria um SPA (Single Page Application) com navegação rápida do lado do cliente, aproveitando todo o poder do React para tornar seu site interativo. Ele oferece recursos de documentação prontos para uso, mas pode ser usado para criar qualquer tipo de site (site pessoal, produto, blog, landing pages de marketing, etc.).
— Documentação do Docusaurus (traduzida por mim)
Docusaurus, eu escolho você!
Agora que nosso Pokémon foi devidamente apresentado, quem olhar no rodapé desta página vai perceber que o OCDV é construído com Docusaurus.
Eu poderia usar um CMS de prateleira? Poderia! Talvez até devesse... Mas que graça teria só escrever os posts, sem ao menos sofrer um pouco antes aprender coisas novas?
Ok, eu já tinha a ideia de gerar páginas estáticas e usar meu lado dev para fazer este blog, mas por que o Docusaurus e não o Charmander ou o Squirtle outra ferramenta?
Um primeiro fator é que nas minhas pesquisas ele sempre aparecia nas listas de top 10. Segundo, porque eu comecei a usar o Docusaurus recentemente para fazer documentações técnicas no trabalho, nada mais justo do que usar uma ferramenta que já conheço um pouco e que é útil no meu dia a dia.
Para argumentos mais técnicos sobre o uso do Docusaurus, tem essa sessão da documentação oficial que compara várias ferramentas.
Início da Jornada
Quem quiser conhecer um pouco mais sobre este gerador, vem comigo subir uma instância local e iniciar a criação de sites estáticos.
Pré-requisitos
Não precisamos de muito para começar. Se ainda não tiver instalado na sua máquina, é necessário fazer o download do Node.js. Eu optei pelo binário pré-compilado, que é a forma mais simples de instalação, e escolhi a última versão LTS (Long Term Support) disponível no momento: v22.17.0.
Também é importante ter um editor ou IDE para editar os arquivos. Como javeiro, estou bem-acostumado com o IntelliJ, então baixei o WebStorm, também da JetBrains, com uma interface familiar para mim. Mas isso é bem pessoal e fica a gosto do freguês. Outras boas opções são o Sublime Text e o VS Code.
Rodando Localmente
Para começar um novo projeto com Docusaurus, rode no terminal:
npx create-docusaurus@latest nome-projeto classic
- Como usamos aqui
@latest, ele instalará a versão mais recente, que no meu caso foi a 3.8.1; nome-projetoserá o nome da pasta criada e do projeto em si;classicé o template básico fornecido.
Também é possível passar o argumento de linguagem (JavaScript ou TypeScript). Se você não passar nenhum, ele perguntará. Eu não sou íntimo de nenhuma das duas, mas TypeScript faz mais meu tipo. 😋
A saída do comando será algo assim:
Logo de cara, ele já apresenta os quatro comandos principais que mais usaremos. Outros scripts úteis podem ser conferidos neste link aqui.
Em seguida, entre na pasta do projeto e rode:
npm start
Outra forma é abrir o projeto no WebStorm, localizar o arquivo package.json, clicar no ícone de
Esse passo só é necessário na primeira vez. Depois, basta selecionar start e clicar no botão de
Se tudo der certo, você verá algo como:
O navegador deve abrir uma nova aba com a página rodando localmente em modo de desenvolvimento e apresentar um tutorial do Docusaurus. Se não abrir automagicamente, basta acessar manualmente o endereço exibido no terminal.
Caso sua versão seja igual à minha (3.8.1), a página será igual a esta:
Pronto! Você já está rodando localmente uma página estática com Docusaurus. Nela há exemplos do que é possível fazer e um tutorial básico muito útil sobre a própria ferramenta.
Modos de parar a execução:
- No terminal, tecle Ctrl + C
- No WebStorm, clique no ícone
Stop no topo da IDE
Próximos Passos
Agora é só dar play no vídeo abaixo e explorar o tutorial aberto na outra aba do navegador. Com 6 minutos, você já entende o básico da ferramenta e pode começar a se aventurar!
Boa exploração e até a próxima publicação! 👋
return 20;