Flightdeck

An opinionated starter project for Jekyll that uses modern front-end tooling.

What's inside the Flightdeck

• Jekyll
• Gulp
• Sass
• PostCSS
  • Autoprefixer
  • CSSNano
• Imagemin
• Browsersync
• Flightdeck Liftoff for deployments
  • includes support for .env (see: env_example)

Prerequisites

To install this project, you'll need the following things installed on your machine.

1. Jekyll & Bundler - $ gem install jekyll bundler
2. NodeJS - use the installer, Homebrew, etc.
3. pnpm - Fast, disk space efficient package manager for Node

Visual Studio Code Extensions (optional)

If you use Visual Studio Code as your editor its highly recommended to includes these extensions to your mix:

• Rome
• Jekyll Snippets
• Liquid

Install & Local Development

Quick Start

NOTE: If you'd rather use npm or yarn – just replace the pnpm command and all should work.

To get started quickly, you'll need to follow the steps below:

1. Clone this repo

   git clone https://github.com/flight-deck/Flightdeck.git newFlightdeckProject

2. Navigate to newFlightdeckProject

   cd newFlightdeckProject
   pnpm install

3. Start the server

   pnpm start

4. Happy hacking!

Usage

Start Development

This will give you file watching, browser synchronization, auto-rebuild (hot reloading), CSS injection etc.

pnpm run start

Production Build

This will set the JEKYLL_ENV to production and use the production config file(s) set in flightdeck.manifest.js to override default setting. You can easily deploy your site build with the command.

pnpm run build

Want more?

To display all available commands just run:

pnpm run

There are several options for running the npm scripts that do specific tasks controlled by Gulp or help you clean things.

Lifecycle scripts:
  preinstall
    bundle install --path vendor/bundle
  start
    bundle exec gulp

Commands available via "pnpm run":
  build
    bundle exec gulp build --jekyllEnv='production'
  format
    rome format .
  format:fix
    rome format . --write
  lint
    rome check .
  lint:fix
    rome check . --apply
  lint:fix:suggested
    rome check . --apply-suggested
  clean
    ./.scrub.sh site
  purge
    ./.scrub.sh purge

• preinstall is triggered while executing pnpm or pnpm install – this will install all the Ruby Gems needed to setup Jekyll.
• pnpm start triggers the default task giving everything you need for local development – file watching, browser synchronization, css injection, auto rebuild of Jekyll liquid templates/data/config files, etc.
• pnpm build triggers the build process and passes the environment variable for Jekyll to produce a production ready site.
• pnpm clean scrubs all _site specific files (see .scrub.sh >> DEVFILES)
• pnpm purge scrubs all gems and node packages ( see .scrub.sh >> NODEFILES & RUBYFILES )
  • note: you will need to re-run pnpm install.

Configurations and Defaults

Remember this is just a Jekyll site using the Minima theme, so anything related to Jekyll or Liquid specific you'll need to reference the documentation for these projects:

• Jekyll
• Liquid
• Minima theme

Flightdeck Manifest

You can change the any of the configuration options in flightdeck.manifest.js which affects the gulpfile.js.