How do I setup my new website while my existing one is still live?

How do I setup my new website while my existing one is still live?

Method 1 - Use a sub-domain or temporary 2nd domain to build on.

Benefits:

It provides a semi permanent URL to build upon without the need to hack a Hosts file back and forth when editing.
If you plan on collaborating with others on the new website build, you should use this method since the URL can be shared.

Downsides:

In WordPress, every URL built into the new website will have the wrong URL written, so that when you change and go live, you will need to run a few WordPress tools to convert the URLs throughout your content and navigation. Joomla is simpler and only requires a few small changes in its globals after going live.

Either setup your new WordPress or Joomla site on an existing extra domain you are not using, or setup a new sub-domain like dev.yourexistingsite.com using your Cpanel.

1. Using Cpanel go to the Domains section and select Sub Domains. Now create a new sub domain like dev. or new. This will both create the sub domain and also the folder to install your new website into.
2. Alternatively, using an existing domain you are not using. Go to Cpanels Domain section, now select Addon Domains. Paste in your domain name and add it to Cpanel. This both creates a DNS record for your domain and a web folder to install to. Be sure your domain name is also pointed to our servers by changing its name servers to ours; ns1.hosting-nation.net and ns2.hosting-nation.net

Method 2 - Changing your computers host file to view a website in development, before the domain name is pointed to the new server.

Benefits:

Uses the exact domain name in the address bar and hence the link URLs being built can remain the same when it goes live.

Downsides:

No one else can view the new website in development without also editing their host file. Not great if you collaborate with others.
It is easy to forget to turn off the Host file switch and not be able to load the existing (older) website.

There are a few ways to do this, and you will have to decide which you prefer. Essentially you tell your browser or computer that the IP address of a given domain name (the one in development) is NOT where the live site is, rather it IS found on this specific IP address (the new hosting account IP address). This is altering the natural DNS of your computer temporarily, to look for the website you are building in a different place then the Internet is suggesting. This effectively lets you preview the site using the original domain name, without the need to build it on a sub domain.

1) If you are just using Google Chrome, then you can install the "Virtual Hosts" extension with the new hosting account IP address.

2) Otherwise, you have to modify your hosts file on your desktop:

The manual way:
https://www.howtogeek.com/howto/27350/beginner-geek-how-to-edit-your-hosts-file/

Using a tool on Mac: http://geekussion.com/mac-os-x/gas-mask-mac-80/

Using a tool on Windows http://www.abelhadigital.com/hostsman/