hugo boilerplate
1.0.0
Eine Hugo -Kesselplatte zum Erstellen moderner Websites?
Diese Kesselplatte wickelt Hugo mit Schluck als örtliche Entwicklungspipeline.
POSTCSS und WebPack + Babel werden für CSS- und JS -Kompilierungen und -Verstranken verwendet.
BrowserSync wird zur Bereitstellung einer modernen lokalen Entwicklungserfahrung verwendet, sodass Sie Ihre Website auf mehreren synchronisierten Geräten in der Vorschau anbieten können.
Browserslist wird zum Konfigurieren der Browserunterstützung verwendet.
SVG Sprite wird verwendet, um ein SVG -Sprite zu erzeugen.
Um Gulp zu verwenden, müssen Sie überknoten und NPM installiert haben.
Sobald die Voraussetzungen installiert sind, klonen Sie das Repository in Ihre lokale Maschine und fahren Sie dann aus:
npm install
Dadurch wird Hugo sowie alle Knotenabhängigkeiten installiert, die benötigt werden, um Ihre Hugo -Umgebung zu betreiben. Dies kann eine Weile dauern!
Alle Entwicklungsaufgaben werden mit NPM -Lauf ausgeführt. Eine vollständige Liste von Befehlen finden Sie in "scripts" in package.json.
Die lokale Entwicklung wird von BrowserSync angetrieben. Sie können sich schnell durch Websites entwickeln:
http://localhost:3000/ .Das Ausführen des lokalen Entwicklungsservers ist so einfach wie das Ausführen:
npm start
Dadurch werden alle Entwürfe, zukunftsbedingten oder abgelaufenen Inhalte angezeigt, die nicht in Ihrem Produktionsbau enthalten sind.
Wenn Sie sich mit der Website entwickeln möchten, wie sie in der Produktion erscheinen wird, rennen Sie:
npm run preview
Um einen endgültigen Produktionsbau auf Ihrer lokalen Maschine zu generieren, können Sie ausführen:
npm run build
Die frische Produktion Ihrer Website wird im dist/ Verzeichnis enden.
Alle CLI -Befehle von Hugo können durch NPM durch ausgeführt werden:
npm run hugo -- <command> --<param>
Zum Beispiel:
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/
Alle in src/img/ gefundenen SVGs werden zu einem einzigen SVG -Sprite bei hugo/static/svg/sprite.symbol.svg kombiniert.
Diese Kesselplatte bietet ein einfaches Teil für die Verwendung von SVGs in Ihren Layouts. Sie können einen SVG auswählen, indem Sie ID ID eingeben.
{{/* Using a logo stored at src/img/github.svg */}}
{{ partial "svg" (dict "id" "github" "class" "optional-class" "width" 32 "height" 32) -}}
Hinweis: Die Parameter class , width und height sind optional
Diese Kesselplatte verfügt über Standardkonfigurationen von ESLINT- und STYLelint -Konfigurationen, mit denen Ihr CSS und JS für Fehler oder gemeinsame Stilprobleme enthält, die mit den beliebtesten IDES arbeiten.
Die Tests können auch aus der Befehlszeile ausgeführt werden:
npm run eslintnpm run stylelintWenn Sie automatisch FININT -Fehler beheben möchten, können Sie dies auch aus der Befehlszeile tun:
npm run eslint:fixnpm run stylelint:fix Diese Kesselplatte ist selbstverpackt und entzieht die Produktion dist/ und die Entwicklung .tmp/ Ordner jedes Mal, wenn ein Befehl ausgeführt wird, um sicherzustellen, dass ihre Inhalte immer auf dem neuesten Stand sind.
Wenn Sie manuell aufräumen möchten, rennen Sie:
npm run clean
Alle Build -Aufgaben werden von Gulp übernommen und befinden sich in gulpfile.babel.js . Alle Teile des Builds können in diskreten Dateien konfiguriert werden, um das Management einfach zu machen.
Alle Build -Quell- und Zielpfade können von gulp.config.js konfiguriert werden.
Die Build -Befehle für Hugp können von gulp.config.js konfiguriert werden. Build -Befehle werden basierend auf der Umgebungsvariablen NODE_ENV festgelegt. Sie können optional verschiedene Argumente mit der Umgebungsvariablen GENERATOR_ARGS laden.
Vier Optionen sind verfügbar:
default : Die Standard -Build -Befehle, die immer ausgeführt werdendevelopment : Zusätzliche Build -Befehle für den Entwicklungsserverpreview : Zusätzliche Build -Befehle für einen Produktionsentwicklungsserverproduction : Zusätzliche Build -Befehle für Produktionsergebnisse Die Konfiguration für BrowserSync findet sich in .browsersyncrc.js
Die Konfiguration für PostCSS findet sich in .postcssrc.js
Die Konfiguration für WebPack ist in .webpackrc.js gefunden
Sowohl PostCSS als auch WebPack verwenden .browserslistrc um beim Kompilieren über den Browserunterstützung zu entscheiden.
hugo/static/ Ordner gespeichert werden, da sie in der gebauten Site z. B. eine CNAME -Datei bei hugo/static/CNAME gespeichert werden sollten, um /CNAME zu werdensrc/js/ TO js/{filename}.js kompiliertrequire() und import aus NPM -Paketen und lokalen JS -Dateien geschrieben werdensrc/css/ to css/{filename}.css zusammengestellthugo/ Ordner immer verpflichtet sind{{ getenv "HUGO_ENV" }}developmentproductionstagingDieses Repository verfügt über grundlegende Beispielinhalte, die vorkonfiguriert sind, um mit Forstwirtschaft zu arbeiten, mit der Sie mit dem Aufbau Ihrer Website beginnen können.
hugo einAlle Beiträge sind willkommen! Bitte beachten Sie unsere Richtlinien für Verhaltenskodex und Support.
Dieses Boilerplate -Projekt wird unter der MIT -Lizenz veröffentlicht.
