My blog, built from Jekyll with some extra muscle provided via Gulp.
CSS Ruby HTML JavaScript
Latest commit e15292f Sep 25, 2016 @aesinv Added a new post
Permalink
Failed to load latest commit information.
gulp-tasks
project
.editorconfig
.gitignore
_config.build.yml
_config.yml
bower.json
gulpfile.js
modular-gulpfile.js
package.json
readme.md

readme.md

The Blog of Matt Bengston

This is the source for my blog, located at aesinv.com. It runs on Jekyll, a static-site generator, with added development functionality via Gulp. You can read up on the implementation of Gulp on this blog post.

Dependencies

  • Bower: Front end dependency manager (full integration still WIP)
  • Gulp: Workflow automation and task management
  • Node.js / NPM: JS Runtime for Gulp and Gulp dependency management

Project Setup

  • Make sure Node.js and NPM is installed locally
  • Make sure you've gone through and followed the Jekyll Installation Guide, and have Ruby and RubyGems installed on your machine
  • Clone/fork project locally
    • git clone <repo url> .
  • Ensure Gulp is installed
    • npm install -g gulp
  • Ensure Bower is installed
    • npm install -g bower
  • Install NPM package and dependencies
    • npm install

Project Workflow

gulp build:assets

Concatenates, minifies, and optimizes all site JavaScript, runs the Jekyll-built stylesheet through an auto-prefixer and minifier, then optimizes all published images within the /project/img/ directory.

gulp serve

Creates a local server via Browsersync, runs the Jekyll build, runs the build-assets task, then watches for any changes within the /project/ directory. Rebuilds necessary files and refreshes the Browsersync server on changes.

gulp deploy

Runs the Jekyll build with the production config file, then runs the build-assets task to build and optimize all site assets.

Project Structure

_dist: Auto-generated built website
bower_components: Front end dependencies
gulp-tasks: Gulp task module files
project: Main project source
    - _assets: Excluded asset files
    - _data: Well formatted site data to be loaded into the site.data global
    - _drafts: Unfinished and unpublished posts
    - _includes: Partials that can be used by other partials as well as layouts
        + components: Components that make up other components and partials
        + custom: Feeds and other self-contained partials
        + svg: SVG's that can be embedded directly into layouts and components
    - _layouts: Usable site layouts made of partials
    - _plugins: Jekyll plugins to include/run when building the site
    - _posts: Published posts
    - _sass: Main styles source
        + components: Styles corresponding to /project/_includes/components items
        + fonts: Custom font declarations
        + partials: Styles corresponding to /project/_includes partials
        + vendor: 3rd party dependencies to be included within the built stylesheet
    - css: Includes main stylesheet
    - fonts: Custom font files
    - img: Published/included image files
        + icons: Site icons (favicons, twitter/og/ms icons)
        + seasonal: Images relating to seasonal settings/components
        + videos: HTML5 Videos and their fallbacks
    - js: Site scripts
        + lib: Vendor libraries/polyfills included in the project

Feature Images

Each post with a featured image requires two images:

  • Main feature image: 1920x575
  • Icon: 200x200

Featured icons can be specified within the YAML front matter block at the top of the post.

---
feature: post-feature.png # Relative to /project/img
featureico: post-feature-icon.png # Relative to /project/img
featurealt: The alt message for the featured image.
---

HTML5 Videos

Videos and a single fall-back image should go within the project/img/videos directory, with the following specs:

  • Size: 750px wide (for full-screen captures @ 1920x1080 or 2880x1800, 750px x 450px)
  • Formats: .mp4, .webm, .ogv
  • Fallback: A single image file with the same dimensions and same file name.

Hat Tips

  • Benoît Boucart: Wrote an awesome article on using Jekyll with Gulp, which opened me up to the child_process.spawn method.
  • Icons from the Noun Project:
    • Category icon on post pages: Shai Rilov
    • Tags icon on post pages: factor[e] design initiative

TODO

  • More blog posts, of course! :)
  • Sticky chapter guide
  • Add "pinned post" functionality (mostly for cars category, for my post engine resource guide)
  • Add tag cloud of sorts to expandable sidebar
  • Add social share function