menimal

Menimal?

Menimal é um gerador mínimo de sites estáticos .

Concentre-se no conteúdo: basta escrever arquivos markdown, estilos CSS e tudo o mais é gerado para você

Menimal é mínimo por design:

• Sem javascript (sem package.json )
• Sem modelos HTML
• Sem mdx
• Sem SEO ou metadados

---

• Começando
  • Implantar
• Estrutura de pastas
  • pages
  • static
  • config.json
  • style.css
• Roteiro
• Licença
• Notas
  • Outros geradores de sites estáticos
  • Desenvolvimento
  • Implementação

Começando

Menimal é um script npx único que você pode executar de qualquer lugar sem instalar nenhum pacote.

Certifique-se de ter NodeJs instalados em sua máquina

Você só precisa executar um único comando:

npx menimal

Isso irá gerar uma pasta build contendo seu site estático.

Implantar

As plataformas de hospedagem permitem definir um comando de construção e uma pasta de saída:

• Comando de construção: npx menimal
• Pasta de saída: build

Isso é tudo. Você pode implantar Menimal em qualquer lugar?

---

Estrutura de pastas

Menimal requer uma estrutura de pastas precisa:

• pages : contém arquivos markdown ( .md )
• static : contém arquivos estáticos ( robots.txt , fonts , favicon.ico )
• config.json : contém configuração do site (mínimo)
• style.css : contém estilos (arquivo css único)

Veja o exemplo completo e funcional dentro da pasta de exemplo

pages

Cada arquivo markdown corresponderá a uma página .html no site.

O nome do arquivo .md é usado para gerar o nome do arquivo HTML e o título da página:

• Arquivo HTML: igual a .md com todos os caracteres minúsculos
• Título: igual a .md com - substituído por espaços

Por exemplo, This-is-the-Title-of-the-article.md irá gerar:

• HTML: this-is-the-title-of-the-article.html
• Título: Este é o título do artigo

static

Todos os arquivos dentro static serão copiados na compilação final.

Aqui você pode adicionar imagens, fontes, robots.txt , favicon.ico , sitemap.xml ou qualquer coisa realmente ??‍♂️

config.json

Por enquanto a configuração requer um único campo: o nome do site exibido em <header> :

{
  "name" : " Sandro Maglione "
}

style.css

Todos os estilos são definidos em um único arquivo css .

Você pode visualizar a estrutura HTML gerada de cada arquivo dentro de modelos

Este arquivo será reduzido e importado em todas as páginas geradas.

Roteiro

• Pré-carregar fontes em HTML

 < link rel =" preload " href =" font.woff2 " as =" font " crossorigin type =" font/woff2 " > 

Licença

Licença MIT, consulte o arquivo LICENSE.md para obter detalhes.

---

Notas

Este projeto faz parte do meu boletim informativo semanal em sandromaglione.com .

Outros geradores de sites estáticos

• Hexo
• Jekyll
• Hugo

Desenvolvimento

• Use npx --loglevel silly .. da pasta example para depurar o comando npx

Implementação

Leia todos os detalhes da implementação no artigo completo ?