- Use Jekyll for content management and templating.
- Use ImageMagick to resize images for responsive image loading.
- Use SCSS to keep CSS organized into logical components.
- Use Autoprefixer to automatically insert browser prefixes where necessary to handle cross browser compatibility.
All with one command from the terminal:
Directory Structure and Compilation
Because Gulp and Jekyll to not play nice historically, static assets need to be generated into two different folders:
- SCSS source files live in
_scss/and compile to both
_js/and compile to both
- Images in
_img/compile to both
Note: the root level
img/folders are in the
.gitignoreand are regularly deleted. Modifications to these folders may be lost without warning! Instead, edit source files in the corresponding underscore-prefixed folders.
Responsive images live in the
/_img/res folder. Place images that you wish to resize into the
/_img/res/raw folder. To resize them, run
gulp responsive [--dir some/path ] # Becomes /_img/res/raw/some/path
This will create subdirectories within the
/_img/res/ folder with resized images in each. By default, it creates the folders
1600/, with images resized to those heights in pixels in each one. Then, these images will be copied into
/_site/img/res/<size> for static access.
For example, if
/_img/res/raw/test.png has resolution 5120x3200, running
gulp responsive will create a 32x20px image at
/_img/res/20/test.png, a 320x200px image at
/_img/res/200/test.png, etc. After running
gulp serve, those files will be available statically at
/img/res/<size>/test.png. In addition, data about these images (filename / aspect ratio pairs, and generated sizes) is generated into
You can customize what size images are generated by changing the
responsiveSizes variable at the top of
Note: By default, responsive resizing is not included in the
gulp servecommand, as it can be very computationally expensive. This can be enabled by uncommenting
Note: By default, generated images and
/_data/responsiveMetadata.jsonare included in the
An overview of Gulp commands available:
Builds the site into the
_site directory. This includes:
- SCSS w/ linting, sourcemaps and autoprefixing
- JS linting and uglification
- Image optimization and resizing
- Jekyll build
This is used for distributing an optimized version of the site (for deployment). It includes everything from
gulp build as well as:
- SCSS minification
- CSS / JS inline-sourcing
- more rigorous image optimization
Resizes images in the
_img/res/raw directory into
_img/res/<size> directories, for several different heights in pixels (default: 20, 200, 800, 1600).
Watches for changes in local files and rebuilds parts of the site as necessary, into the
gulp watch in the background, and serves the
dist directory at
localhost:3000 with automatic reloading using Browsersync.