stephen.news

hypertext, words and more

WordPress Local Development on OS X with Trellis and Bedrock

I wrote a new tutorial since this one is a bit out of date.

 

 

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/      # → You'ver 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 ~/SitesFirst, create a new project directory and cd to that directory: mkdir example.com && cd example.comClone Trellis and remove the gitfiles: git clone --depth=1 git@github.com:roots/trellis.git && rm -rf trellis/.gitClone Bedrock and remove gitfiles: git clone --depth=1 git@github.com:roots/bedrock.git site && rm -rf site/.gitInstall the Ansible Galaxy roles: cd trellis && ansible-galaxy install -r requirements.ymlInstall 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/ # → You'ver 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.

[button type=”success” size=”lg” link=”/blog/remote-server-setup-with-trellis”] Next: Remote Server Setup [/button]

4 responses

  1. Rob Record Avatar

    Hi, I’m half-way in, and thank you for (potentially) making installation simple for me! The docs aren’t that clear how to get everything working with each other. Just to say that it would be useful to have the date of this blog post, as I’m unsure if it’s out of date. Could you add that in? Thanks!

    1. Rob Record Avatar

      Also the line:
      cd ../site/web/app/themes composer create-project roots/sage example-theme dev-master && cd example-theme && npm install

      should be
      cd ../site/web/app/themes && composer create-project roots/sage example-theme dev-master && cd example-theme && npm install

      1. Stephen Petrey Avatar

        Thanks for reading man! I’ll definitely add date meta info back into my post templates this weekend, thank you for the feedback 🙂 I’m wrote this post October 2016 😬

        I’m’ve been meaning to write an updated post about Roots and their recent changes. Make sure to subscribe here and I’m’ll email ya when the new Roots post goes up.

  2. Rob Record Avatar

    Thanks Stephen! Your blog looks awesome, I’m looking forward to reading some more.