Deusa HTML
Uma estrutura minimalista para criar um site como o de 1999.
Requisitos
- Um computador com internet, um editor de texto e um navegador da web
- npm
Começando
- Terminal aberto
-
npm install -g @htmlgoddess/cli
Isso instalará o utilitário de linha de comando. -
htmlgoddess create path/to/your/new/site - siga as instruções e você estará pronto e funcionando rapidamente.
Pendência
- refatorar: isolar testes.
- adicione: comando "host".
- add: style escolha comando para permitir que o usuário altere o tema após a criação.
- talento: corretor ortográfico.
- talento: gancho de confirmação automática para ser acionado ao confirmar.
- talento: revisar comandos.
- talento: comando "domínio".
- façanha: executável para download.
- refatorar: Troque CNAME pela configuração yaml para hospedagem.
- tarefa: cobertura
- converter "docs" em variáveis configuráveis
- tarefa: certifique-se de que o observador não vaze memória.
- bug: cli.action ainda está sendo enviado para o console durante os testes.
- façanha: GUI
Eu não conheço nenhum HTML
Isso está ok. Confira este vídeo para começar.
Menu de linha de comando
Quando você executa npm start , ele lhe dará as seguintes opções.
Como funciona
- Os arquivos na pasta “src” são compilados (impressos) em arquivos HTML estáticos na pasta “docs”.
- A pasta
src/templates contém os modelos. Eles são compilados com a pasta content para gerar suas páginas HTML estáticas. - A pasta
src/content contém o conteúdo do seu site, que é mantido em arquivos HTML que são pedaços de código HTML. - Quando você executa
npm run print (ou seleciona print no menu do terminal), ele compila seu conteúdo e modelos em arquivos HTML estáticos e recria a pasta docs. (NOTA: tudo em documentos é sobrescrito, então salve apenas o conteúdo em seu diretório src!) - Você pode testar seu site localmente executando o comando “servir” no menu.
- Quando estiver pronto para implantar seu site, basta fazer
npm run save && npm run publish - Você pode então apontar seu servidor web para "docs", seja apache, git pages, nginx ou qualquer coisa.
- Você pode adicionar qualquer folha de estilo direcionada a elementos HTML simples e deve funcionar :)
Modelos
- Tags no modelo que fecham automaticamente, como
<head /> ou <main /> pesquisarão arquivos de modelo que correspondam ao mesmo nome; um diretório com um índice html como main/index.html ou simplesmente um arquivo main.html- As tags não precisam ser HTML padrão. Se você criar um modelo foo.html na pasta de modelos, poderá incluir uma tag
<foo /> e ela substituirá o conteúdo de foo. - A compilação do modelo é recursiva, portanto você pode usar modelos dentro de modelos; no entanto, os modelos aninhados precisam ser arquivos contidos ou adjacentes ao modelo pai. Caso contrário, será simplesmente ignorado.
- A tag
<content/> é especial e irá extrair um modelo com o mesmo nome do arquivo (com dir) ou o modelo principal ('templates/index.html). - Quando você cria as páginas desejadas no diretório de conteúdo. Os diretórios relativos a esse local aparecerão em seu site com o mesmo caminho. Essa estrutura permite a auto-organização de pastas e URLs.
Restrições
- Sem JS
- Nenhum atributo exceto href básico etc.
- Sem aulas. Isso é o que permite adicionar qualquer folha de estilo voltada para CSS vanilla
- Sem SASS/SCSS/LESS. Isso não deveria ser necessário com elementos HTML simples
- Sem React, Angular ou qualquer outra coisa.
- Ou não, você pode hackear o que quiser.
Filosofia
O HTML foi projetado para ser simples e para que pessoas comuns possam criar e consumir coisas na internet. A web é incrível hoje, mas também se tornou bastante complexa e está deixando muitas pessoas para trás. Este CMS volta ao básico para dar às pessoas uma maneira de se expressarem de forma livre e fácil.
- A estrutura tenta aproveitar o máximo possível de tecnologia e padrões existentes.
- HTML é usado para tudo (como a Deusa HTML ordenou) em vez de tags de modelo proprietárias e outras sintaxes especiais. O sistema de modelos procura tags HTML de fechamento automático e as substitui por modelos ou conteúdos associados.
- O sistema de arquivos é aproveitado para localizar/nomear modelos e roteamento de URL.
- Git serve como banco de dados real para o CMS junto com os arquivos HTML de conteúdo e modelos.
- O site "imprime'' na pasta "docs'', e então você "publica" no git, onde você pode configurar páginas do github. É independente do servidor web, então você pode realmente pegar os arquivos na pasta docs e colocá-los em qualquer lugar que desejar e apontar um servidor web para eles.
- As tags não devem precisar de classes ou atributos. Isso permite que novos temas sejam introduzidos perfeitamente. Você pode pensar no HTML simples como a interface para aplicar estilos.
- O uso de JavaScript é desencorajado, pois não deveria ser desnecessário, embora não haja nada na estrutura que o impeça de usá-lo.
- Você pode ignorar tudo o que acabei de escrever e fazer o que quiser. É a internet!
Problemas frequentes
- Dependências agindo de forma estranha:
Lerna faz algumas coisas nos bastidores para vincular dependências. Se você instalar um novo módulo e as coisas pararem de funcionar, tente lerna bootstrap a partir do root. - O diretório de teste não está sendo limpo. Se um teste falhar, isso poderá impedir a limpeza do diretório de teste. Nesse caso, execute
npm run clean-test-dir que o removerá manualmente.
Contribuindo
- execute testes em packages/cli para ter certeza de que tudo está em ordem
npm run test - Confirme as alterações no mono repo
npm run commit e siga as instruções - lernapublish --force-publish Isso publicará no NPM e também enviará uma tag para o git
