wodle
1.0.0
Wodle es un generador de sitios estáticos que utiliza nuevos marcos y herramientas para el desarrollo web moderno. Está construido sobre Next.js y Tachyons. Y puedes convertir fácilmente el sitio estático generado en un sitio web completamente dinámico.
Debido a que NextJS y CSS funcional hacen que sea muy fácil comenzar con un blog o una página estática, es un buen punto de partida para blogueros y desarrolladores que quieran aprender esas tecnologías.
Puedes instalar Wodle a través de npm:
npm install -g wodle
Una vez que Wodle esté instalado, puede usar el comando wodle . Para construir un nuevo sitio puede ejecutar:
wodle myBlog
Eso generará un nuevo sitio llamado myBlog en el mismo directorio donde ejecutó el comando
Para comenzar con su nuevo sitio, solo necesita ingresar al CD y luego instalar las dependencias:
cd myBlog
yarn
Eso recuperará todas las dependencias, una vez que esté listo, puede iniciar un servidor en ejecución:
yarn dev
Y vaya a localhost:3000/ , debería ver un sitio como este:
Ese servidor escuchará los cambios en su aplicación y recargará el navegador.
Si desea ejecutar su sitio sin la recarga en caliente, puede ejecutar:
yarn start
Para construir su sitio puede ejecutar:
yarn build
lo que generará una carpeta out/ con su sitio estático listo para ser publicado.
Su sitio tendrá diferentes carpetas:
Esta carpeta contiene los archivos de sus páginas y sus nombres coinciden con sus rutas, por lo que si desea agregar una nueva página en /new-page necesitará agregar un nuevo componente en esta carpeta llamado new-page.js . Para enrutamiento avanzado, consulte aquí.
El andamio viene con algunos componentes de página prediseñados en la carpeta de components .
En esta carpeta encontrará todos los componentes prediseñados del sitio. Los componentes principales de esta aplicación de andamio son:
Un componente de la barra lateral que obtiene elementos y representa un Nav con sus NavItems, el contenido de este componente está en content/sideBarOptions.js
Este componente simplemente envuelve todo lo que desea mostrar en la sección principal (el centro del sitio).
Este componente representa el artículo principal, como se ve en el índice y en cada artículo en particular. Una demostración del contenido que puede procesar este componente se encuentra en content/mainArticle .
Este componente muestra una lista de artículos como verá en cada página individual desde el menú de la barra lateral; puede ver las listas en content/ en los archivos <something>Articles.js
entre otros
Su carpeta de estilos es para todo su CSS (ahora mismo está casi vacía gracias al CSS funcional y los taquiones)
¡Puedes continuar eliminando páginas (eliminando archivos de la carpeta pages ) agregando más páginas, artículos, opciones siguiendo los patrones en el andamio o simplemente cambiar todo como quieras! ¡Puedes leer excelentes guías en el sitio Next.js y Tachyons para crear tu increíble sitio web o blog!
basado en el arte anterior chibicode.com y jspg
