wodle

Wodle

Wodle é um gerador de sites estáticos que usa novas estruturas e ferramentas para desenvolvimento web moderno. Ele é baseado em Next.js e Tachyons. E você pode facilmente transformar o site estático gerado em um site totalmente dinâmico.

Por que?

Como NextJS e CSS funcional facilitam muito o início de um blog ou página estática, é um bom ponto de partida para blogueiros e desenvolvedores que desejam aprender essas tecnologias.

Instalação

Você pode instalar o Wodle via npm:

 npm install -g wodle

Começando

Depois que o Wodle estiver instalado, você pode usar o comando wodle . Para construir um novo site você pode executar:

 wodle myBlog

Isso irá gerar um novo site chamado myBlog no mesmo diretório onde você executou o comando

Para começar com seu novo site, você só precisa fazer o cd nele e instalar as dependências:

 cd myBlog
yarn

Isso irá buscar todas as dependências, quando estiver pronto você pode iniciar um servidor rodando:

 yarn dev

E vá para localhost:3000/ , você deverá ver um site como este:

Esse servidor ouvirá as alterações no seu aplicativo e recarregará o navegador.

Se você deseja executar seu site sem recarregar a quente, você pode executar:

 yarn start

Construa seu site

Para construir seu site você pode executar:

 yarn build

que irá gerar uma pasta out/ com seu site estático pronto para ser publicado.

Como funciona?

Seu site terá pastas diferentes:

Pasta Páginas

Esta pasta contém os arquivos de suas páginas e seus nomes correspondem às rotas, portanto, se você quiser adicionar uma nova página em /new-page você precisará adicionar um novo componente nesta pasta chamado new-page.js . Para roteamento avançado, verifique aqui.

O scaffold vem com alguns componentes de página pré-construídos na pasta components .

Pasta Componentes

Nesta pasta você encontrará todos os componentes pré-construídos no site. Os componentes principais deste aplicativo de scaffold são:

• Barra lateral

Um componente da barra lateral que obtém itens e renderiza um Nav com seus NavItems, o conteúdo deste componente está em content/sideBarOptions.js

• Principal

Este componente apenas envolve tudo o que você deseja exibir na seção principal (o centro do site).

• Artigo Principal

Este componente renderiza o Artigo principal, como você vê no índice e em cada artigo específico. Uma demonstração do conteúdo que pode ser processado por este componente está em content/mainArticle .

• Lista de Artigos

Este componente renderiza uma lista de artigos como você verá em cada página individual no menu da barra lateral. Você pode ver as listas em content/ nos arquivos <something>Articles.js

entre outros

Pasta Estilos

Sua pasta de estilos é para todos os seus css (agora quase vazio graças ao CSS funcional e Tachyons)

Estendendo o Site

Você pode continuar excluindo páginas (removendo arquivos da pasta pages ) adicionando mais páginas, artigos, opções seguindo os padrões do scaffold ou apenas alterando tudo como quiser! Você pode ler ótimos guias no site Next.js e Tachyons para criar seu site ou blog incrível!

baseado na arte anterior chibicode.com e jspg