How to Replace Your Old Static Website with WordPress

How to Replace Your Old Static Website with WordPress

So you’ve discovered WordPress and you’re ready to migrate your tired old static HTML site to your shiny new CMS of choice. But wait – how do you do this without losing your old site while you’re building the new one? And how do you make sure people don’t find your new site on Google while you’re still setting it up?

In this post, I’ll show you exactly how to get around that problem. I’ll show you how you can work on your new site behind closed doors, while keeping your old site in place so you don’t lose any visitors while the development work is going on.

It’s much simpler than you might expect, so read on!

What You’ll Need

To follow this guide, you’ll need:

  • An existing static site where you want your new site to go.
  • The ability to install WordPress on your server, either manually or using a script.
  • FTP or cPanel access to your server.

If you aren’t sure about any of this, ask your hosting provider. Tell them you’ll need to edit and move a couple of files. They should give you the access you need for this – if they don’t, find a better provider!

Where to Develop Your New Site?

If you’re a seasoned WordPress developer, chances are this isn’t an issue for you. You’re probably doing all your development work on a local machine or a staging server, and then only pushing it to the live site once it’s ready.

But if you’re new to WordPress, this will all feel a bit daunting. How do you install WordPress locally? Even scarier, how do you copy your site to your live server once it’s ready? And what the heck is a staging server?

The good news is that you don’t need to worry about all this. You can install WordPress on your live server and work on it without people knowing, while your old static site stays exactly where it is. Once your new site is up and running, you don’t have to move it, migrate it or copy it – you just copy and edit a file or two and tweak a couple of settings.

Phew! That sound like something you could do as a newbie to WordPress, right? Great!

Step #1: Install WordPress in a Subdirectory

Your first step is to install WordPress. Instead of installing it in the root directory of your site, install it in a subdirectory, or folder. So if your site is at http://mysite.com, you’ll install it in a folder called http://mysite.com/wordpress.

But first, a warning: I wouldn’t actually install it in a folder called WordPress. Give your folder a more obscure name, so that people (visitors and hackers) don’t stumble upon it. Your folder name could be anything you want – complete nonsense, if you like. The essential thing is that the folder mustn’t have the same name as any file or folder in your existing static site. Otherwise when people visit that URL in your old site, they’ll be taken to the new site.

So when you install WordPress, do it in your new folder. If you’re using an install script provided by your hosting provider (such as Softaculous or Fantastico) you should be able to do that when you install it. Or if you’re using the ‘famous five minute install’, just install WordPress manually in your subfolder.

installing WordPress in a subfolder in Softaculous
Softaculous lets you install WordPress in a subfolder

Note: If your site will be running a Multisite network, you can still do this but you won’t be able to use subdomains as the structure for your network – just subdirectories.

Step #2: Hide Your Site

While you’re setting up your new site, you don’t want people finding it in search results, so you’ll need to hide it from search engines.

WordPress makes this very easy. Simply go to Settings > Reading in the admin screens of your new site, and you’ll find a checkbox for hiding your site from search engines:

The WordPress reading settings screen

Check the Discourage search engines from indexing this site box and then click the Save Changes button. This will create a robots.txt file in your site that tells search engines not to index this new site. Don’t worry about that file – WordPress looks after it for you.

Step #3: Set up Your New Site

Now for the fun part! Spend some time getting your new WordPress site ready. Select a theme, add some plugins, create some content, upload images and other media and make it fabulous.

Step #4: Prepare for Live

When your new site is ready to go, it’s time to prepare it to go live. You’ll need to copy a couple of files, edit one of them, and tweak some settings. Let’s take things step by step.

Back up and Delete Your Old Site

First, take a backup of your old site’s files by copying them to your local machine. Your FTP client will let you do this, or you can use File Manager in cPanel.

Once everything has downloaded, delete the old site’s files.

Copying and Editing Two Files

Using FTP or cPanel File Manager, copy (don’t move) two files from the subdirectory where you have WordPress installed to the root directory (i.e. the public_html directory):

  • index.php
  • .htaccess

If you can’t see your .htaccess file, you’ll need to enable hidden files in cPanel or your FTP client. In cPanel, you do this by by returning to the cPanel Home screen, clicking on File Manager and ticking the ‘Show Hidden Files’ box when opening File Manager. Different FTP clients will work differently – look in your program’s help section.

Now open the index.php file that’s in the root directory – the one you just created when you made that copy. Find this line:

Edit it so it reads like this:

Replace subdirectory in my code with the name of your subdirectory. So in my site which I installed at http://rachelmccollin.co.uk/new-site/, my code would read:

Now save that file and close it.

Step #5: Edit Your Site Settings

There are two things you now have to do to make your site live – tell WordPress your new site address, and let search engines index your site.

Editing URL Settings

Go to the Settings > General screen in the admin. You’ll see that there are two fields with URLs in – one for the WordPress address and one for the site address. The WordPress address is where WordPress is installed, while the site address is where people will find your site.

Here’s mine before editing:

general-settings-before

Edit the Site Address field, removing the subdirectory. So instead of reading http://rachelmccollin.co.uk/new-site, mine will read http://rachelmccollin.co.uk.

Save your changes by clicking the Save Changes button.

Allowing Search Engine Access

Remember how before you set up your new site, you hid it from search engines? You mustn’t forget to undo that.

Go to Settings > Reading. Unheck the Discourage search engines from indexing this site box and then click the Save Changes button. Search engines will now start crawling your site.

Note: to speed this up, it’s a good idea to register with Google webmaster tools, and tell Google about your site. Here you can see how often Google is crawling your site and choose to hide parts of it.

Problems?

Sometimes after doing this you try to visit the site and it doesn’t work – you may get too many redirects, or it might go to a 404 page. If that happens, clear your browser cache. Your browser may be remembering the old location of your site and using that in error. Once you’ve done that, things should work. Try checking with another browser and/or device too.

You Needn’t Remove Your Old Site While Setting up WordPress

You may have assumed that in order to set up your lovely new WordPress site, you’ll need to delete your old static site and have nothing while you’re developing the new site. But you now know that isn’t the case. If you follow this guide you can keep your old site running while you develop the new site in the background, and only make it visible to search engines once it’s ready.

Are you migrating to WordPress from a static site? Let us know how you're finding it in the comments!