htmldiosa
Un marco minimalista para crear un sitio web como si fuera 1999.
Requisitos
- Una computadora con Internet, un editor de texto y un navegador web.
- npm
Empezando
- Terminal abierta
-
npm install -g @htmlgoddess/cli
Esto instalará la utilidad de línea de comando. -
htmlgoddess create path/to/your/new/site - Siga las instrucciones y debería estar listo y funcionando en poco tiempo.
Hacer
- refactor: aislar pruebas.
- agregar: comando "host".
- agregar: comando de elección de estilo para permitir al usuario cambiar el tema después de la creación.
- hazaña: corrector ortográfico.
- Hazaña: gancho de confirmación automática para activarse al confirmar.
- Hazaña: corregir comandos.
- hazaña: comando "dominio".
- hazaña: ejecutable descargable.
- refactor: cambie CNAME por la configuración de yaml para alojamiento.
- tarea: cobertura
- convertir "docs" en variables configurables
- Tarea: asegúrese de que el observador no pierda memoria.
- Error: cli.action todavía se envía a la consola durante las pruebas.
- hazaña: GUI
No conozco nada de HTML
Está bien. Mira este vídeo para empezar.
Menú de línea de comando
Cuando ejecute npm start , le dará las siguientes opciones.
como funciona
- Los archivos de la carpeta "src" se compilan (imprimen) en archivos HTML estáticos en la carpeta "docs".
- La carpeta
src/templates contiene las plantillas. Estos se compilan con la carpeta de contenido para generar sus páginas HTML estáticas. - La carpeta
src/content contiene el contenido de su sitio, que se guarda en archivos html que son fragmentos de código HTML. - Cuando ejecuta
npm run print (o selecciona imprimir en el menú de la terminal), compilará su contenido y plantillas en archivos HTML estáticos y recreará la carpeta de documentos. (NOTA: ¡Todo en los documentos se sobrescribe, así que guarde el contenido solo en su directorio src!) - Puede probar su sitio localmente ejecutando el comando "servir" desde el menú.
- Cuando esté listo para implementar su sitio, simplemente haga
npm run save && npm run publish - Luego puede apuntar su servidor web a "docs", ya sea apache, páginas git, nginx o cualquier cosa.
- Puede agregar cualquier hoja de estilo que apunte a elementos HTML simples y debería funcionar :)
Plantillas
- Las etiquetas en la plantilla que se cierran automáticamente como
<head /> o <main /> buscarán archivos de plantilla que coincidan con el mismo nombre; ya sea un directorio con un índice html como main/index.html o simplemente un archivo main.html- Las etiquetas no tienen que ser HTML estándar. Si crea una plantilla foo.html en la carpeta de plantillas, puede incluir una etiqueta
<foo /> y reemplazará el contenido de foo. - La compilación de la plantilla es recursiva, por lo que puede usar plantillas dentro de las plantillas; sin embargo, las plantillas anidadas deben ser archivos contenidos dentro o adyacentes a la plantilla principal. De lo contrario, simplemente será ignorado.
- La etiqueta
<content/> es especial y extraerá una plantilla con el mismo nombre del archivo (con directorio) o la plantilla principal ('templates/index.html). - Cuando crea las páginas que desea en el directorio de contenido. Los directorios relativos a allí aparecerán en su sitio con la misma ruta. Esta estructura permite carpetas y URL autoorganizadas.
Restricciones
- Sin JS
- Sin atributos excepto href básico, etc.
- Sin clases. Esto es lo que le permite agregar cualquier hoja de estilo que tenga como objetivo CSS vainilla.
- Sin SASS/SCSS/MENOS. Esto no debería ser necesario con elementos HTML simples.
- Sin React, Angular ni nada más.
- O no, puedes hackear lo que quieras.
Filosofía
HTML fue diseñado para ser simple y para que la gente común cree y consuma cosas en Internet. La web es bastante impresionante hoy en día, pero también se ha vuelto bastante compleja y está dejando atrás a mucha gente. Este CMS vuelve a lo básico para brindar a las personas una forma de expresarse libre y fácilmente.
- El marco intenta aprovechar la mayor cantidad posible de tecnología y estándares existentes.
- HTML se usa para todo (como lo ha ordenado la Diosa HTML) en lugar de etiquetas de plantilla propietarias y otras sintaxis especiales. El sistema de plantillas busca etiquetas HTML de cierre automático y las reemplaza con plantillas o contenido asociados.
- El sistema de archivos se aprovecha tanto para buscar/nombrar plantillas como para enrutar URL.
- Git sirve como base de datos real para el CMS junto con los archivos HTML en contenido y plantillas.
- El sitio se "imprime" en la carpeta "docs" y luego usted "publica" en git, donde puede configurar páginas de github. Es independiente del servidor web, por lo que puede tomar los archivos en la carpeta de documentos y colocarlos en cualquier lugar que desee y señalarlos con un servidor web.
- Las etiquetas están destinadas a no necesitar clases ni atributos. Esto permite incorporar nuevos temas sin problemas. Puede pensar en HTML básico como la interfaz para aplicar estilos.
- Se desaconseja el uso de JavaScript ya que no debería ser innecesario, aunque no hay nada en el marco que impida su uso.
- Puedes ignorar todo lo que acabo de escribir y hacer lo que quieras. ¡Es Internet!
Problemas frecuentes
- Dependencias que actúan de forma extraña:
Lerna hace algunas cosas bajo el capó para vincular dependencias. Si instala un nuevo módulo y todo deja de funcionar, intente lerna bootstrap desde la raíz. - El directorio de prueba no se limpia. Si una prueba falla, es posible que se impida la limpieza del directorio de prueba. En ese caso, ejecute
npm run clean-test-dir que lo eliminará manualmente.
Contribuyendo
- ejecute pruebas en paquetes/cli para asegurarse de que todo esté en orden
npm run test - Confirme los cambios en el repositorio mono
npm run commit y siga las indicaciones - lerna publicar --force-publish Esto publicará en NPM y también enviará una etiqueta a git
