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.
- 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
- 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
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.
Runs the Jekyll build with the production config file, then runs the
build-assets task to build and optimize all site assets.
_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
Each post with a featured image requires two images:
- Main feature image:
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. ---
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)
- Fallback: A single image file with the same dimensions and same file name.
- Benoît Boucart: Wrote an awesome article on using Jekyll with Gulp, which opened me up to the
- Icons from the Noun Project:
- Category icon on post pages: Shai Rilov
- Tags icon on post pages: factor[e] design initiative
- 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