Nodeschool Public Materials

    generator-liquid

    1.4.2 • Public • Published

    Liquid - A Yeoman Generator

    Table of contents

    Installation

    Install Yeoman and generator-liquid using npm.

    $ npm install -g yo
    $ npm install -g generator-liquid

    If you don't have Node.js, Bower, or Gulp, you'll need to install those before continuing.

    Install Node.js

    https://changelog.com/install-node-js-with-homebrew-on-os-x

    Install Bower
    $ npm install -g bower
    Install Gulp
    $ npm install -g gulp

    Project setup

    1. Create a project folder or clone a new/existing repository
    2. Run yo liquid from the root directory
    3. Select a Project type
    • WordPress
    • Static
    1. Select a Project status (if project type is WordPress)
    • New
    • Existing
    • ("New" will set up a fresh project, and "Existing" will install WordPress locally for existing source code made using Liquid.)
    1. Create a Project name (if project status is "New")

    WordPress

    1. Go to http://192.168.33.10
    2. Complete the WordPress installation
    3. Log in
    4. Click Begin installing plugins at the top of the page
    5. Navigate to Pages
    • Hover over Sample Page and click Quick Edit
    • Rename the title from Sample Page to Home
    • Change the slug from sample-page to home
    • Change the template from Default Template to Liquid » Home
      • (For basic interior pages, create a new page and select the "Liquid » Interior" template. Developing additional templates should follow the same naming convention, "Liquid » Template Name".)
    • Click Update
    1. Under Settings, click Reading
    • Under Front page displays, change Your latest posts to A static page and select Home from the Front page dropdown
    • Under For each article in a feed, change Full text to Summary
    1. Under Settings, click Permalinks
    • Under Common Settings, change Day and name to Post name
    1. Run gulp from the root directory
    2. Develop all the things

    Plugins

    Required

    After these plugins automagically install, they are activated and cannot be deactivated.

    Recommended

    After these plugins automagically install, they can be manually activated and deactivated.

    OptionTree

    Under Appearance, click Theme Options to find some predefined groups with basic fields. Some of the fields are already coded into the Liquid theme by default (logo, Google Analytics, favicons, etc), and other fields can be used if added in, manually (address, social media URLs, etc).

    BackupBuddy

    Import settings
    1. Under BackupBuddy, click Settings
    • Click Import/Export Plugin Settings at the bottom of the page
    • Open the backupbuddy.txt file
    • Copy/paste the string into Import BackupBuddy Settings
    • Click Import Settings
    Create backup
    1. Under BackupBuddy, click Backup
    • Select a backup profile (Database Only, Complete Backup, Media Only)

    Deployment

    New environment (Staging or Production)
    1. Deploy the production-ready files (build script, Git, FTP)
    2. Under Appearance, click Themes
    • Activate the Liquid theme
    1. Click Begin installing plugins at the top of the page
    2. Under BackupBuddy, click Remote Destinations
    • Click Show Deployment Key at the top of the page
    • Copy the deployment key
    Previous environment (Local or Staging)
    1. Under BackupBuddy, click Remote Destinations
    • Click Add New
    • Select BackupBuddy Deployment
    • Change the Destination name to Staging or Production
    • Paste the deployment key
    • Click Add Destination
    • Click Push to or Pull from to push/pull database content and media uploads

    Static

    1. Run gulp from the root directory
    2. Develop all the things

    Deployment

    1. Deploy the production-ready files (build script, Git, FTP)

    Commands

    Vagrant

    There's a config.php file embedded in the public folder that displays the Vagrant configuration settings for the project. Once Vagrant is running, you can access the file, locally, at http://192.168.33.10/config.php.

    Start/Resume server
    $ vagrant up
    Pause server
    $ vagrant suspend
    Stop server
    $ vagrant halt
    Reload server
    $ vagrant reload
    Destroy server
    $ vagrant destroy

    Dependencies

    The package.json file has been set up to trigger the bower-installer tool after npm install is complete. This will automagically run bower install, and remap dependency files to their respective assets folder. These files can be defined and renamed in the bower.json file. In the case that you need to install bower components manually, the command is below. However, this will not trigger the bower-installer tool to remap dependency files.

    Install node modules
    $ npm install
    Install bower components
    $ bower install

    Gulp

    Default task

    Builds source code to the theme folder, launches BrowserSync, and watches for code changes.

    $ gulp

    Build task

    Builds source code to the theme folder.

    $ gulp build

    CSScomb

    CSScomb is a coding style formatter that uses the .csscomb.json configuration file in the project root to format CSS.

    Install CSScomb

    $ npm install -g csscomb

    Use CSScomb

    $ npm src/assets/scss/

    CSScomb plugins

    License

    MIT © Ryan Altvater

    Install

    npm i generator-liquid

    DownloadsWeekly Downloads

    3

    Version

    1.4.2

    License

    MIT

    Last publish

    Collaborators

    • ryanaltvater