keystone ssg
1.0.0
Keystone parece desatualizado atualmente, recomendo que você dê uma olhada no Astro ou no Vite.
Keystone é um gerador de sites estáticos ideal para construir pequenos sites rapidamente. Nenhuma configuração é necessária e uma coleção de recursos úteis estão habilitados por padrão.
/public e você estará pronto para começarCrie um novo diretório e execute o seguinte comando para configurar Keystone, package.json e git. Nó 14.xx necessário.
$ npm install keystone-ssg
Ótimo, você está instalado!
Inicie o servidor de desenvolvimento Keystone e acesse http://localhost:8080 para ver o site de exemplo.
$ npm run dev
O projeto é construído na pasta /public após a execução do comando, pronto para upload.
$ npm run build
Existem seis diretórios importantes dentro de um projeto Keystone, cada um com sua finalidade:
Cada arquivo HTML .html e markdown .md na pasta de páginas corresponde a uma página do seu site. Existem dois arquivos no projeto de exemplo aqui, tente abrir index.html . O roteamento automático agrupará os arquivos na pasta /public ao executar npm run build assim:
/pages/index.html -> /public/index.html
/pages/example.md -> /public/example/index.html
Você deve ter notado que index.html possui a seguinte tag: <_template basic.html /> . Isso coloca o conteúdo de index.html dentro do arquivo de modelo com slot em /templates/basic.html . Este formato de tag HTML personalizado também funciona em arquivos .md .
Os modelos podem ser usados com /pages para fornecer uma estrutura pronta para suas páginas. Use uma tag <_slot /> no arquivo de modelo para fornecer um ponto de entrada para seu conteúdo. Abra /templates/basic.html e procure:
< _var title default="Keystone default title" /> Este é um slot variável, denominado title , em um arquivo de modelo, com um valor padrão opcional.
Usar o seguinte como tag de modelo dentro de /pages permitirá que você insira um valor personalizado no modelo, a partir de uma página de conteúdo:
< _template basic.html title="A custom title" /> A pasta /components é usada simplesmente para componentes reutilizáveis. A tag <_import> é usada para importar componentes para outros arquivos HTML, um exemplo disso está dentro de /templates/basic.html .
< _import header.html /> A tag <_import> também pode ser usada para importar o conteúdo de qualquer outro tipo de arquivo (JS, SCSS etc), após primeiro agrupar a fonte.
Coloque os arquivos Javascript na pasta /src . A tag a seguir será convertida em uma tag de importação <script> normal, vinculada ao seu arquivo /src/main.js :
< _script main.js />As importações ES6 são totalmente suportadas e o arquivo resultante será transpilado com Babel, empacotado com Rollup e minificado.
A pasta /styles é usada para seu CSS/SCSS. A tag a seguir será convertida em uma tag de importação css <link> normal, vinculada ao seu arquivo /styles/main.scss compilado:
< _style main.scss /> Todos os recursos node-sass são totalmente suportados, incluindo @import .
Ativos estáticos são colocados aqui, ou seja, fontes, imagens, ícones. Tudo aqui será transferido para a pasta correspondente no diretório raiz, por exemplo:
/assets/favicon.ico -> /public/favicon.ico
/assets/fonts/fontname.ttf -> /public/fonts/fontname.ttf
<_template src='myfolder/myfile.html' /> .package.json , não use uma barra inicial, a menos que queira acessar um arquivo fora do projeto..keystone-page-loading é definida como display: block . Se a classe estiver configurada para display: none no CSS, isso pode ser usado para criar um indicador de carregamento.search.json , no diretório raiz. Este é um array JSON que contém um objeto para cada página, listando o conteúdo do texto, o título e o caminho da página.public é ignorada pelo Git, remova a linha public de .gitignore caso deseje usá-la para enviá-la ao Git. package.json pela versão para a qual você está atualizando e execute npm install keystone-ssg , para uma atualização rápida.| Marcação | Descrição | Atributos |
|---|---|---|
<_template> | Importa o arquivo atual para um <_slot> dentro do arquivo de modelo | [nome do arquivo], [nome da variável], src |
<_slot> | Usado em um arquivo de modelo como ponto de entrada para o arquivo importado | Nenhum |
<_var> | Usado em um arquivo de modelo para ser substituído por uma variável obtida de <_template> | [nome da variável], padrão |
<_import> | Importa um componente | [nome do arquivo], src |
<_script> | Cria uma tag <script> vinculada ao script incluído | [nome do arquivo], src |
<_style> | Cria uma tag <link> vinculando ao arquivo css incluído | [nome do arquivo], src |
| Comando | Descrição | Diferenças de saída |
|---|---|---|
npm run dev | Constrói o site para desenvolvimento e, em seguida, inicia o servidor de desenvolvimento Keystone. |
|
npm run build | Constrói o site para produção. |
|
O arquivo de configuração é keystone.config.js
| Opção | Descrição | Padrão |
|---|---|---|
| links dinâmicos | Permite links locais carregados dinamicamente em seu site Keystone, sem necessidade de atualização | verdadeiro |
| arquivo de pesquisa | Gera search.json no diretório raiz | verdadeiro |
| indexPath | O diretório raiz do seu site | '/' |
| porta | A porta do servidor de desenvolvimento, localhost: 8080 | 8080 |
| portasWs | Uma segunda porta usada para o servidor de desenvolvimento | 8081 |
| devServerIp | A localização do servidor de desenvolvimento, localhost :8080. Substitua pelo IP local do seu dispositivo para visualizar o servidor de desenvolvimento em dispositivos locais (exemplo: '192.168.1.103'). | 'localhost' |
| assistido | Os diretórios monitorados pelo servidor de desenvolvimento Keystone, que forçarão uma recompilação e atualização da página quando os arquivos forem editados | ['modelos', 'páginas', 'ativos', 'componentes', 'src', 'estilos'] |
| construir | O diretório da página de conteúdo | 'páginas' |
| servido | O diretório que contém o site gerado | 'público' |
| completoRecompilar | Forçar uma recompilação completa de todos os arquivos após cada alteração de arquivo no modo de desenvolvimento | falso |
| empty-keystone-project
--| .git/
--| assets/
--| components/
--| pages/
--| src/
--| styles/
--| templates/
--| keystone.config.js
--| package.json
--| package-lock.json
Se você tiver um PLUGIN_ERROR após instalar e executar o exemplo, este é um problema do Babel, execute o seguinte comando para corrigi-lo:
npm install @babel/core @babel/preset-env --save-dev
