WordPress Local Development on OS X with Trellis and Bedrock

New and improved Wordpress!

Okay so a few things have changed since my April post. I figured I’d write an update on how to get started with Trellis and Bedrock. There has been a ton of commits since then.

Again, I’m assuming you’re on a Mac and have node, npm, bower and homebrew installed. If not start here. Things are a little different if you’re a Windows user.

1. Install Git, Ansible and Composer

brew install git ansible composer

2. Install VirtualBox

Install your VirtualBox software and follow the prompts.

3. Install Vagrant

Download and install the latest Vagrant.

4. Starting a Trellis Project, Installing Bedrock and Sage

By the time we’re done here, you should have a folder structure that looks like the following (taken from the Trellis Repo):

example.com/      # → Root folder for your project
├── trellis/      # → Your clone of Trellis
└── site/         # → A Bedrock-based WordPress site
    └── web/
        ├── app/  # → WordPress content directory (themes, plugins, etc.)
        └── wp/   # → WordPress core (don't touch!)
  1. Creat a Sites directory if you haven’t already and cd ~/Sites
  2. First, create a new project directory and cd to that directory: mkdir example.com && cd example.com
  3. Clone Trellis and remove the gitfiles: git clone --depth=1 git@github.com:roots/trellis.git && rm -rf trellis/.git
  4. Clone Bedrock and remove gitfiles: git clone --depth=1 git@github.com:roots/bedrock.git site && rm -rf site/.git
  5. Install the Ansible Galaxy roles: cd trellis && ansible-galaxy install -r requirements.yml
  6. Install Sage in your themes directory, and install npm dependencies: cd ../site/web/app/themes composer create-project roots/sage example-theme dev-master && cd example-theme && npm install

Now, we head back up the tree to Trellis. Here’s the current folder structure there. We need to configure the WordPress sites in group_vars/development/wordpress_sites.yml and in group_vars/development/vault.yml

example.com/
├── trellis/ # → Your clone of Trellis
    └── deploy-hooks 
    └── group_vars
    └── hosts
    └── lib/trellis
    └── roles
└──...

Here’s an example configuration for group_vars/development/wordpress_sites.yml

wordpress_sites:
  example.com:
    site_hosts:
      - canonical: example.dev
        redirects:
          - www.example.dev # optional redirect
    local_path: ../site # path targeting local Bedrock site directory (relative to Ansible root)
    admin_email: admin@example.dev
    multisite:
      enabled: false 
    ssl:
      enabled: false
      provider: self-signed
    cache:
      enabled: false

Here’s an example configuration for group_vars/development/vault.yml

# Generate a secure root password
vault_mysql_root_password: B3LkKUpcZVx4bpLXKXpiez%R

# Variables to accompany `group_vars/development/wordpress_sites.yml`
# Note: the site name (`example.com`) must match up with the site name in the above file.
vault_wordpress_sites:
  example.com:
    admin_password: admin
    env:
      db_password: example_dbpassword

5. Let’s Take a Break

Now that the configuration is done, we can begin the real magic. From the trellis directory, we run: vagrant up. Vagrant will ask for your password, and upon pressing enter it will provision a server and get you all setup. It should take about 10–15 minutes to install. So take a breather if you can.

Luckily Trellis has some pretty verbose error messages and make sure to double check your group_vars if you have any issues. When the dust settles, head to example.dev and you should see this:

screen-shot-2016-10-09-at-2-21-12-pm

Now that we got local development out of the way we can move onto your production setup. It’s all about dev/prod parity nowadays and honestly, it rocks.

Next: Remote Server Setup

Like what you see?

Join my newsletter for web stuff, design, and everything in-between. Delivered right into your inbox. You can unsubscribe anytime.

Leave a Reply

Your email address will not be published. Required fields are marked *