Giter Club home page Giter Club logo

roots-example-project.com's Introduction

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 http://roots-example-project.com/.

Requirements

Make sure all dependencies have been installed before moving on:

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 [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
  1. Install external Ansible roles/packages
# @ roots-example-project.com/trellis
$ ansible-galaxy install -r requirements.yml
  1. Install theme components
# @ roots-example-project.com/site/web/app/themes/sage
$ npm install
$ bower install
$ gulp
  1. 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

  1. 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

roots-example-project.com's People

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.