hugo boilerplate
1.0.0
Un passe-partout Hugo pour la création de sites Web modernes?
Cette passe-partout enveloppe Hugo avec Gulp comme votre pipeline de construction de développement local.
PostCSS et WebPack + Babel sont utilisés pour la compilation et le transpillage CSS et JS.
Browsersync est utilisé pour offrir une expérience de développement locale moderne, vous permettant de prévisualiser votre site sur plusieurs appareils en synchronisation.
BrowsersList est utilisé pour configurer la prise en charge du navigateur.
SVG Sprite est utilisé pour générer un sprite SVG.
Pour utiliser Gulp, vous devez installer le nœud et le NPM.
Une fois les conditions préalables installées, clonez le référentiel à votre machine locale, puis exécutez:
npm install
Cela installera Hugo ainsi que toutes les dépendances de nœuds nécessaires pour exécuter votre environnement Hugo. Cela peut prendre un peu de temps!
Toutes les tâches de développement sont effectuées à l'aide de NPM Run. Voir "scripts" dans package.json pour une liste complète de commandes.
Le développement local est alimenté par Browsersync, vous pourrez développer rapidement des sites:
http://localhost:3000/ .L'exécution du serveur de développement local est aussi simple que l'exécution:
npm start
Cela affichera tous les contenus de brouillon, daté ou expiré, qui n'est pas inclus dans votre version de production.
Si vous souhaitez vous développer avec le site tel qu'il apparaîtra en production, exécutez:
npm run preview
Pour générer une construction de production finale sur votre machine locale, vous pouvez exécuter:
npm run build
La nouvelle construction de votre site se retrouvera dans le dist/ Directory.
Toutes les commandes CLI de Hugo peuvent être exécutées via NPM en fonctionnant:
npm run hugo -- <command> --<param>
Par exemple:
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/
Tous les SVG trouvés dans src/img/ seront combinés dans un seul SVG Sprite à hugo/static/svg/sprite.symbol.svg .
Cette passe-partout est livrée avec un simple partiel pour l'utilisation de SVG dans vos mises en page. Vous pouvez sélectionner un SVG en passant dans It's ID.
{{/* Using a logo stored at src/img/github.svg */}}
{{ partial "svg" (dict "id" "github" "class" "optional-class" "width" 32 "height" 32) -}}
Remarque: les paramètres class , width et height sont facultatifs
Cette passe-partout est livrée avec des configurations ESLINT et Stylelint standard qui mettront en peluche à votre CSS et JS pour des erreurs ou des problèmes de style communs, qui fonctionnent avec les IDE les plus populaires.
Les tests peuvent également être exécutés à partir de la ligne de commande:
npm run eslintnpm run stylelintSi vous souhaitez réparer automatiquement les erreurs de charpage, vous pouvez également le faire à partir de la ligne de commande:
npm run eslint:fixnpm run stylelint:fix Cette passe-partout est autonettoyante et supprimera le dist/ Et les dossiers .tmp/ dossiers chaque fois qu'une commande est exécutée pour garantir que leur contenu est toujours à jour.
Si vous souhaitez nettoyer manuellement, courez:
npm run clean
Toutes les tâches de construction sont gérées par Gulp et sont situées dans gulpfile.babel.js . Toutes les parties de la construction sont configurables dans des fichiers discrets pour faciliter la gestion.
Tous les chemins de source et de destination peuvent être configurés à partir de gulp.config.js .
Les commandes de construction pour Hugp peuvent être configurées à partir de gulp.config.js . Les commandes de build sont définies en fonction de la variable d'environnement NODE_ENV . Vous pouvez éventuellement charger différents args à l'aide de la variable d'environnement GENERATOR_ARGS .
Quatre options sont disponibles:
default : les commandes de construction par défaut qui sont toujours exécutéesdevelopment : Commandes de construction supplémentaires pour le serveur de développementpreview : Commandes de construction supplémentaires pour un serveur de développement de productionproduction : Commandes de construction supplémentaires pour les constructions de production La configuration de BrowSersync se trouve dans .browsersyncrc.js
La configuration de PostCSS se trouve dans .postcssrc.js
La configuration de WebPack se trouve dans .webpackrc.js
POSTCSS et WebPack utilisent .browserslistrc pour décider de la prise en charge du navigateur lors de la compilation.
hugo/static/ car ils doivent apparaître dans le site construit , par exemple, un fichier CNAME doit être stocké sur hugo/static/CNAME pour devenir /CNAMEsrc/js/ vers js/{filename}.jsrequire() et import des instructions à partir de packages NPM et de fichiers JS locauxsrc/css/ vers css/{filename}.csshugo/ sont toujours engagés{{ getenv "HUGO_ENV" }}developmentproductionstagingCe référentiel est livré avec un exemple de contenu de base préconfiguré pour travailler avec la foresterie, que vous pouvez utiliser pour commencer à construire votre site.
hugoToutes les contributions sont les bienvenues! Veuillez consulter nos directives de code de conduite et de soutien.
Ce projet passe-partout est publié sous la licence MIT.
