generator-liquid

A Yeoman generator for building WordPress and static projects with the following: Scotch Box (Vagrant), Gulp, SCSS, BrowserSync

Usage no npm install needed!

<script type="module">
  import generatorLiquid from 'https://cdn.skypack.dev/generator-liquid';
</script>

README

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
  • (Use http://localhost:3000, or BrowserSync, to work on the front-end, and use http://192.168.33.10 to access WordPress directly and bypass BrowserSync's "auto-refresh" feature.)

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