hugo boilerplate
1.0.0
¿Un Hugo Boilerplate para construir sitios web modernos?
Esta calderera envuelve a Hugo con Gulp como su tubería de desarrollo local.
PostCSS y Webpack + Babel se utilizan para la compilación y transposición de CSS y JS.
BrowserSync se utiliza para proporcionar una experiencia de desarrollo local moderna, lo que le permite obtener una vista previa de su sitio en múltiples dispositivos sincronizados.
BrowsersList se utiliza para configurar el soporte del navegador.
SVG Sprite se usa para generar un SVG Sprite.
Para usar Gulp, debe tener instalado Node y NPM.
Una vez que se instalen los requisitos previos, clone el repositorio a su máquina local y luego ejecute:
npm install
Esto instalará Hugo, así como todas las dependencias de nodo necesarias para ejecutar su entorno Hugo. ¡Esto puede llevar un poco de tiempo!
Todas las tareas de desarrollo se realizan utilizando la ejecución de NPM. Consulte "scripts" en paquete.json para obtener una lista completa de comandos.
El desarrollo local está impulsado por BrowserSync, podrá desarrollar sitios rápidamente a través de:
http://localhost:3000/ .Ejecutar el servidor de desarrollo local es tan simple como en ejecución:
npm start
Esto mostrará todo el contenido de borrador, con fecha futuro o caducidad, que no está incluida en su construcción de producción.
Si desea desarrollar con el sitio como aparecerá en la producción, ejecute:
npm run preview
Para generar una construcción de producción final en su máquina local, puede ejecutar:
npm run build
La nueva construcción de producción de su sitio terminará en el dist/ Directorio.
Todos los comandos CLI de Hugo se pueden ejecutar a través de NPM ejecutando:
npm run hugo -- <command> --<param>
Por ejemplo:
npm run hugo -- new posts/example-post.md
// => creates a new post at hugo/content/posts/example-post.md
.
├── .tmp/ // Temporary directory for development server
├── dist/ // The production build
├── hugo/ // The Hugo project; content, data and static files
| ├── .forestry/ // Contains Forestry.io configuration files
| ├── content/ // Where all site content is stored
| ├── data/ // TOML, YAML or JSON files containing site data
| ├── layouts/ // Your site's layouts
| | ├── partials/ // Your site's partials
| | └── shortcodes/ // Your site's shortcodes
| ├── static/ // Where all static files live
| | ├── css/ // Where compiled CSS files live
| | ├── js/ // Where compiled JS files live
| | └── uploads/ // Where user uploads are stored
| └── config.toml // The Hugo configuration file
└─── src/
├── css // CSS/SCSS source files to be compiled to /css/
└── js // JS source files to be compiled to /js/
Cualquier SVG que se encuentre en src/img/ se combinará en un solo SVG Sprite en hugo/static/svg/sprite.symbol.svg .
Esta calderera viene con un simple parcial para usar SVG en sus diseños. Puede seleccionar un SVG pasando su identificación.
{{/* Using a logo stored at src/img/github.svg */}}
{{ partial "svg" (dict "id" "github" "class" "optional-class" "width" 32 "height" 32) -}}
Nota: La class , width y los parámetros height son opcionales
Esta boilerplate viene con configuraciones estándar de Eslint y Stylelint que filtrarán sus CSS y JS para errores o problemas de estilo comunes, que funcionan con la mayoría de los IDE populares.
Las pruebas también se pueden ejecutar desde la línea de comando:
npm run eslintnpm run stylelintSi desea solucionar automáticamente los errores de linta, también puede hacerlo desde la línea de comando:
npm run eslint:fixnpm run stylelint:fix Esta calderera es autolimpiada y eliminará el dist/ y las carpetas .tmp/ cada vez que se ejecuta un comando para garantizar que sus contenidos siempre estén actualizados.
Si desea limpiar manualmente, ejecute:
npm run clean
Todas las tareas de construcción son manejadas por Gulp y se encuentran en gulpfile.babel.js . Todas las partes de la compilación son configurables en archivos discretos para facilitar la gestión.
Todas las rutas de origen y destino de compilación se pueden configurar desde gulp.config.js .
Los comandos de compilación para HUCP se pueden configurar desde gulp.config.js . Los comandos de compilación se establecen en función de la variable de entorno NODE_ENV . Opcionalmente, puede cargar diferentes args utilizando la variable de entorno GENERATOR_ARGS .
Hay cuatro opciones disponibles:
default : los comandos de compilación predeterminados que siempre se ejecutandevelopment : comandos de compilación adicionales para el servidor de desarrollopreview : comandos de compilación adicionales para un servidor de desarrollo de producciónproduction : Comandos de compilación adicionales para compilaciones de producción La configuración para BrowserSync se encuentra en .browsersyncrc.js
La configuración para PostCSS se encuentra en .postcssrc.js
La configuración para webpack se encuentra en .webpackrc.js
Tanto PostCSS como Webpack usan .browserslistrc para decidir sobre el soporte del navegador al compilar.
hugo/static/ como deben aparecer en el sitio construido , por ejemplo, un archivo CNAME debe almacenarse en hugo/static/CNAME para convertirse en /CNAMEsrc/js/ to js/{filename}.jsrequire() e import declaraciones de los paquetes NPM y los archivos JS localessrc/css/ a css/{filename}.csshugo/ siempre se comprometan{{ getenv "HUGO_ENV" }}developmentproductionstagingEste repositorio viene con contenido de ejemplo básico preconfigurado para trabajar con Forestry, que puede usar para comenzar a construir su sitio.
hugo¡Todas las contribuciones son bienvenidas! Consulte nuestras pautas de Código de Conducta y Apoyo.
Este proyecto Boilerplate se publica bajo la licencia MIT.
