Automating New Sites with VVV, VV, Blueprints, and Bash

Who wants to start building new sites quicker? Whether for yourself, for friends, or for clients, you have probably set up more than a few WordPress sites by now. There are probably quite a few things that you do on a regular basis for those sites, right? Here’s a few things that I do:

  • Pull and verify WP Core
  • Pull Latest version of Akismet, Jetpack and Duplicator from repo and activate
  • Pull latest version of BackupBuddy, Security and Sync from iThemes, Gravity Forms and Advanced Custom Fields Pro and ACF Repeater Field (I don’t know how many of these things can be done since they are premium) and activate
  • Do setup of Sync/Security/BackupBuddy as necessary
  • Pull latest version of Genesis & latest of genesis-project-base (I’ll put that on BitBucket soon)
  • Remove sample page, post and comment
  • Set ACF Pro and Gravity Forms Licenses
  • Set Gravity Forms to output HTML5 (default is off, I want it on)
  • Extended CPTS and Extended Taxonomies
  • Create admin account (OBM) with random password, emailing to support@orangeblossommedia.com
  • Set Site Title based on project Title
  • Set time zone to “New York”, since that’s the case for most builds I do
  • Set permalink structure to /%postname%/
  • Create private BitBucket git repo for site
  • Add user/pass to LastPass
  • Create Trello board for site
  • Create Sublime Text Project
  • Open Browser to site
  • Open Sublime Text
  • IFTTT?

I do those steps for almost every site that I make. Doing so by hand would take an hour of clicking around from screen to screen, waiting for pages to load, modifying settings, and refreshing pages.

Each of these steps have something in common: since they are done via a computer, they can be defined in terms that a computer can understand. This is where we can begin to automate our process.

Vagrant is a container solution, similar to Docker, which allows you to create containerized sites. VVV is a Vagrant box, which is basically a set of instructions on how to build a server. I’m going to update my post on setting these up, as there are some useful changes coming to version 2 of VVV, but for now I’ll refer you to this post from last year on setup.

The other thing that we’re going to use is WP-CLI, and we’re going to pair it with VASSH, a tool to make it easy to SSH into a VVV box. All this means is that we’re going to use some command line tools made to do things with WordPress, like add new themes and plugins, and change the posts.

Start with the slide deck below on why you may want to give this a try, then move on to the next post which gives some notes on the specific bash script written to do the automation, as well as some of the drawbacks of it as a solution. This post will be updated with version 2 of VVV.

[slideshare id=71347032&doc=settingupnewdevelopmentsitesinaflash-170124205523]

Installing Vagrant, Virtual Box, VVV, & VV On Mac

I’ve been using Vagrant with VirtualBox for local development for over a year now, after introduction to the tools on top of Varying Vagrant Vagrants at a WordCamp. It’s become my default standard for starting new WordPress sites, and it’s more highly accessible than I realized at the time that I first tried it, though it can also be a bit of a black box from the outside.

Throughout the post I’m going to cover a quick install guide (though by no means exhaustive), and borrow heavily from a guide that I put together and am keeping updated on my Github page. I also discussed this at a developer meetup for WordPress Orlando last month, which you can check out if you want to give ServerPress or MAMP a try too.

Note, I’m coming at this from a Mac, which used to drive me bananas in guides, so apologies if you’re on Windows.

Installing Virtual Box, Vagrant, VVV, and VV

First, let’s talk about what we’re setting up here. The outcome of this post should give you a local development environment for WordPress sites that you can start and expand upon rapidly, making it easier to build new sites for yourself or your clients. We’re going to start by downloading and installing VirtualBox, which is by far the largest part of this project. I use Virtual Box because it is free and accessible for a wide variety of platforms, but VVV supports Parallels, Hyper-V, VMWare Fusion, and VMWare Workstation as well.

After you’ve downloaded and installed VirtualBox, you’ll want to ensure that you have Vagrant installed. This can be installed a wide variety of ways, but the most straightforward is going to the official download page and installing the version that matches your computer. After Vagrant is installed you should be able to open Terminal and type the command vagrant and see a list of flags that you can use.

You’ll also need Git for some of this, so if you don’t have it, download here and install it.

Vagrant installed on Terminal

Next, you’re going to install vagrant-hostupdater with the command vagrant plugin install vagrant-hostsupdater, then install vagrant-triggers by typing vagrant plugin install vagrant-triggers into Terminal too. These tools will allow Vagrant to automatically set hosts for you, which are a pain in the butt on your own, and allow triggers to run, which lets other programs (say VV?) attach their own events to Vagrant.

Up next, install Varying Vagrant Vagrants, which is thankfully shortened to VVV. You can do this in Terminal too, using the command git clone git://github.com/Varying-Vagrant-Vagrants/VVV.git vagrant-local. You’re going to move into that directory by typing cd vagrant-local, since vagrant-local is the name of the folder that you made and put it into when you cloned it to your computer.

The next portion of this is really long. Like, don’t do this at a coffeeshop or via a mobile data plan long. Probably should give fair warning that setting up VVV is a long process on slow internet. Let’s assume that you are on fast internet or have plenty of time to kill. Thankfully you can run this in the background and go along your day, provided heavy YouTube viewing is not part of your downtime. Run the command vagrant up, which is a command that you’ll be getting used to over time. The first time that you run the command it will have to download a whole box for Virtual Box, basically meaning you’re downloading and installing a new operating system that will run alongside your existing one.

When VVV is installed, you should be able to visit vvv.dev in your browser and see it in all of it’s glory!

Default VVV page
In the next post, we’ll make this page show useful information and look pretty.

Look, at this point you probably need a coffee or something. Relax, you’re doing great, and treat yourself to that caffeinated goodness.

Site Creation with VV

To make site creation even easier, we’re going to use Brad Parbs‘ cool tool Variable VVV, or VV for short. There are a few methods to install this, and while I use HomeBrew which makes it rather easy, in the event that you don’t, check out his install instructions here: https://github.com/bradp/vv/#installation.

With VV installed you can use the command vv --create to install new WordPress sites to a single VVV install with ease. I’m going to save the discussion on how to do that for the next post, since it can cover quite a bit.

Next Time on the Show!

I’m going to go through some enhancements in my next post on this topic, like using a custom VVV dashboard, how to get value out of VV, how I make VVV a bit easier to use, and some of the testing that I’ve done around squeezing performance out of VVV and making it load faster.

I hope that if you’ve stuck around for the journey you were able to successfully get going, or at least will give it a shot. If you’re having any trouble, please leave a comment and I’ll try to help you out here so others can troubleshoot too.

Comments on Live Site Being Sent to Staging Site

If y’all weren’t aware, I’m a big fan of my site host, WP Engine. One of the coolest features that their service has (in addition to built in security, caching, CDN and backups), is the ability to make a staging version of your site with a single click, and copy the staging version to your live site just as easy.

This is where an issue has arisen however. Yesterday morning before my last post, I made a snapshot of my site for staging, so that I could make a few tweaks and test some code. When someone tried to comment on the post, and when I tried to respond, they were redirected to the staging site.

Thanks to the help of a quick WP Engine employee, it was determined that Jetpack (which was managing my comments) was authorized on the staging site when I made my snapshot, and for whatever reason that was chosen to be the default. Simply de-authorizing it on the staging site fixed the issue.

Even though that was an annoying hiccup that I didn’t catch myself, my host quickly did and rectified it. Hopefully I can save a few people out there some time with this 🙂

What is the Difference Between PHP, HTML and CSS Anyway?

While the following post is geared more toward beginners, and not the standard fare for this blog, I’m working up a more basic talk for non-developers to give a jumping off point for what we actually do to someone that wants to make sense of a basic WordPress site theme. There is no way that this could be all-encompassing, but it should be enough to help someone get into trouble while looking at a website’s code.

Even advanced web developers will run across acronyms and terminology that baffle them on a regular basis, as well as programming languages that they’ve never even seen before, let alone mastered. It wasn’t so long ago that any developer out there couldn’t differentiate between the types of code that went in to running their sites and with new changes being made constantly, no one will ever know them all.

I’m going to briefly discuss what the differences are between PHP, HTML and CSS, which are the most common types of code that are used to make WordPress websites. I’ll also touch a bit on Javascript, as most websites are running several scripts minimum to help with tasks for each page.

Continue reading “What is the Difference Between PHP, HTML and CSS Anyway?”

How to Build a Responsive Portfolio Site – Part 2

In my last tutorial post, I described the reasoning for switching to a responsive theme for my website, as well as the logic that went into some changes that I made in layout. Going through the thought process, I’m now going to describe in a bit of detail how I created the responsive portions of the theme. Continue reading “How to Build a Responsive Portfolio Site – Part 2”