teeny

Teeny: um simples gerador de site estático

️ Isenção de responsabilidade: Esta é uma ferramenta que eu construí em algumas horas para gerar meu blog pessoal yakkomajuri.github.io. Não faz muito agora e provavelmente nunca nunca.

? Início rápido

npm i -g teeny-cli # yarn global add teeny-cli
teeny init && teeny develop

Para um exemplo de projeto usando o Repo Repositório do meu blog pessoal.

História de fundo

Você pode ler sobre minha motivação para a construção de Teeny nesta postagem do blog intitulada "Por que eu construí meu próprio gerador de sites estáticos".

Comandos suportados

Inicialize um projeto adolescente no diretório atual

teeny init

Crie os arquivos HTML estáticos e adicione -os ao public/

teeny build

Inicie um servidor adolescente local que escuta as alterações de arquivo

teeny develop

? Como funciona

Teeny é um gerador de sites estáticos super simples, construído para atender apenas às minhas necessidades e às minhas necessidades.

Tudo o que faz é gerar páginas com base em modelos HTML e conteúdo de marcação.

Faz muito pouco e é fortemente opinativo ( leia -se: eu estava com preguiça de construir manipuladores de personalização/condicional ), mas me permitiu construir um blog com muita rapidez.

Essencialmente, existem realmente apenas 2 conceitos que você precisa pensar: modelos e páginas.

Modelos

Os modelos são HTML simples e devem ser adicionados a um templates/ subdiretório.

Eles podem conter um elemento com o page-content de identificação, que é onde a Teeny adiciona o HTML gerado analisando o conteúdo do Markdown.

Páginas

O Markdown é um cidadão de primeira classe em Teeny, portanto, todas as páginas do seu site são definidas por um arquivo de marcação.

O arquivo não precisa ter nenhum conteúdo real; portanto, se você deseja que uma página seja definida apenas no HTML, você só precisa criar um modelo que seja referenciado a partir de um arquivo de página.

Para especificar qual modelo uma página deve usar, você pode especificá -lo no frontmatter da página, assim:

 ---
template: blog
---

No exemplo acima, Teeny procurará um modelo chamado blog.html . Se nenhum modelo for especificado, a Teeny procurará um arquivo default.html em templates/ e usa isso.

Exemplo de uso

Aqui está um exemplo de adolescente no trabalho.

Para iniciar um projeto adolescente, administre teeny init . Isso criará o seguinte em seu diretório atual:

 .
├── pages
│   └── index.md
├── static
│   └── main.js
└── templates
    ├── default.html
    └── homepage.html

Se você for teeny build , você acabará com isso:

 .
├── pages
│   └── index.md
├── public
│   ├── index.html
│   └── main.js
├── static
│   └── main.js
└── templates
    ├── default.html
    └── homepage.html

index.md usa o modelo homepage e, juntos, eles geram index.html . Como é padrão com outros SSGs, os arquivos estáticos são servidos de public/ .

Você também notará main.js foi transferido para o public/ também. A Teeny realmente pega todos os arquivos não-templos e sem páginas de pages/ , templates/ , e static/ e copie-os para public/ , seguindo a mesma estrutura do diretório de origem.

A razão para isso é que eu realmente não queria ter importações de "mágica", onde você precisa importar ativos estáticos de caminhos que não correspondem à estrutura real do diretório. Como resultado, decidi que os arquivos estáticos morariam dentro templates/ e pages/ conforme necessário.

Mais tarde, me rendi à abordagem static/ de diretório, pois pode haver ativos, as páginas e os modelos querem usar. Importações da static/ são "mágicas", o que significa que você precisa pensar na produção de teeny build para que eles funcionem.

O último comando que Teeny apoia é teeny develop . Isso cria um servidor HTTP para arquivos do servidor do public/ subdiretório.

Ele ouve alterações nos arquivos e atualiza os arquivos estáticos em tempo real (ingenuamente, apenas reconstruindo tudo o que detecta uma alteração).

? Potenciais melhorias futuras

Eu quero me manter adolescente o mais pequeno possível. Eu deliberadamente coloquei todo o código em um arquivo como um lembrete para mim mesmo de que essa deve ser apenas uma ferramenta simples para eu criar blogs estáticos simples rapidamente.

No entanto, poderia usar algumas atualizações de "experiência do desenvolvedor", como uma abordagem otimizada para teeny develop em vez de reconstruir ingenuamente tudo, bem como algumas opções de personalização melhores.