Search the Community

Every website developer needs to do some basic tasks related to web-development. Among the important ones is looking for new ways to improve website's user experience as well as keeping it secure with the latest updates and patches. And all this needs to be done without affecting the availability of the website for a single minute. That is why, most web developers like to create local test labs that mimic their online websites and in this way they can test new stuff in their local labs without affecting the availability of the website to the general public. In this post, I will talk about creating local wordpress lab that will be very handy for web developers who use wordpress platform (the most famous framework for websites and blogs).. The main reason for me to create such a lab was to work on my current wordpress theme, which because of some obscure reason was having difficulties with the latest wordpress platform update. With such a local environment, I was able to workout a method whereby I got to keep my theme as well as update to the latest wordpress version, and all this without affecting the availability of my website for a single minute. Different ways to create a local wordpress lab: There are a number of different ways to create a local wrodpress lab (and almost all of them are well-documented online).. However, I personally felt that the lab should be as similar to the actual website as possible, not only in terms of look and feel but also other ways such as how I connect to my website, how I access different files and folders, how I edit them etc. In short, I wanted my lab to behave in such a way that it feels as if I am working on my real website. Local installation of wordpress can be done in different ways. The most common method is to install and setup apache, php, mysql ect on your local machine and then use these services to run wordpress. This method can be simplified by installing WAMP (a package containing Apache, Mysql, Php together, making the installation and configuration easy) on windows or LAMP on linux. Another method of a local wordpress installation is using a package called “InstantWP”. It is also a modification of the above method but is made in such a way that installation and setting up is as painless as few mouse clicks. Furthermore, it also gives you a nice interface for doing different tasks easily. Another method, which is not as simple as those described above, is using a virtual machine to create a server which would then host the local wordpress website. I would like to emphasise again that for most users, setting up such a lab will not be the easiest of tasks. However, this is the method I like the most and in this tutorial I have described in detail how to create such a lab. There are two main reasons why I like this method the most: 1. The main operating system which I use for my normal work is affected minimally by this method (I need only to install Virtual box or Vmware). And thus the need to turn my main OS into a server is avoided. It also provides a sandboxed environment where if something goes wrong, can be corrected easily and even can be reset without affecting the main OS. Thus my main OS remains clean and stable and I can work without worries of damaging it. 2. The second reason is that by creating a local lab using virtual server, I am able to mimic the actual experience of working on my real website as closely as possible. I normally access my website via FTP, and this is how I would be doing it in my local lab. Furthermore, I can also create a cPanel for this local website similar to the actual website, which makes it feel like I am working on my real website. And it really feels good. So I wouldn't mind doing some extra work in the beginning to have a better experience in the longer run... Setting up a virtual server: The first thing that needs to be done to setup our lab is to create a virtual server and for this we first need to create a virtual machine. Two most commonly used applications for creating virtual machines are Oracle Virtual Box and VMware workstation. The first one is Open Source and the second is commercial but a bit more polished, but both work fine. I personally use VMware, but the steps are similar for both applications. Before creating a virtual machine, you need to decide which OS to use for your server. There are many choices, but for me Ubuntu server is the winner. It is free and does a great job and also has a huge database of support available for it. So go ahead and download Ubuntu server 12.04 LTS … I won't go into the details of how to create a virtual machine and install an OS onto it but I must say that the overall process is very simple (maybe I shall write another tutorial for this). You just need to follow the prompts. One point specific to the ubuntu server installation is that during installation it will ask for which services you need to install. For our needs, we just need the ubuntu basic server, SSH server and LAMP server. However, if you miss it during installation, you can do it later.... No worries One thing that need to be understood here is that ubuntu server (and many other pure server linux distros) don't have a graphical interface by default. i.e. you are just presented with a black command line screen and you have to do all your work via this command line interface. Graphical interface (Desktop) can be installed, rather easily, but I would advise against it because it is resource intensive and won't be of much use for a server. First thing's First: Update and Upgrade: After the installation is complete, the first thing you need to do is update the system.. Use the following commands: sudo apt-get updateand then sudo apt-get dist-upgradeThis will make sure that you have the latest and greatest services running. Firewall: After updating your server, make sure that the firewall is enabled. Issue the following command: sudo ufw enableAnd then make sure that firewall is allowing HTTP (port 80) and SSH (port 22) traffic. Use the following commands: sudo ufw allow 80sudo ufw allow 22 Required Services: Once the firewall is ready and configured, we need to make sure that require server services are installed. Use the following command: sudo taskselYou will be greeted with a prompt similar to following picture Make sure that “Basic Ubuntu Server”, “OpenSSH Server”, and “LAMP Server” are installed. The Basic Ubuntu Server and LAMP server are for the normal server functionality needed to host our wordpress website. The OpenSSH server is to make accessing the server easier. It enables us to use services like SSH (to directly commnicate with the server) and FTP (for file transfer). Connect to your virtual machine over SSH: There are two main reasons for using SSH. First one is to safely communicate with your server without the need of opening the virtual machine again and again i.e. the vitual machine can run silently in the background and to communicate with it, you would just need to use an SSH client (e.g. Putty). The second reason is to make our FTP secure. FTP is inherently insecure but by using FTP over SSH, we can create a secure way to use this protocol. To connect over SSH, we will use Putty. To establish a connection, you just need to know the IP address of the virtual machine, which you can easily get by command: ifconfigOnce you get the IP address (mine was: 192.168.188.120) you just provide it into putty and then login using the username and password of your virtual machine... Connect via FTP: FTP is a great way of connecting to a server for uploading and downloading files. For this tutorial, we will use Filezilla FTP client. So open up FileZilla and just provide the information it requires i.e. host: IP address of your virtual machine (in my case: 192.168.188.120) Username: username of your virtual machine user Password: Password of the user Port: Since we will be connecting over secure SSH port so use 22 After you click quick connect, the connection will be established. However there is one issue. The default directory to which FTP connects is “/home/username” however, the files for web browser (port 80) are in “/var/www”. So we need to create a symbolic link to /var/www folder in our /home/username folder so that we can easily access the files for our website. To do this issue the following command: sudo ln -s /var/www /home/pseudo/www(pseudo is my username) Now when you look at filezilla, there would be www shortcut visible... this is where we will place our wordpress files. Download wordpress: Next thing you need to do is download latest wordpress from wordpress.org. Once, downloaded, you need to extract the contents from the zip file into a folder. Change ownership of /var/www folder: To be able to edit the contents of /var/www folder on your server via FTP, you need to change the ownership of this folder and assign it to the user whose credentials are used for logging in via FTP. Normally, this folder belongs to the root user and even a normal user cannot edit its contents directly (i.e. without sudo). But in our case we need our user (“pseudo” in my case) to be able to add and delete files to this folder and also edit the files so that we can do this via FTP.. To change the ownership, use the following command: sudo chown user-name:user-name /var/wwwReplace user-name with your actual user name (I replaced it with pseudo: sudo chown pseudo:pseudo /var/www Upload wordpress files to your virtual server: Connect to your server via Filezilla and open the “www” directory. Make sure that you have deleted the “index.html” file in /var/www. Then upload all the contents of the wordpress folder to /var/www. Check via Browser: Then open up your browser and navigate to the IP address of your virtual server. In my case it was 192.168.188.120 … If everything has gone well, you will be welcomed by wordpress welcome screen. <a href='http://postimage.org/'target='_blank'> <img src='http://s6.postimg.org/yungr6oct/wordpress_welcome_screen.jpg'border='0' alt="wordpress welcome screen" /></a> Once you see this welcome message, you know that everything uptil now has worked fine. Create mysql databse for your wordpress website: Next thing we need to do is create a mysql database and user for our wordpress website.. Use the following commands: sudo su (this will change your prompt to root, so that you can access mysql) mysql -p (this will ask you for a password. Enter the password you used while installing mysql (in LAMP package)) CREATE USER 'wordpress'@'localhost' IDENTIFIED BY 'wordpress';SET PASSWORD FOR 'wordpress'@'localhost' = PASSWORD('yourpassword');CREATE DATABASE wordpress;GRANT ALL PRIVILEGES ON wordpress.* to wordpress@localhost;quitThis will create a user "wordpress", then set password for this user and then create a database. In the last it grants all the required privileges to this user. Start the wordpress installation in your browser: Once you have created the database, enter the IP address of your virtual machine in the browser once again. Then start the wordpress installation. First it will ask you for the datase name, user name, password, and database host etc. Enter the information and click submit Usually, this would create the config file for you but sometimes things might not go as expected and the file may not be created automatically. In such a case, you will be presented with a page as shown below: You just need to create a file named “wp-config.php” and copy the code presented in the page (as in picture above) into the file. Place this file with the rest of the files (i.e. where you have put wordpress files on your virtual server). Then click “Run the Install” After this you will be presented with another welcome screen, where you need to provide information about your local wordpress website. Enter the required information and click “Install wordpress” If everything goes right, you will be presented with a success message. Then login to the website using the credentials you provided earlier and you will be presented the dashboard of your local wordpress website... thats it... Extra tip: To access your website, you need to provide the IP address of your virtual server, which is kind of ugly and inefficient. This can be made very attractive and efficient. You just need to edit the following file: C:\Windows\System32\drivers\etc\hosts Add the following line at the bottom of the file: 192.168.188.120 mylab (Note: I have used 192.168.188.130 in the picture shown.. don't be confused, just use your virtual machine's IP address) and then save it... Next time you just enter “mylab” into the address bar of your browser, you will be able to see your local wordpress website.. Great !!! What we achieved: After all this hassle, we created ourselves a greate testing environment. We created a local wordpress website that behaves just as our orginal website on the internet. It is hosted on a separate server and we can play with it as much as we like without the worry of damaging our working computer. Disclaimer: I have personally created this tutorial while actually following each step as mentioned. And I confirm that it is 100% working. If there is any mistake in this tutorial (due to some typing error etc) please let me know.... Suggestions on how to improve it are also welcome... Thanks...