drawcard/wordpress-deployment.md

## wordpress-deployment.md

      
    Raw
  

              wordpress-deployment.md
            
          
    Setup:

Local server: VM machine runnning Ubuntu
Staging server: Remote server
Production server: Another remote server

Initial Setup

# Clone Wordpress
git clone https://github.com/WordPress/WordPress project-name
cd project-name

# Switch to the lastest stable branch
git branch -r # Then look for the latest version number
git checkout X.X-branch # Substitute X.X with the latest version number

# Add the init.sh project, to set up Roots theme + Deploy scripts
git remote add init https://github.com/drawcard/init.sh
git fetch init && git fetch init --tags

# Create a branch to work in
git checkout -b init
git merge init/master

# Run wp-init.sh
cd initsh
bash wp-init.sh

# Delete the initsh folder
cd ..
rm -rf initsh/
DB Config


Set up databases and configure in wp-config.php
Give a unique table prefix as well for security reasons
Run through the WP installer in a browser

Roots.io Theme + Grunt + Bower Setup


Assuming you have Ruby (+ gems for sass & compass), Node.js, NPM, Git installed.

# Optional: create a bash alias to magically jump to your theme folder:
alias theme="cd /var/www/clients/project-name/wp-content/themes/build" >> ~/.bashrc
# now type "theme" to go to that folder quickly

theme

# Initialise grunt in the theme folder
sudo npm install 
# Or run two commands seperately: sudo npm install grunt && sudo npm install bower

# Initialise Bower
bower update

# Run Grunt for first time css generation
grunt build
More info on commands for Roots + Grunt: http://roots.io/using-grunt-for-wordpress-theme-development/
You might like to add other useful Grunt tasks to the project:
http://stackoverflow.com/a/25235587
Roots + LiveReload + Dev build setup

Begin by reading the instructions to set up the theme at: https://github.com/roots/roots-sass
But here's a blow by blow description of the setup:
In wp-config.php, add the following:
/* https://github.com/roots/roots-sass */
define('WP_ENV', 'development');
This will tell Roots that WP is in 'development' mode and will enable a custom dev setup. Comment out this line when going to production.
No need to edit anything in Gruntfile.js as 'development' mode will take care of everything. The site should be compiling SASS to assets/css/main.css.
Go to the theme folder and begin a grunt watch task to monitor the folder while editing code:
grunt watch
When getting ready for production, compile a minified version of the scripts:
grunt build
And then comment out the WP_ENV item in wp-config.php
LiveReload

In order for LiveReload to work, you need to change a setting in Gruntfile.js:
options: {
          livereload: true // Originally set to "False"
        },
you need to install a plugin for your browser. This one works:
Chrome: https://chrome.google.com/webstore/detail/remotelivereload/jlppknnillhjgiengoigajegdpieppei/reviews
Firefox: https://addons.mozilla.org/en-US/firefox/addon/remotelivereload/
Github project: https://github.com/bigwave/livereload-extensions
This is another one but may only work on local files.
Chrome: https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei
Other useful setup info:
mockko/livereload#45
To use LiveReload, run grunt watch and then click the LiveReload plugin button to connect to the server.