Archive for December, 2013


I love LESS! However having to run lessc every time I edit my less file is LAME! Adding File watchers in PHPStorm means that when you save your file, it will automatically compile your CSS! We are also going to add Javascript and CSS minification, which helps increase page load speeds and also make it harder for nosey people to examine your javascript! Lets go!

First up, lets install node.js by visiting http://nodejs.org/
Next, we install less and yuicompressor:

npm install -g less
 npm install -g yuicompressor

Also on Windows, everything cracks up unless you add a PATH environment variable for the modules. In Control Panel in System, click Advanced System Settings, click Environment Variables and add the node modules folder to the PATH variable, or add it if its not there:

C:\Users\your.username\AppData\Roaming\npm

Go to File > Settings, and under the project settings look for File Watchers. Click the green + to add a watcher. Select LESS.

All that is required is that you put the correct path into the program field. This may be slightly different depending on your setup. For windows users, the modules can usually be found in :

C:\Users\your.username\AppData\Roaming\npm\lessc.cmd
 C:\Users\your.username\AppData\Roaming\npm\yuicompressor.cmd

And on linux machines, you can find it elsewhere. I cant remember offhand, but just take note of the output while you are installing it and you wont go far wrong.

Now you can edit the head section of your website, replacing style.css with style.min.css, and the same also for your javascript! Awesome 🙂

If you’re STILL using some sort of FTP to deploy your website, you are falling behind! FTP sucks for a variety of reasons. My Favourite FTP client? I dobn’t have one! Dreamweavers file manager/ftp client was quite good, but thats the only thing I used dreamweaver for, the Sync site button. And even that left horrible _notes folders lying around everywhere. The one thing I liked was the cloak file ability, so only certain files/folders were uploaded. But Dreamweaver is sh*t. And will forget what it had previously done. So using Filezilla and manually uploading the things you wanted was your only option. And the setting ftp rules thing was more hassle than its worth. So it’s time to move on.

If your project isn’t big enough to be requiring Continuous Integration software from the likes of Jenkins, then a Git ‘push to deploy’ setup might be exactly what you are looking for. Make changes, commit, and push, which sets off the deployment process using a git hook, which is nothing more fancy than a bash script. So lets get started! I assume you have a live server with SSH access, and a development server which you will be working on.

SSH into your live server as root (or sudo su once logged in). We will be creating a user group for every user that will be pushing should be added to, and creating a folder for keeping your repositories in.

groupadd geeks
usermod -a -G geeks myusername
usermod -a -G geeks otherusernameetc
mkdir /var/git
chmod 775 /var/git
chgrp geeks /var/git

Now exit from being root and be logged in as whatever your normal ssh username is. We will be initialising a Git repository in the sites document root.

cd /home/myusername/www
git init
git add .
git commit -a

Now we will create a bare repository which will be the origin. This is what our dev copies will push to, which will set off a hook deploying to the web doc root. Once we create it, we’ll push whatever is in the sites doc folder already to it.

cd /var/git
mkdir yourprojectname.git
cd yourprojectname.git
git init --bare
cd /home/myusername/www/
git push /var/git/yourproject.git master

Now we add the live’s ‘origin’ repository as a remote for the live. Edit /home/myusername/www/.git/config, add add the following:

[remote "origin"]
    url = /var/git/yourprojectname.git 
    fetch = +refs/heads/*:refs/remotes/origin/*

Great. Now all that’s required is to set up what we call a ‘Git Hook’, a bash script which will trigger when we push to the master repository.
Edit /var/git/myproject.git/hooks/post-update :

echo
echo "*********************************"
echo "*** Deploying Website LIVE ***"
echo "*********************************"
echo
cd /home/myusername/www || exit
unset GIT_DIR
git pull origin master
git submodule init
git submodule update
exec git update-server-info

Save the file, and edit its permissions to make it an executable:

chmod +x /var/git/yourprojectname.git/hooks/post-update

You’re all set! The last stage is to clone your repository to your testing server, so, on your testing server:

cd ~/Sites
git clone myusername@myliveserverIP:/var/git/yourprojectname.git yourprojectname

And Bob is indeed your uncle! Test it out! If you have an index page (be it PHP or HTML, whatever) :

nano index.php
    <h1>My Groovy new Website</h1>
git add .
git commit -a
git push origin master

Now go check your live site! You should see your changes reflected on your production server 🙂 Have fun people!