Roots Example Project

This repository is an example of how to integrate and use the following projects together:

• Bedrock
• Trellis
• Sage (with Soil)

For more background, see this blog post.

This project is a complete working example that's deployed on a Digital Ocean 512MB droplet.

You can view it at https://roots-example-project.com/.

Requirements

Make sure you have installed all of the dependencies for Trellis, Bedrock and Sage before moving on.

At a minimum you need to have:

• Ansible == 2.0.2.0
• Virtualbox >= 4.3.10
• Vagrant >= 1.8.5
• vagrant-bindfs >= 0.3.1 (Windows users may skip this)
• vagrant-hostmanager
• Node.js >= 4.5.0
• Gulp >= 3.8.10
• Bower >= 1.3.12

Instructions

Here's how this example project was created:

1. Create a new project directory: $ mkdir example.com && cd example.com
2. Clone Trellis: $ git clone --depth=1 [email protected]:roots/trellis.git && rm -rf trellis/.git
3. Clone Bedrock: $ git clone --depth=1 [email protected]:roots/bedrock.git site && rm -rf site/.git
4. Clone Sage: $ git clone --depth=1 --branch sage-8 [email protected]:roots/sage.git site/web/app/themes/sage && rm -rf site/web/app/themes/sage/.git

example.com/      # → Root folder for the project
├── trellis/      # → System management & deployment
└── site/         # → A Bedrock-based WordPress site
    └── web/
        ├── app/  # → WordPress content directory (themes, plugins, etc.)
        └── wp/   # → WordPress core (don't touch!)

Local development setup

1. Clone this repository into a working directory (e.g., ~/Sites)

$ git clone [email protected]:roots/roots-example-project.com.git

2. Install external Ansible roles/packages

# @ roots-example-project.com/trellis
$ ansible-galaxy install -r requirements.yml

3. Install theme components

# @ roots-example-project.com/site/web/app/themes/sage
$ npm install
$ bower install
$ gulp

4. Fire up the server (be patient, but watch the console––it may prompt for your system password)

# @ roots-example-project.com/trellis
$ vagrant up

Note: to shut down the server: vagrant halt

5. Test the install at roots-example-project.dev

Remote server setup (staging/production)

Provision server:

# @ roots-example-project.com/trellis
$ ansible-playbook server.yml -e env=<environment>

Deploy:

# @ roots-example-project.com/trellis
./deploy.sh <environment> roots-example-project.com

# OR
ansible-playbook deploy.yml -e "site=roots-example-project.com env=<environment>"

To rollback a deploy:

ansible-playbook rollback.yml -e "site=roots-example-project.com env=<environment>"

Theme development

In development, run gulp in watch mode for live updates at localhost:3000. Important: always use the roots-example-project.dev URL to access the WordPress admin.

# @ roots-example-project.com/site/web/app/themes/sage
$ gulp watch

Production assets (minified CSS, JavaScript, images, fonts, etc.) need to be compiled. Run gulp with the --production flag. The resulting files will be saved in themes/sage/dist/. Never edit files in the dist directory.

# @ roots-example-project.com/site/web/app/themes/sage
$ gulp --production

Contributing

Contributions are welcome from everyone. We have contributing guidelines to help you get started.

Community

Keep track of development and community news.

• Participate on the Roots Discourse
• Follow @rootswp on Twitter
• Read and subscribe to the Roots Blog
• Subscribe to the Roots Newsletter
• Listen to the Roots Radio podcast