keystone ssg
1.0.0
Keystone parece obsoleto en estos días, te recomiendo que eches un vistazo a Astro o Vite.
Keystone es un generador de sitios estáticos ideal para crear rápidamente sitios web pequeños. No se requiere configuración y una colección de funciones útiles están habilitadas de forma predeterminada.
/public y estará listo para comenzarCree un nuevo directorio y ejecute el siguiente comando para configurar Keystone, package.json y git. Se requiere el nodo 14.xx.
$ npm install keystone-ssg
Genial, ¡estás instalado!
Inicie el servidor de desarrollo Keystone y luego vaya a http://localhost:8080 para ver el sitio web de ejemplo.
$ npm run dev
El proyecto se construye dentro de la carpeta /public después de ejecutar el comando, listo para cargarse.
$ npm run build
Hay seis directorios importantes dentro de un proyecto Keystone, cada uno con su propio propósito:
Cada archivo HTML .html y markdown .md en la carpeta de páginas corresponde a una página de su sitio web. Hay dos archivos en el proyecto de ejemplo aquí, intente abrir index.html . El enrutamiento automático agrupará los archivos en la carpeta /public al ejecutar npm run build de esta manera:
/pages/index.html -> /public/index.html
/pages/example.md -> /public/example/index.html
Es posible que hayas notado que index.html tiene la siguiente etiqueta: <_template basic.html /> . Esto coloca el contenido de index.html dentro del archivo de plantilla ranurado en /templates/basic.html . Este formato de etiqueta HTML personalizado también funciona dentro de archivos .md .
Las plantillas se pueden utilizar con /pages para proporcionar un marco listo para usar para sus páginas. Utilice una etiqueta <_slot /> dentro del archivo de plantilla para proporcionar un punto de entrada para su contenido. Abra /templates/basic.html y busque:
< _var title default="Keystone default title" /> Se trata de una ranura variable, denominada title , en un archivo de plantilla, con un valor predeterminado opcional.
Usar lo siguiente como etiqueta de plantilla dentro de /pages le permitirá ingresar un valor personalizado en la plantilla, desde una página de contenido:
< _template basic.html title="A custom title" /> La carpeta /components se usa simplemente para componentes reutilizables. La etiqueta <_import> se utiliza para importar componentes a otros archivos HTML, un ejemplo de los cuales se encuentra dentro de /templates/basic.html .
< _import header.html /> La etiqueta <_import> también se puede utilizar para importar el contenido de cualquier otro tipo de archivo (JS, SCSS, etc.), después de agrupar primero el código fuente.
Coloque los archivos Javascript dentro de la carpeta /src . La siguiente etiqueta se convertirá en una etiqueta de importación <script> normal y se vinculará a su archivo /src/main.js :
< _script main.js />Las importaciones de ES6 son totalmente compatibles y el archivo resultante se transpilará con Babel, se incluirá en Rollup y se minimizará.
La carpeta /styles se utiliza para su CSS/SCSS. La siguiente etiqueta se convertirá en una etiqueta de importación CSS <link> normal, vinculando a su archivo /styles/main.scss compilado:
< _style main.scss /> Todas las funciones node-sass son totalmente compatibles, incluida @import .
Aquí se colocan recursos estáticos, es decir, fuentes, imágenes e iconos. Todo lo que hay aquí se transferirá a su carpeta correspondiente en el directorio raíz, por ejemplo:
/assets/favicon.ico -> /public/favicon.ico
/assets/fonts/fontname.ttf -> /public/fonts/fontname.ttf
<_template src='myfolder/myfile.html' /> .package.json ; no utilice una barra diagonal inicial a menos que desee acceder a un archivo fuera del proyecto..keystone-page-loading se configura para display: block . Si la clase está configurada para display: none en el CSS, esto se puede usar para crear un indicador de carga.search.json , en el directorio raíz. Se trata de una matriz JSON que contiene un objeto para cada página, que enumera el contenido del texto, el título y la ruta de la página.public ; elimine la línea public de .gitignore si desea utilizarla para enviarla a Git. package.json con la versión que está actualizando y ejecute npm install keystone-ssg para una actualización rápida.| Etiqueta | Descripción | Atributos |
|---|---|---|
<_template> | Importa el archivo actual a un <_slot> dentro del archivo de plantilla | [nombre de archivo], [nombre de variable], src |
<_slot> | Utilizado dentro de un archivo de plantilla como punto de entrada para el archivo importado | Ninguno |
<_var> | Se utiliza dentro de un archivo de plantilla para ser reemplazado por una variable tomada de <_template> | [nombre de la variable], predeterminado |
<_import> | Importa un componente | [nombre de archivo], src |
<_script> | Crea una etiqueta <script> que enlaza con el script incluido. | [nombre de archivo], src |
<_style> | Crea una etiqueta <link> que enlaza con el archivo CSS incluido. | [nombre de archivo], src |
| Dominio | Descripción | Diferencias de salida |
|---|---|---|
npm run dev | Crea el sitio web para el desarrollo y luego inicia el servidor de desarrollo Keystone. |
|
npm run build | Construye el sitio web para producción. |
|
El archivo de configuración es keystone.config.js
| Opción | Descripción | Por defecto |
|---|---|---|
| Enlaces dinámicos | Habilita enlaces locales cargados dinámicamente en su sitio web de Keystone, sin necesidad de actualizar | verdadero |
| buscararchivo | Genera search.json en el directorio raíz | verdadero |
| ruta del índice | El directorio raíz de su sitio web | '/' |
| puerto | El puerto del servidor de desarrollo, localhost: 8080 | 8080 |
| puertos | Un segundo puerto utilizado para el servidor de desarrollo. | 8081 |
| devServerIp | La ubicación del servidor de desarrollo, localhost :8080. Reemplácela con la IP local de su dispositivo para ver el servidor de desarrollo en dispositivos locales (ejemplo: '192.168.1.103'). | 'host local' |
| observó | Los directorios supervisados por el servidor de desarrollo de Keystone, que forzarán una recompilación y una actualización de la página cuando se editen los archivos. | ['plantillas', 'páginas', 'activos', 'componentes', 'src', 'estilos'] |
| construir | El directorio de la página de contenido. | 'páginas' |
| servido | El directorio que contiene el sitio web generado. | 'público' |
| Recompilar completo | Forzar una recompilación completa de todos los archivos después de cada cambio de archivo en modo de desarrollo | FALSO |
| empty-keystone-project
--| .git/
--| assets/
--| components/
--| pages/
--| src/
--| styles/
--| templates/
--| keystone.config.js
--| package.json
--| package-lock.json
Si tiene un PLUGIN_ERROR después de instalar y ejecutar el ejemplo, esto es un problema de Babel, ejecute el siguiente comando para solucionarlo:
npm install @babel/core @babel/preset-env --save-dev
