Hugo Server mit Gulp

Wie ich Hugo Server als Gulp Task laufen lasse

Foto von Goran Ivos auf Unsplash

Einleitung

Als ich ein System mit Hugo und Gulp zusammenstellte konnte ich nirgends Informationen finden, ob und wie man hugo server automatisch als Gulp Task laufen lassen kann. Diese Lösung habe ich mir selbst erarbeitet und ich gebe sie gerne weiter.

Was ist Hugo?

Hugo ist ein Generator für statische Webseiten, nicht unähnlich von Jekkyl. Hugo ist in go geschrieben und daher recht schnell.

Was ist Gulp?

Gulp, oder auch gulp.js ist ein Werkzeugkasten zur Automatisierung in Webseiten- und Software-Entwicklungsverfahren.

Warum Hugo und Gulp?

Mit Hugo habe die Möglichkeit sichere und schnelle Webseiten in Windeseile zu erstellen. Hugo ist sozusagen das CMS (Content Management System), aber auf meinem Rechner.

Mit Gulp kann ich alle möglichen Optimierungen und Erstellungen automatisieren, was den Vorgang noch mal sehr vereinfacht und beschleunigt. Zum Beispiel lasse ich Bilder optimieren, mein CSS aus SASS erstellen, mein CSS, JS und HTML minimieren und komprimieren, alles Mögliche gzippen und versionieren.

Ich verwende übrigens yarn, um das ganze zusammenzukleben. (npm Ersatz)

Dieser Artikel

In diesem Artikel werde ich kurz erklären, wie man “hugo server” in die Automatisierung einbauen kann, statt es jedes mal per Hand im Terminal auszuführen.

Code Beispiel

// imports
const gulp = require("gulp");
const runsequence = require("run-sequence");
const exec = require("child_process").exec;
const log = require("fancy-log");
const sass = require("gulp-sass");
const uglify = require("gulp-uglify");

// paths
const hugo_src = "src/site/";

// default
gulp.task("default", ["dev"]);

// dev
gulp.task("dev", function (callback) {
  runsequence(
    "watch",
    "hugoserver",
    callback
  );
});

// watch
gulp.task("watch", ["css", "js"], function () {
  gulp.watch("src/site/assets/scss/**/*"), ["css"])
  gulp.watch("src/site/assets/js/**/*"), ["js"])
});

// hugoserver
gulp.task("hugoserver", function(cb) {
  const hugoserver = exec(`cd ${hugo_src} && hugo server --bind=0.0.0.0`);
  hugoserver.stdout.on("data", (data) => {
    log(`${data}`);
  });
  hugoserver.stderr.on("data", (data) => {
    log(`${data}`);
  });
  hugoserver.on("close", (code) => {
    log(`child process exited with code ${code}`);
  });
});

// css
gulp.task("css", function () {
    return gulp.src("src/site/assets/scss/main.scss")
        .pipe(sass({}))
        .pipe(gulp.dest("src/site/static/assets/css"));
});

// js
gulp.task("js", function () {
  return gulp.src("src/site/assets/js/main.js"))
    .pipe(uglify())
    .pipe(gulp.dest("src/site/static/assets/js"));
});

Erklärung

• Nach den Imports kommt der Ordner wo ich die Hugo Seite erstellt habe (“src/site/”).
• Dann kommt die dev Aufgabe die die hugoserver Aufgabe zum laufen bringt.
• Außerdem gibt es eine watch Aufgabe, die js und css verarbeiten.
• In der hugoserver Aufgabe lasse ich einen Unterprozess laufen der zuerst in den Ordner wechselt und dann “hugo server” laufen lässt.
• Darunter kommt noch Fehler und Standard Logging, damit man im Terminal sieht was vor sich geht.

Stichworte

Kategorien