Improving a Pelican blog with gulp

Sat, 13 Aug 2016 22:49:00 +0000

Pelican is a Python powered static site generator, which is useful for blogs or other small static sites. Although a respectable number of Pelican plugins are available - the Node.js/JavaScript ecosystem for build systems is currently much stronger and updated far more frequently.

In this example I'm going to use gulp.js to take the output from Pelican, process it and output something slightly better.

Installing gulp

We'll quickly create a package.json file to make things easier later:

$ npm init

Then we can install the packages we need. In this small example we'll use gulp-htmlmin to minify the HTML output from Pelican:

$ npm install --save gulp gulp-htmlmin

To make running gulp a bit easier, update the package.json file and add an entry into scripts:

{
  "scripts": {
    "gulp": "gulp"
  }
}

Now we can run gulp with npm run gulp - however we'll need to create a gulpfile first.

gulpfile.js

Create a file named gulpfile.js:

var gulp = require("gulp");
var htmlmin = require("gulp-htmlmin");

gulp.task("copy", function () {
  return gulp.src(["./output/**", "!./output/**/**.html"]).pipe(gulp.dest("dist"));
});

gulp.task("html", function () {
  return gulp
    .src("./output/**/*.html")
    .pipe(
      htmlmin({
        collapseWhitespace: true,
      })
    )
    .pipe(gulp.dest("dist"));
});

gulp.task("default", ["copy", "html"]);

This gulpfile has a copy task, which will just copy all files which don't have an HTML extension from output to dist, so any images, CSS, or RSS feed files will be copied across without any modifications.

We've also got an html task, which takes any files with an .html extension and runs it a minifier before being output to the dist directory.

Updating the Makefile

A few tweaks are needed for publishing to

Add a DISTDIR variable at the top of your Makefile, this is where we're going to output files from gulp:

DISTDIR=$(BASEDIR)/dist

Update the publish target to run gulp every time we regenerate the site:

publish:
    $(PELICAN) $(INPUTDIR) -o $(OUTPUTDIR) -s $(PUBLISHCONF) $(PELICANOPTS)
    npm run gulp

Update the service_upload target for the provider you upload your Pelican site with, replace OUTPUTDIR with DISTDIR. In this example I've updated the rsync_upload target:

rsync_upload: publish
    rsync -e "ssh -p $(SSH_PORT)" -P -rvzc --delete $(DISTDIR)/ $(SSH_USER)@$(SSH_HOST):$(SSH_TARGET_DIR) --cvs-exclude

Publish!

Now we've got gulp installed, created our gulpfile, and updated the Makefile, updating the published content should be as simple as:

$ make publish

Pelican will run first, then gulp will process all the files into the dist directory. Any other targets will perform both of these tasks first before uploading the content to your preferred provider.

What's next?

Improve your gulpfile and add more tasks to it! You might find some inspiration from Gulp Starter, or from hundreds of other gulp tutorials online.