How to make a development version of a website

Prev Next

Inevitably you or your customers will want to redesign their website. Redesigning a website is a major undertaking and usually involves the site going offline several times while changes are being made and bugs are fixed, so it's not something you want to do on the live version of your website.

This article shows how to make a development version of your current website, so you are free to make modifications without it breaking your live website. Once the new site is ready, you can switch it to become the new site.

This method involves making a development subdomain of your actual site. For this example, I'll be using a pretend website called "example.net". It has a fresh WordPress install in a cPanel account.

The general process is:

  1. Create a subdomain.

  2. Copy the live sites files to the subdomain.

  3. (If required) Copy a Database Over

  4. Adjust any configs to reflect the new subdomain/database information.

Create a Subdomain & Copy Files

  1. Create a subdomain that the copy will use. I'll use devsite.mydomain.com

  1. Go to the “Domains” section and click “Domains”. Continue to setup your subdomain (see our guide on this if needed).


  2. Copy the files from the public_html folder, to the subdomain folder by use of the "File Manager"


  3. Go to your public_html directory (or wherever the site is stored). Click ‘Select All then click ‘Copy’.

    File Manager interface showing public_html folder and options to copy and select all files.

  4. From the popup box, enter the location you wish to copy the files to. In this case our newly created subdomain.

    File path input area for copying files in a web hosting interface.

  5. Click ‘Copy Files’.


    Copy Database

Only needed if your website uses a database. Popular CMS such as Wordpress will always use one.

  1. Export a backup of the live website database by using phpMyAdmin.

  1. Click Your Database » Export
    phpMyAdmin interface showing database tables and export option highlighted.

  2. Click ‘Export

Exporting tables from the database with options for quick or custom export methods.

The database will download as an .sql file to your computer.

  1. Create a new database for the development website by using MySQL Databases. This keeps the development website from affecting the live website

  2. Got back to cPanel and go to the ‘Databases’ section and click on ‘MySQL® Databases’.

  1. Set the new databases name. Click ‘Create Database

    Interface for creating a new database with input fields and a submit button.

  2. Create a new user for the database (to keep things fully separated). Enter a new Username and Password. Then click on ‘Create User’.

    Form for adding a new MySQL user with username and password fields.

  3. Add the user to the Database by selecting the new user from the drop-down, followed by the new database from the drop-down. Then click ‘Add’.
    Form to add a user to the database with an 'Add' button highlighted.

  4. Grant the required user privileges for your site. (wordpress for example usually needs all of them) then click ‘Make Changes’.

    User privileges management interface showing various database permissions and options to make changes.

  5. Import the new database using phpMyAdmin by going to back into ‘phpMyAdmin’, clicking your new database on the left and clicking on ‘Import’ at the top.

    phpMyAdmin interface showing database structure and import options for mywebsit_dev.

  6. Click ‘Browse’ and select the database file you exported earlier.
    Interface for importing files into the database with a browse button highlighted.

  7. Once selected, you can scroll to the bottom (most settings can be left default, but select any if you know you need them. Then click ‘Import
    Import options for SQL format with highlighted import button and settings.

  8. A successful import will show something similar like this:

    Screen_Shot_2017-10-16_at_12.39.59_pm.png

    Failures May Happen

    If you are importing to a database that already has data, it may error saying the tables and such exist already.

    Also, if your database is significantly large, it may time out. There are limits for running scripts etc. For this its best to do an import via command line.

Wordpress Database Update

If you are using wordpress, it works via the configured domain when you first install it. When the site reads from the database it uses this domain for its functionality. As you could imagine, using a differnet domain will direct you to a different site, so we need to adjust them inside the new database you just created.

  1. Inside of ‘phpMyAdmin’ click on your new development database to expand it and see the tables. Then find the table ending with ‘_options’.

    Note

    This table will contain a prefix configured inside of wp-config.php.
    By default it will be wp_options but if you have set it, it will appear with the prefix. In our example, it appears as LU9HY6xAi_options

    Database structure showing options for a website with highlighted elements for editing.

  2. Double click on the url’s on the siteurl and the home lines to edit them to the new ones. These auto-save once clicking outside of the box again.

    Configuration settings showing site URL and blog details for a website.

Important

If you use CMS such as wordpress that require databases names and such, you will need to adjust this for the new database and user (wordpress for example in the wp-config.php file).