At work we always have a pretty hefty development environment. At home I’ve never had any dedicated environment for my web development. It’s both a relief and something I miss.
Today I’ll try to set up a WordPress development environment that’s a bit more robust than my old setup where I download the file I need to change from my website to my desktop, change it, upload it and refresh the browser.
The idea is to:
- use Google Code as a code repository
- use VirtualBox to run an Ubuntu server with the Apache web server to host WordPress
- use Aptana for writing the code
Setup Google Code
I registered mypersonalblog on Google Code. For now I’ll probably mostly use the SVN features so you can swap out Google Code for any other repository.
I created a wp-themes folder in trunk where I’ll put one folder for each theme I use.
I download the theme I want to use from WordPress Themes. I add -ol to the end of the theme folder to not confuse the themes with the original folder names. Then I check it in. This is done to easily be able to track my changes compared to the version I started out from later. Both to be able to see what I have done but also to easily be able to merge updated theme versions further down the road.
I change the styles.css file and add some information. Here is an example from the Simplr-ol style.css file.
THEME NAME: Simplr-ol THEME URI: http://code.google.com/p/mypersonalblog/ (Simplr http://www.plaintxt.org/themes/simplr/) DESCRIPTION: My customizations to Simplr; "The original minimalist one-column, content-centered theme for WordPress. A different type of theme. For WordPress 2.6.x." VERSION: 4.6.1-0.1 AUTHOR: Ola Lindberg (Simplr by Scott Allan Wallick) AUTHOR URI: /wp/ (Simplr http://scottwallick.com/) TAGS: variable width, fixed width, one column, widgets, theme options, options page, white, orange, blue, microformats, hatom, hcard
If any theme diverges a lot from the original theme I’ll maybe come up with a new name and upload it to WordPress Themes. For now I think it’s good enough to have them all in one Google Code repository.
Setup VirtualBox, Ubuntu, Apache and WordPress
I installed VirtualBox, created an Ubuntu appliance and installed Ubuntu 9.10 desktop. I installed the guest add-ons and Apache. I changed the VirtualBox network to Bridge mode so it get’s its own IP address.
Update 101118: I recently wanted to make this setup on another computer (using a wireless network card) where I couldn’t get the Bridged Adapter to work. I searched around a bit and it and it seemed like some people had similar issues. Instead I configured VirtualBox to use two network cards. One using NAT (giving internet access) and one using Host-only Adapter.
With this setup you should access you guest os from your host os with the IP address your 2nd network card gets (in Windows).
I created an Apache Virtual Host and installed WordPress to that folder. The production URL is /wp/ and for the local URL I use http://o/blog. I added the IP for my virtual Ubuntu to the name o i my hosts file. Now I can surf to http://o/blog.
My virtual host is configured like this
ServerName o DocumentRoot /home/ola/shared/web/ola #Only put the log file like this in the web root on a local server CustomLog /home/ola/shared/web/ola/ola-access.log combined
Share files between my workstation and the virtual Ubuntu server
To share files in VirtualBox I use SharedFolders. The folder on my Windows workstation where I checked out the repository is D:CodingMyPersonalBlog and it’s mapped to the name MyPersonalBlog in Ubuntu.
To mount the folder MyPersonalBlog to /home/ola/MyPersonalBlog in Ubuntu you run the following from an Ubuntu terminal
sudo mount -t vboxsf mypersonalblog /home/ola/MyPersonalBlog
Make sure that the files are visible in you Ubuntu server by running ls -la in the folder.
Note! You need to run this every time you login or you can create a script and make it auto run.
ola@ubuntudevserver:~/MyPersonalBlog/wp-themes$ ls -la total 28 drwxrwxrwx 1 root root 4096 2010-03-27 11:08 . drwxrwxrwx 1 root root 4096 2010-01-01 19:09 .. drwxrwxrwx 1 root root 4096 2009-12-29 11:45 AutoFocus-ol drwxrwxrwx 1 root root 4096 2010-03-27 11:12 room-34-baseline-ol drwxrwxrwx 1 root root 4096 2009-12-29 11:13 Simplr-ol drwxrwxrwx 1 root root 4096 2010-03-27 11:13 .svn drwxrwxrwx 1 root root 4096 2009-12-29 10:58 veryplaintxt-ol
The last thing to do is to tell WordPress that the themes exists. I do that by creating soft links in the theme folders
ola@ubuntudevserver:~/www/olalindberg.com/wp/wp-content/themes$ ls -la total 24 drwxrwxrwx 5 www-data www-data 4096 2010-03-27 11:48 . drwxrwxrwx 6 www-data www-data 4096 2010-03-27 11:20 .. drwxrwxrwx 2 www-data www-data 4096 2009-12-19 00:22 classic drwxrwxrwx 3 www-data www-data 4096 2009-12-19 00:22 default -rw-r--r-- 1 www-data www-data 30 2010-03-27 11:01 index.php lrwxrwxrwx 1 ola ola 55 2010-03-27 11:48 room-34-baseline-ol -> /home/ola/MyPersonalBlog/wp-themes/room-34-baseline-ol/ drwxr-xr-x 3 www-data www-data 4096 2009-12-29 10:42 simplr lrwxrwxrwx 1 ola ola 45 2010-03-27 11:06 Simplr-ol -> /home/ola/MyPersonalBlog/wp-themes/Simplr-ol/
Now I can enable the themes in the WordPress admin panel.
Note! If WordPress can’t see the themes look at the permissions for the shared folder. I set mine to 0777 since it’s a local setup.
Import all posts from the production setup
I use the build in WordPress feature to export all posts and pages to an XML-file. I import that file to my local setup. I include all attachments. Some minutes later I have all my posts in my local development environment.
If I need to re-import all posts I use the plugin Bulk Delete to empty my current local database. Then I empty the Media Library in the WordPress admin panel. One tip is to increase the number Media items per page via the Screen Options.
I installed Aptana, created a project file and added all my theme files to it. I have never used Aptana before so it’s a test. We’ll see how it goes.