The Ultimate Ubuntu WordPress Development Machine

This post will go over creating a WordPress development machine. I am hoping that someone who is just learning can get their feet wet in such a way that will be easy to follow along. That being said, my other goal is to have a setup that even the most advanced WordPress developer would be proud to use.

Please don’t be scared off by how long this post is! I’ve made over 70 screen shots which takes up a bunch of room. Honestly the whole procedure (minus install and updates) really doesn’t take much time to do at all! I have made a PDF version of this document. If you are wanting it please leave a comment on this blog with your email letting me know you want a copy. Your email is never posted and I will email you a copy of the PDF in all it’s glory. It looks amazing on the iPad

One question you might have before we start is why do I need a machine specific to developing for Web development? I find it’s beneficial because:

• I have a fully functional machine with everything I need on it
• Doesn’t have all the distractions that normal machine would have.
• Help streamlines the development especially like WordPress MultiSite
• Having things setup properly like backup, config tools and shortcuts right from the beginning really does help!

Here’s a very simplified high level list of things I’ll cover:

• What You will need
• My setup
• Brief How To Install Ubuntu
• Install LAMP Stack with config Tools
• Create Links for all the main web tools
• Setup Apache (Permissions,Folders and security)
• Download & Install WordPress
• Configure MultiSites in WordPress. We do this so that you can host multiple WordPress websites locally.
• Setup Web Development programs
• Learn how to use almost every browser to test a website from one machine
• Setup Backup

What you will need for this “How To”

You will need several things for following along:

• Dedicated computer/virtual machine to install Linux on
• Ubuntu Linux install disk
• A Network Server/ USB Drive for backup

My Setup

To make sure that I didn’t miss any steps in this “How to” I redid my setup on both a HP Pavillion dv6700 and a Dell 9400. For the screenshots I am using Ubuntu running in a virtual machine. The virtual machine software I used is called Virtual Box. All testing was done using Ubuntu 10.10 32bit Desktop Edition. While I don’t think the steps will change much with newer versions. If it does I will reflect the changes/updates here as needed. I am using Ubuntu 10.10.

What you will need

• You will need a machine capable of running Linux or some sort of Virtual Machine software that can run Linux
• You need to get the Ubuntu Desktop version downloaded/burnt to CD on a separte machine.
• You can download the disk image from here:  http://www.ubuntu.com/desktop/get-ubuntu/download
• You will need to write down all usernames and passwords as we progress through the install. If you forget them you will have to figure out how to reset them by yourself.

Terms/Items you will need to know

• %user% will always mean the user you created for Ubuntu. The user you log in as. In my examples it is “jared”
• In this example my password is just “password” for every password entered. I recommend that you don’t do the same thing
• I will use terminal or command prompt for describing being at the terminal. The terminal can be opened by going to “applications-Terminal”. Terminal has a black computer monitor icon
• I don’t recommend that you use the defaults especially if this is a production machine.

Brief overview on how to install Ubuntu Linux.

I expect that you have Ubuntu on a DVD and that you are ready to proceed.

One thing I need to warn you is that Linux is always playing catch up in regards to hardware drivers. If you have the latest and greatest hardware you might not be able to find a driver that works with your rig. That being said, it’s nice to see that recently some companies are taking the initiative to develop drivers for Linux at the same time they release the driver for Windows. The Linux install process has come along way in the last 20 years. The hardest part about the Ubuntu install is going to be whether your machine will have hardware support.

You will need to make sure that computer can boot the machine from the Cd/DVD drive. Most machines from Dell, HP, ACER etc have notes during the boot screen to tell you what you need to press. If you aren’t sure do a search for your particular machine and  model # for the Boot Keys.

Here’s a visual walk through of a install (Follow left to right. Top to bottom):

  

   

 

 

Your install should be done!

It is time to start building this development machine. In order to do this we will need to get the webserver up and running. There are MANY ways of installing a webserver, MySQL and PHP but I will show you one of the ways I do it that has proven to be VERY reliable for me.
Make sure that everything is all up to date. Type:

sudo apt-get upgrade

sudo apt-get update

Apply any updates you are presented with. Open “Update Manager”. Install everything in the list.

       

I normally restart the machine at this point because there is normally a Linux kernel upgrade. Make sure to reboot now.

Install the LAMP stack

You’ve already got the “L” part of LAMP done. Now let’s install Apache, MySQL, and PHP (AMP). To do this we will open a command prompt and type:

sudo apt-get install tasksel

Hit “Y” for everything that comes up. Next type:

sudo tasksel

*NOTE*- I have heard some people get “tasksel: aptitude failed (100)” error. This means that there are updates waiting to be applied and you missed the last step. You should install those updates first. Type: sudo apt-get update to force your machine to check updates and then select “Install”.

Follow the instructions on the screen.

Now go check –http://localhost–. You should see that Apache is install correctly.

Install PhpMyAdmin

This program allows you to setup and work with both MySQL databases and users. To install it at the command line type:

sudo apt-get install phpmyadmin

NOTE – Hit “Y” and enter to install.

Follow the screen shots for the install info.

*Note* – In order to select an item you need to press the space bar. This will insert a “*” to the left of the item you were selecting. Enter moves you on to the next screen.

Now go check and log into:

• http://localhost/phpmyadmin

*NOTE* – If you get a 404 error on phpmyadmin then you made a mistake most likely things aren’t up to date. No worries. Run this if you are getting the 404 Error and follow the prompts: sudo dpkg-reconfigure -plow phpmyadmin

Install Webmin

While this isn’t completely needed I am sure you will use it eventually. It’s a very powerful application that can configure your Linux box. This tool is a must on headless boxes. Here’s how to install Webmin:

Download webmin from here: http://sourceforge.net/projects/webadmin/files/webmin/1.530/webmin_1.530_all.deb/download

You will want to download the .deb version and open it with “Ubuntu Software Center

Click install and and verify that it is installing through the “In Progress” section (left side).

You should create and check the links to the websites we just created in FireFox

• http://localhost
• https://localhost:10000   <– Webmin
• http://localhost/phpmyadmin

*NOTE* – The first time you log into Webmin there will be a security warning. The reason for this warning is that Webmin by default uses HTTPS. HTTPS needs a certificate. What this warning is basically saying is that you are using a private (FREE Cert) or that the Cert doesn’t match the url you typed into the machine. It’s no big deal. You wouldn’t want to use a private cert if you were planning on using this as a full time hosting machine.

     

Setup MySQL

• Log into PhpMyAdmin
• Click on Privilages
• Click on “add new User”
• Fill out info. NOTE – Do not use WordPress as a username if you plan on putting your machine on the internet or in a production environment!
• Click on “Go” at the bottom of the Webpage once you fill out the info
• You will see that the user has been created. Phpmyadmin will even show you the script it ran.

 

Configure Apache

This is going to be some of the hardest parts of the whole “How to” if you were trying to figure things out yourself. Trust me! This section is one of the main reason’s why I made this “how to” article.

• Create a www in Home directory. Apply “World Icon” to show it’s a folder used for web server.
• The globe icon I find helps you find the directory faster later.

      

Tell Apache to use this new folder as the default Web server. Go to:

• Webmin – https://localhost:10000
• Login
• Servers
• Apache Webserver
• Existing virtual Hosts tab
• Virtual Server
• Click Document Options Icon
• Document root will be ” /home/%user%/www”
• click “save”

Scroll all the way to the bottom

We need to save these setting and then restart Apache

In Webmin click:

• Apply changes (top right)
• Stop Apache
• Start Apache

We will now tell Apache to run as your account. This will give Apache the ability to save and edit files to the new “www” folder that is located in your home directory. To configure this go to:

• Webmin
• Servers
• Apache Webserver
• Global Configuration tab
• Users and Groups”
• Run as unix user- ” %username%
• Run as Unix Group- admin

Because WordPress uses index.php to start the install we need to allow index.php to automatically load when you visit the root of a folder. To allow Apache to do this we must make one configuration change. You must:

• Open a Terminal
• sudo gedit /etc/apache2/conf.d/php.conf
• enter “DirectoryIndex index.html index.htm index.php index.php3”
• Save the php.conf file

Configure “Pretty Links”

At this point you might be wanting to start in on the WordPress install. Don’t! We need to enable an apache module that will allow apache to do some real magic when it comes to creating dynamic URLS! While WordPress by itself doesn’t need to have “pretty links” enabled, it will if you plan on using the enabling “MultiSite” for WordPress. “Pretty Links” module’s real name is called “rewrite_mod”. Let’s enable it and set things up so that WordPress can take advantage of it’s magic.

• Open command line
• sudo a2enmod rewrite
• sudo gedit /etc/apache2/sites-available/default– This should open up a file in a text editor
• In default there should be 2 separate sections that look almost the same. In my example it was the second section that we need to change: “Directory /home/%user%/www/>”. Change None to All
• Restart apache by running this command: “sudo /etc/init.d/apache2 restart“

You should see this

Download WordPress

• http://wordpress.org/download/

Install WordPress

Wow. We’re finally at the part where we can start installing WordPress. To do this you will need to:

• Copy Files from the WordPress download into the “www” folder we created a few steps ago
• Run WordPress install by going to: http://localhost/

View the screenshots on how to install WordPress

 

Log in with your new credentials

Configure MultiSites

MultiSites is a feature of WordPress that allows you to have multiple sites in one WordPress install! This is great for developers who need a play ground in which to develop multiple client websites and not have to worry about having multiple databases kicking around. Another nice feature of Multisites is that it makes backup much easier as well.

To configure MultiSites you need to make one change to your “wp-config.php” file. The “wp-config.php” file is located in the root of where you installed WordPress. You will need to use some sort of text editor to edit this file. You will want to add this line to the file:

define(‘WP_ALLOW_MULTISITE’, true);

“I like to put it above the line that reads “That’s all, stop editing!…”

Save the file, log out of WordPress and then log back in. Click on Tools – Network. Select Sub-directories and then fill out info. Click install button.

It’s say’s create a folder called “blogs.dir” in wp-content.

In the “wp-config.php” file you edited earlier

Open up terminal and type – sudo gedit .htaccess

Paste info into .htaccess file and hit save.

Log out and then back into WordPress.

MultiSites is now setup.

Setup Tools to help with Web Development

This next section is the tools and add-ons that I can’t live without when I do web programming. I hope that you will try these out and see just how helpful they can be.

Netbeans IDE

This is by far one of the best editors I’ve ever had the pleasure to work with. The GUI might not be the BEST looking (Visual studio is my favorite looking IDE) but I find it is the best IDE for open source programming. Go to “Ubuntu Software Centre”. Search for “Netbeans”. Tell it to install.

GIMP

This program has really matured. While I still find it not as good as Photoshop the program can do most things almost as well. One thing that it’s missing by default is a slicing program. I’ve found a way to emulate slicing like in photoshop by installing Slicer. Similar to Netbeans search for “Gimp”. Click install. I’ve included a link to “slicer”.

• http://docs.gimp.org/en/python-fu-slice.html – Slicer

Inkscape

Inkscape is to Adobe Illustrator ad Gimp is to Photoshop. Inkscape is a vector drawing tool that is very good. You can search and install it much like “The Gimp”.

PlaysOnLinux

Use Ubuntu Software Center to install “PlayOnLinux”. This will also install “Microsoft Core Fonts” during install. You need to install them.

This program will install the most common MS fonts on Linux as well as helping you install:

• IE6
• IE7
• Chrome
• Safari

To run “PlayOnLinux” you need to click on “Applications-Games-PlayOnLinux”

Let’s setup PlayOnLinux.

     

If it finds any updates you will have to manually download it.

You can download PlayOnLinux here: http://www.playonlinux.com/en/download.html

You need to use the “Debian” file format with Ubuntu. Tell it to open with “Ubuntu Software Centre” when it is downloaded.

Tell it to upgrade.

Open “PlayOnLinux” again. It will most likely ask you to install some more MS Fonts. Let it do it’s job. You will have to agree with it’s EULA.

Click install to start installing Internet Explorer:

I won’t go through all the installs with you as they are all pretty similar. Click on the program you want installed and the program will automatically download and install on your machine. I found IE 6 works awesome. IE 7 however isn’t all that great but does the job re: checking websites.

    

Once you are all done you can use all these programs.

Setup Backup.

My favorite backup tool is called “Deja Dup”. It’s a front-end program for duplicity. It works very much like Time Machine for Mac OSX. What’s great about this program is that it is able to backup to almost any media known to man. SSH, FTP, Windows Share or even Amazon S3!

When it backups it will only copy files that have changes since the last backup! This means that backup sizes are smaller and much, much faster! You can also schedule backups as well with it. Ok, enough talk let get it setup!

Very much like every other program in this “How to” we’ve installed apps through Ubuntu Software Centre. This program is no exception. Search for “Deja Dup” and install it. Once installed it will add itself to the system tools menu under Applications.

While you might be tempted to jump into the backup program it would be best to think out your backup needs and know where you want to backup to. I recommend that you backup to an external hard drive or NAS. I have a DLink 323 that has Samba (Windows Share) running on it. My walk through will show how I connect to my share and then make a link to the folder I want to backup to.

First go to places – Connect to server.

Enter the server information. Here’s what my server info is:

Doing this will mount the network folder to your places. Find the folder you want to backup to and then drag it to the “places” sidebar. It will become more apparent in future steps why we will need this.

Now we need to open the backup program “Deja Dup”. Remember the first backup will take the longest.

It can’t get much easier than this. Do you want to backup or do you want to restore!

You want to select the shortcut to the backup folder you added to your “places side bar”. Select “Encrypt” if you don’t want someone looking at the backups.

You will need to specify the items that need to be backed up. Remember we moved the HTML files into www in our profile? That will all be nicely backed up now

When the backup is done you will be asked if you want to schedule the backup. I recommend that you backup at least once a day.

Here’s another link you might want to read. There is a member of the WordPress Community here in Winnipeg that also blogged about Netbeans and WordPress – http://dan.bernardic.ca/wordpress-netbeans/