• Like
Intro to development sites and site migration
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Intro to development sites and site migration


Presentation slides from WordCamp Toronto Developers 2012 talk. …

Presentation slides from WordCamp Toronto Developers 2012 talk.

As you begin doing any website design or development, or even just a site restructuring, you will quickly realize that a place to work, test and/or demonstrate a new site without impacting a production site is a necessity. A development site provides that place. This presentation will show you how to setup a simple local (on your pc/laptop) dev site or a hosted dev site. we’ll also see how to migrate WordPress sites, either to clone an existing site to a dev site for updates/testing or to move your finished dev site to the final production site.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads


Total Views
On SlideShare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 1. “Intro to Development Sitesand Site Migration”Rick Radko WordCamp Toronto Developersr3df.com November 3rd, 2012
  • 2. A little bit about meRick Radko – R-Cubed Design Forge  Software, web and app designer/developer.  Creating custom web sites since 1996.  Artistic and creative engineer.  Co-organizer of: The Ottawa WordPress Group.  If you have questions or need help, contact me at: wpinfo@r3df.com.Slides are posted at:  http://www.slideshare.net/r3df© 2012 Rick Radko, r3df.com 1
  • 3. Why a “Dev” site?A development “Dev” site:  Safe place to work that won’t disturb a live site.  A site where it does not matter if you:  WSOD the site.  WSOD – White Screen Of Death – blank page from WordPress when you have an error in your PHP code.  http://wordpress.org/tags/wsod  Dump error messages.© 2012 Rick Radko, r3df.com 2
  • 4. Why a “Dev” site? Continued…  Safely test, add and remove plugins and themes  Plugins and themes can have conflicts with other plugins/themes or some versions of WordPress.  Many plugins and themes don’t clean up after themselves and leave junk in your database.  Public dev sites:  Can be used for client review/demo before going live.  Allow clients to add content before the site is live.© 2012 Rick Radko, r3df.com 3
  • 5. Creating a Dev site for WordPressWordPress needs a web server with PHP andMySQL to run.  2 common options for a dev site server:  Hosted:  On a sub-domain of the live site.  On an alternate domain.  Or a sub-domain on another site (like yours).  “Local” web server on your pc or laptop.  May use both local and hosted in the process of a site’s development.© 2012 Rick Radko, r3df.com 4
  • 6. Hosted dev sitesHosted dev sites:  Easy for users (clients) to make updates on.  Public, but can be protected.  Requires an internet connection.  Constantly moving files across the net: slow.  Uses existing facilities. (Nothing to set-up)  Domain can be:  A spare domain.  A subdomain on the client site.  A subdomain on your site subdomain.© 2012 Rick Radko, r3df.com 5
  • 7. A hosted exampleLet’s create a dev site that:  Is a copy or “clone” of an existing site.  Is hosted.  Will be on a subdomain of the existing site.Creating a dev site like this:  Normally takes about 10-15 minutes.  Is one of the easiest dev setups to create:  Copying the files and database is local to the server.© 2012 Rick Radko, r3df.com 6
  • 8. cPanelThis demo will use cPanel, you may need to adjustto use your hosting’s control panel.© 2012 Rick Radko, r3df.com 7
  • 9. Add the sub-domainAdd a sub-domain to the hosted site.© 2012 Rick Radko, r3df.com 8
  • 10. Copy over the WordPress filesCopy all of theWordPress files overto the demo folder.© 2012 Rick Radko, r3df.com 9
  • 11. Copy the database to a new one – “demo”Use phpMyAdmin tocopy the database.© 2012 Rick Radko, r3df.com 10
  • 12. Fix up three things1) You may need to add a user for the database:  phpMyAdmin in most set-ups does not manage the users.  Use the Databases tool to do that.  Just add the current user to the new database.© 2012 Rick Radko, r3df.com 11
  • 13. Add all privilegesWordPress recommends “All Privileges”, for thedatabaseuser. Youcan reducethis someif you want.© 2012 Rick Radko, r3df.com 12
  • 14. Update the config.php file2) In config.php file you will need to change:  The database name.  The database user name and password if you created a new user.  Config.php is in the top folder of your WordPress install, in this case: public_html/demo/.© 2012 Rick Radko, r3df.com 13
  • 15. Update the database – if needed3) Update the database (if the domain changed).  The database is full of links and settings with the site domain. If the domain changes:  Links, including the menus, will take you to the original site.  You won’t be able to login to admin, you will go to the original site.  Despite what a lot of tutorials say, DO NOT do a search and replace in MySQL, or any text search and replace on an SQL dump.  If you are lucky you may get away with it, but you will more likely break serialized data representations.© 2012 Rick Radko, r3df.com 14
  • 16. Use a scriptThe codex page: http://codex.wordpress.org/Moving_WordPress has some lengthy discussionon the topic of moving sites, but just use the scriptmentioned in the change URL section.  searchreplacedb2.php  http://interconnectit.com/124/search-and- replace-for-wordpress-databases/  It’s easy to use, and does the job in one step.  Is aware of serialization, even recursive (nested) serialization.© 2012 Rick Radko, r3df.com 15
  • 17. Run searchreplacedb2.phpTo use searchreplacedb2.php  Upload searchreplacedb2.php to the top level WordPress folder, public_html/demo in this case.  Enter searchreplacedb2.php in the URL of your browser, in this case: demo.wpottawa.org/searchreplacedb2.php© 2012 Rick Radko, r3df.com 16
  • 18. Opening screen© 2012 Rick Radko, r3df.com 17
  • 19. The database settingsThe script retrieved the settings…© 2012 Rick Radko, r3df.com 18
  • 20. Select the tables to update© 2012 Rick Radko, r3df.com 19
  • 21. Enter the URL changes© 2012 Rick Radko, r3df.com 20
  • 22. It’s done  Over 7500 changes!!!Remember to remove the script!© 2012 Rick Radko, r3df.com 21
  • 23. Dev site on a subdomain – complete duplicate© 2012 Rick Radko, r3df.com 22
  • 24. The site is publicIn WordPress admin, under Settings -> Privacy  Set to “Ask search engines not to index this site”  Don’t want the dev site listed in Google etc.May also consider password protection.  .htaccess or maintenance mode plugins© 2012 Rick Radko, r3df.com 23
  • 25. Copying the site backSame process to copy a revised dev site back.  Beware: the original site may change after the copy to dev.  Post/page etc. updates – easy to restrict  Comments – no control  May need to do a database merge to accommodate changes.© 2012 Rick Radko, r3df.com 24
  • 26. “Local” web servers“Local” web server on your pc/laptop.  Fast, no internet lag, no FTP’ing of files.  All work is local on the computer.  Easier to integrate IDE.  No internet connection needed to use it.  Can work anywhere you that you can take your computer. (airplane, remote locations)  Usually private.  Need to install a web server© 2012 Rick Radko, r3df.com 25
  • 27. Local servers – web server stackWAMP stack  Windows, Apache, MySQL, PHPLAMP stack  Linux, Apache, MySQL, PHPMAMP stack  Mac, Apache, MySQL, PHP*Apache is a web server© 2012 Rick Radko, r3df.com 26
  • 28. Some available server stacksAll platforms:  BitNami: http://bitnami.org  XAMPP: http://www.apachefriends.orgWindows only options:  EasyPHP: http://www.easyphp.org  WampServer: http://www.wampserver.comMac only options:  MAMP: http://www.mamp.info  Native installsLinux only options:  Native installs© 2012 Rick Radko, r3df.com 27
  • 29. BitNamiBitNami  Available for all platforms  Easiest to install:  If you use the WordPress version.  http://bitnami.org/stack/wordpress  Production ready versions  Virtual machine versions  Cloud deployment (amazon)© 2012 Rick Radko, r3df.com 28
  • 30. InformationBitNami install tutorial on wordpress.org:  Bit out of date, but still good  http://codex.wordpress.org/BitNamiBitNami FAQ:  More detailed:  http://wiki.bitnami.org/Applications/BitNami_Word press© 2012 Rick Radko, r3df.com 29
  • 31. A quick BitNami installLets see how easy it is to install BitNami:© 2012 Rick Radko, r3df.com 30
  • 32. A quick BitNami install: screen 2© 2012 Rick Radko, r3df.com 31
  • 33. A quick BitNami install: screen 3© 2012 Rick Radko, r3df.com 32
  • 34. A quick BitNami install: screen 4© 2012 Rick Radko, r3df.com 33
  • 35. A quick BitNami install: screen 5 - some details© 2012 Rick Radko, r3df.com 34
  • 36. A quick BitNami install: port 80 conflict!© 2012 Rick Radko, r3df.com 35
  • 37. Port conflictsPossible conflicts:  Skype  Other web servers  Chat software© 2012 Rick Radko, r3df.com 36
  • 38. A quick BitNami install: port 3306 conflict!© 2012 Rick Radko, r3df.com 37
  • 39. A quick BitNami install: screen 6© 2012 Rick Radko, r3df.com 38
  • 40. A quick BitNami install: screen 7© 2012 Rick Radko, r3df.com 39
  • 41. A quick BitNami install: mail settingsMail settings screens if you want to set them up.© 2012 Rick Radko, r3df.com 40
  • 42. A quick BitNami install: screen 8© 2012 Rick Radko, r3df.com 41
  • 43. A quick BitNami install: screen 9© 2012 Rick Radko, r3df.com 42
  • 44. A quick BitNami install: screen 10© 2012 Rick Radko, r3df.com 43
  • 45. A quick BitNami install: screen 11© 2012 Rick Radko, r3df.com 44
  • 46. Install complete!© 2012 Rick Radko, r3df.com 45
  • 47. The installed WordPress Site© 2012 Rick Radko, r3df.com 46
  • 48. XAMPPXAMPP  Available for all platforms  http://www.apachefriends.org/en/xampp.html  Easy to install (not as easy as BitNami)  More tends to go wrong during installs.  Mimics common server setups  NOT production ready (security)© 2012 Rick Radko, r3df.com 47
  • 49. Installing XAMPPDetailed install instructions are available forWindows, Mac and Linux at:  http://www.apachefriends.org/en/xampp-windows.html  http://www.apachefriends.org/en/xampp-macosx.html  http://www.apachefriends.org/en/xampp-linux.htmlThere is also a version for memory sticks:  http://www.apachefriends.org/en/xampp-windows.html#646© 2012 Rick Radko, r3df.com 48
  • 50. Manual WordPress installIf you don’t know how to install WordPress usingthe .zip copied from wordpress.org, you shouldlearn.  Most of the web server stacks do not include WordPress.  If you want more than one WordPress site on BitNami you will also need to do WordPress installs.See codex for help with a WordPress install:http://codex.wordpress.org/Installing_WordPress© 2012 Rick Radko, r3df.com 49
  • 51. An additional note on scripted installsA native install allows you to tweak settings likethe table prefix, which you can’t with a scriptedinstall (Fantastico, Simplescripts etc.).  Installer applications:  may add files to your site for “internal” tracking.  may not install the latest version of WordPress.  usually use default database settings for names and table prefixes – security weakness.© 2012 Rick Radko, r3df.com 50
  • 52. Installing WordPressThe most complicated thing to installingWordPress is setting up the database.  It’s not that hard.  Lots of tutorials online.  On hosted servers you can use GUI tools like cPanel.  On a local server you can use phpMyAdmin  Hosted installs usually have the DB management in phpMyAdmin disabled.© 2012 Rick Radko, r3df.com 51
  • 53. Managing databasesThis is the cPanelDatabases toolwhich will allowyou to add/deletedatabases anddatabase users.© 2012 Rick Radko, r3df.com 52
  • 54. More installing WordPressThe other question is where to put the files?On local servers the htdocs folder is the default. Butwhere is it?  Depends on the install:  apache/htdocs is a common default  BitNami default windows:  C:Program FilesBitNami WordPress Stackapache2htdocs  Note: the WordPress “module” we installed in the demo is in a special location: C:Program FilesBitNami WordPress Stackapps.Hosted servers:  public_html© 2012 Rick Radko, r3df.com 53
  • 55. Localhost or web servers setups will have your sites at:  http://localhost/<some_name>/ <some_name>/© 2012 Rick Radko, r3df.com 54
  • 56. Localhost or this works most of the time:  Some things can have issues with the localhost or address as they expect a domain name.  It’s not very nice for using as a set-up when you have lots of sites.  Wouldn’t http://dev.site.demo be nicer than  Or how about http://client_domain.local instead of http://localhost/clent_domain/wordpress/?© 2012 Rick Radko, r3df.com 55
  • 57. Virtual hostsVirtual host – vhosts are a web server feature thatlets you set up nice names “virtual host names”for your websites.  http://httpd.apache.org/docs/2.2/vhosts/To get vhosts working you need to tell apache youwant to use them.  Find the apache/conf/ folder in your server install.  Open the httpd.conf file. (use a plain-text or programming editor)© 2012 Rick Radko, r3df.com 56
  • 58. Httpd.conf fileFind the line “# Virtual hosts”  remove the “#” from the start of the line below. to  Save the file. (You may need to alter permissions to be able to save it.)© 2012 Rick Radko, r3df.com 57
  • 59. Vhosts fileIn the apache/conf/ folder you should also find thefolder “extra” -> apache/conf/extra/  That is where you will find the file:  httpd-vhosts.conf  Open that file.Look for a line near the top like:  NameVirtualHost *:80  Make sure there are no “#”s in-front of it.© 2012 Rick Radko, r3df.com 58
  • 60. Add a virtual hostFor a default BitNami install (on Windows) pastethis code after any other lines for bitnami.demo: <VirtualHost *:80> ServerName bitnami.demo DocumentRoot "C:/Program Files/BitNami WordPress Stack/apache2/htdocs" <Directory "C:/Program Files/BitNami WordPress Stack/apache2/htdocs"> Options Indexes FollowSymLinks Includes ExecCGI AllowOverride All Order allow,deny Allow from all </Directory> </VirtualHost>  You may need to adjust the 2 occurrences of: C:/Program Files/BitNami WordPress Stack/apache2/htdocs on other installs© 2012 Rick Radko, r3df.com 59
  • 61. Add another virtual hostAnd paste this code after that for dev.site.demo: <VirtualHost *:80> ServerName dev.site.demo DocumentRoot "C:/Program Files/BitNami WordPress Stack/apps/wordpress/htdocs" <Directory "C:/Program Files/BitNami WordPress Stack/apps/wordpress/htdocs"> Options Indexes FollowSymLinks Includes ExecCGI AllowOverride All Order allow,deny Allow from all </Directory> </VirtualHost>  You may need to adjust the 2 occurrences of: C:/Program Files/BitNami WordPress Stack/apps/wordpress/htdoc© 2012 Rick Radko, r3df.com 60
  • 62. Save and restart ApacheSave the vhosts file. (You may need to alterpermissions to be able to save it.)You will need to restart Apache to get the settings totake effect.© 2012 Rick Radko, r3df.com 61
  • 63. Hosts filesTo final step to make this work is to add the virtualhost to the “hosts” files on your computer  There is a chart on Wikipedia that provides common host files locations (dependent on your operating system)  http://en.wikipedia.org/wiki/Hosts_(file)© 2012 Rick Radko, r3df.com 62
  • 64. Hosts filesOpen up the hosts file and add these 2 lines:  Tells your computer that the 2 virtual hosts are on your computer.Save the hosts file. (You may need to alterpermissions to be able to save it)© 2012 Rick Radko, r3df.com 63
  • 65. Sites on vhosts© 2012 Rick Radko, r3df.com 64
  • 66. Trick to avoid domain migration issuesAdd the final name of the site to your hosts file:Set up a vhost for “somesite.com” and now youcan work locally with the final name!  Easy migration  BUT - blocks access to any real external site of that name.  I don’t use this technique as I want to access both sites.© 2012 Rick Radko, r3df.com 65
  • 67. Migration reviewWe did a migration in our first example and therewe saw that it is just a few steps: 1. Copy files.  Local copy or FTP to another server, does not matter. 2. Copy the database.  To move servers you will need to do an SQL dump/export and then an import on the new server. 3. Clean-up a few things.  Database user.  Database settings in wp-config.  URL’s - be aware of serialization.That’s all there is to migration!© 2012 Rick Radko, r3df.com 66
  • 68. MySQL exportTo export the database to move to another serveryou can use the export function in phpMyAdmin.© 2012 Rick Radko, r3df.com 67
  • 69. MySQL importTo import the database on another server you canuse the import function in phpMyAdmin.© 2012 Rick Radko, r3df.com 68
  • 70. Backup scriptsMany of the backup and maintenance scripts:  Backup Buddy,  InfiniteWP,  ManageWP, + many otherswill do site migrations.Make sure any one you use mentions serialization.© 2012 Rick Radko, r3df.com 69
  • 71. Multisite migration quirksNeed to manually change the wp-config file. Lookfor the line: define( DOMAIN_CURRENT_SITE, ‘somesite.com ); and update it to your new domain.Unlike regular sites which will display, (just withbad links) with multisite, you will get a databaseerror until you fix URL’s. (Use the script, note – youneed to be aware of all the different site domains,particularly with sub-domain multisite installs, andyou may not want to change all tables at once.)© 2012 Rick Radko, r3df.com 70
  • 72. Checking for ports in usenetstat (network statistics)  A command-line tool that displays network connections.  http://en.wikipedia.org/wiki/Netstatnetstat –an  Shows all active portsnetstat –anb  Shows process names.© 2012 Rick Radko, r3df.com 71
  • 73. ContactRick Radko  email: wpinfo@r3df.com  twitter: @r3designforgeSlides at:  www.slideshare.net/r3df© 2012 Rick Radko, r3df.com 72