Roots Example Project
This repository is an example of how to integrate and use the following projects together:
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.0.2
- Virtualbox >= 4.3.10
- Vagrant >= 1.5.4
- vagrant-bindfs >= 0.3.1 (Windows users may skip this)
- vagrant-hostmanager
- Node.js >= 0.12.x
- Gulp >= 3.8.10
- Bower >= 1.3.12
Instructions
Here's how this example project was created:
- Create a new project directory:
$ mkdir example.com && cd example.com
- Clone Trellis:
$ git clone --depth=1 git@github.com:roots/trellis.git && rm -rf trellis/.git
- Clone Bedrock:
$ git clone --depth=1 git@github.com:roots/bedrock.git site && rm -rf site/.git
- Clone Sage:
$ git clone --depth=1 git@github.com: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
- Clone this repository into a working directory (e.g.,
~/Sites
)
$ git clone git@github.com:roots/roots-example-project.com.git
- Install external Ansible roles/packages
# @ roots-example-project.com/trellis
$ ansible-galaxy install -r requirements.yml
- Install theme components
# @ roots-example-project.com/site/web/app/themes/sage
$ npm install
$ bower install
$ gulp
- 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
- 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