Jekyll Themes & Templates Logo Jekyll Themes & Templates
Flightdeck For Jekyll screenshot

Flightdeck For Jekyll

Author Avatar Theme by Edheltzel
Updated: 20 Jun 2024
9 Stars

An opinionated starter project for Eleventy using Gulp as an asset pipeline

Github

Categories

Scss

Overview:

The Flightdeck theme is a comprehensive development environment for creating Jekyll websites. It includes tools like Gulp, Sass, PostCSS, Autoprefixer, CSSNano, Imagemin, and Browsersync. The theme also integrates with Cloudcannon, a simple CMS for client editing. The installation process requires Jekyll & Bundler, NodeJS, Yarn, pnpm, and rsync. It is recommended to use Visual Studio Code with the Jekyll Snippets Extension for an optimized development experience.

Features:

  • Jekyll: A static site generator for creating websites.
  • Gulp: A task runner for automating repetitive tasks in the development workflow.
  • Sass: A CSS preprocessor that adds features like variables, nesting, and mixins to enhance CSS development.
  • PostCSS: A CSS post-processor that allows for transformations and optimizations of CSS.
  • Autoprefixer: A PostCSS plugin that automatically adds vendor prefixes to CSS properties.
  • CSSNano: A PostCSS plugin that minifies CSS files for optimized performance.
  • Imagemin: A tool for optimizing images to reduce file size without sacrificing quality.
  • Browsersync: A tool for live browser reloading and synchronization during development.
  • Cloudcannon: A simple CMS that provides a user-friendly interface for clients to edit their website.

Installation:

To install the Flightdeck theme, ensure that you have the following prerequisites installed on your machine:

  • Jekyll & Bundler: Run $ gem install jekyll bundler to install these dependencies.
  • NodeJS: Install NodeJS using the installer or a package manager like Homebrew.
  • Yarn: Install Yarn, a package manager for Node, if you prefer using it over the default pnpm package manager.
  • pnpm: Install pnpm, a fast and disk space-efficient package manager for Node.
  • rsync: Have a basic understanding of rsync if you choose to deploy your website to a remote server.

For an optimized development experience, it is recommended to use Visual Studio Code as your editor. Install the Jekyll Snippets Extension for IntelliSense, which provides useful snippets and syntax highlighting for Jekyll liquid templates.

To install and set up the Flightdeck theme for local development, follow these steps:

  1. Clone the Flightdeck repo.
  2. Navigate to the newFlightdeckProject directory.
  3. Start the server.
  4. Start developing!

Summary:

The Flightdeck theme is a powerful development environment for creating Jekyll websites. With its integration of tools like Gulp, Sass, PostCSS, Autoprefixer, CSSNano, Imagemin, and Browsersync, it provides a robust foundation for efficient and optimized web development. The theme also includes Cloudcannon for easy client editing and support for deployment to remote servers using rsync. By following the installation guide and utilizing the recommended editor settings, developers can quickly set up and start developing their Jekyll websites with ease.