When a lot of small businesses or organizations start out looking for a website, very often they end up with a custom coded static website. The limitations of a static website soon present themselves and then small businesses or organizations look for other options.
One of the limitations of a static website is that when you, as the website owner, want to make any changes to the website, you have to go out and hire a programmer to do just that. Meaning that if your phone number changes, you’re looking at a fee to make those minor changes on your website. If you haven’t already got a WordPress website, you might be wondering how to move from a static HTML website to WordPress.
Before we begin, note that the process below applies to websites that are static HTML sites and not for those moving from a different CMS (like Blogger, TypePad, Drupal, Joomla, etc.) to WordPress. If your site is a collection of .html or .htm documents, then the following will apply to you.
(Image Credit: Alden Jewell)
A Static Site to WordPress Overview
There are a few stages of this process. Before you get stated, below is a complete overview of the entire process. As you can see, the process isn’t really that complicated and it should be something that someone with basic technology skills could do on their own. That said, don’t be scared to look for help.
- Make sure WordPress will run on your current web host.
- Map out your original site’s current structure.
- Create a temporary sub domain.
- Backup and move original site to a temporary location.
- Install WordPress.
- Reconstruct orignal site structure.
- Redirect your old URLs to new locations.
- Add a blog.
- Cleanup installation
Just remember to take your time and work through everything systematically.
Most web hosts (that are worth using) will have some type of automatic WordPress installation process. Later when you go to install WordPress, this should only take you a few minutes to complete.
By some chance your web host does not have an auto installer for you, you should choose a web host that is more user friendly. From what I have seen, if your web host does not have an auto installer then that is a good indication that they are not capable of running WordPress.
WordPress requires certain server technologies in order to run. If your web host doesn’t have those capabilities then you won’t even be able to install WordPress on your own.
Some web hosts are capable of running WordPress but they won’t install it for you. This means that you will be able to install it on your own but it is a more involved process. If you’re doing this for the first them then you are better off with a host that will install WordPress for you.
You Need a Map, GPS Won’t Work
The first thing that you are going to need to do is create site map of your existing website. Make notes and take screenshots of every page on your site and how they are linked together.
You want to make sure that all of the original web addresses are recorded exactly like they are on your existing website. This is so that you can reconstruct your entire website within WordPress when you are ready to do so. Note the entire URL string, for example, http://www.YourDomain.com/PageName/SubPageName. The URL structure is important to ensure that all of the current links coming into your site stay active. Any changes or deletions that you make probably will effect your traffic and your search rankings.
Take notes on the sidebars (if you have any) and any of the content in them. Do you have social sharing buttons, email opt-in forms, product descriptions or links, etc.? All of this should be noted. Again, screenshots are probably the most effective way of doing this.
Calling in a Sub
Create a temporary subdomain so that you can have a temporary location for your website so that it won’t be completely offline during your WordPress migration. A subdomain is basically a domain within a domain. This could be something like http://SubDomain.YourDomain.com/.
This can usually be done from within your web host control panel. Take a look through your control panel and if you can’t figure out how to do it on your own, contact your web host’s support staff and they will probably be able to help you add the subdomain.
For example, create a new subdomain called “old” that you will delete after your move to WordPress is over. This will give you a domain like this http://old.YourDomain.com/. It’s a little ugly but it’s only temporary.
You are going to have to move your existing site to a temporary location if you want to keep it in working order until the new site is up and running. One thing that is good about older style HTML sites is that they can easily be moved. However, make sure that you create a complete backup of your existing site before you begin.
Backing up a static HTML site is simple. Launch your favourite FTP application and download all of the files from your site to your computer. If something goes wrong, you have a copy to fall back on.
After you have backed up your site, use an FTP program to copy (not move) your existing website to the new subdomain. This means that there will be two copies of your site. One that you will find by going to http://www.YourDomain.com/ and one that you will find at http://old.YourDomain.com/. There is actually a third that you have backed up. You backed up, right?
The only problem that you may have when moving an existing site is interlinking between the existing pages. If your existing site is setup to link to existing pages using absolute paths then your are going to have to change your links. If they are using relative paths, you should be good.
A relative path means that a developer isn’t linking to existing pages using the full URL structure, so the link often looks like /page1.html/ instead of http://www.YourDomain.com/page1.html/. The latter URL structure is an absolute path.
If you understand HTML code, you should be able to open up your website’s pages in an HTML editor and look at the links. (You might need some help with this part if you don’t know your way around HTML code.) If they show the full URL then you are going to have to change those. Change these to a relative structure. This means that you should be able to delete the http://www.YourDomain.com/ part of the URL from all of your links.
After you have made all of the required changes, carefully go through all of your interlinked pages and ensure that all of your links have been changed. Be sure they are linking to the pages in your subdomain and not the pages in their original location. Pay attention to the address bar when clicking links.
Before you install WordPress, go through your original website’s root directory and delete everything. Don’t worry, you still have a backup of your original site and a copy in the subdomain.
Note that after you delete your original website, your visitors will not know where to go until after WordPress has been installed. So do that immediately after you have deleted your original site.
Quickly log into your web host and install WordPress. This should only take a few minutes to complete. Do the initial setup and install a WordPress plugin called Maintenance Mode by Michael WÃ¶hrer
After you have installed and activated the WordPress Maintenance Mode plugin, you will need to also activate it in the plugin’s settings. The Maintenance Mode plugin will create a landing page on your website that all your visitors will see. You will also be able to include a countdown to the launch of your new site if you wish.
All incoming links will be redirected to the landing page so they will not receive the dreaded 404 error. You will also be able to customize your landing pages with your own text. This gives you the opportunity to add a link to the temporary site location and a message explaining that you will soon be launching a new and improved site.
You can use something like:
Welcome to Acme Widgets! We are currently in the process of building a brand new site for you to enjoy. However, it is going to take a bit of time to complete. In the mean time, you can still use our old site. Click here to view it.
As a logged in administrator, you will see the site as it will be seen by your visitors. This gives you the chance to work on the site without all of your visitors seeing the site in an unfinished state.
Go through and complete the setup of WordPress like you would for any other purpose. If this is the first time that you have setup WordPress, you might want to look into my online WordPress course.
You Can Rebuild It. You Have the Technology.
Now that you have setup and installed WordPress, it’s time to rebuild your original site. You might be able to find a WordPress theme that closely resembles your original site. There is also the option to hire a developer to build a theme that looks like your original site. I’d recommend using the new Headway 3.0 theme since you should be able to recreate your existing theme with the revamped visual editor. I love the Headway theme, it’s slick!
Take a look at those screenshots and your notes. Go into the widget manager and create your sidebars to look similar to what you had before. This is also your opportunity to add or remove any information that you have be dying to change in your sidebars.
Take your list of pages and go into the pages section of WordPress. Create a new page for every page that existed on your website previously. Give your pages nice descriptive titles and don’t worry about what the pages were called or what their URLs were before. Rebuild the content on every page as it was on the original site.
You will be able to go back-and-forth between your original site at your subdomain and copy-and-paste the text into the new pages. Upload images into WordPress using the WordPress media manager. Don’t link to the images in your subdomain since we are going to remove the subdomain later on.
When you created your new pages, WordPress created new URLs for these pages. WordPress calls these permalinks. If you are happy with the WordPress URLs then leave them alone. If you want to modify them then go ahead and do that now. Don’t worry what your old URLs were on your original site.
Between the title input field and the content input filed in the page editor of WordPress you will see the permalink of the page. You can click the “edit” button next to the permalink if you need to change the URL to something more suitable. Make a note of all the URLs of the new pages.
With Simple 301 Redirects by Scott NellÃ© you can create a search engine friendly redirect called a 301 redirect. This means that all incoming links will be redirected to the new location and all the previous search engine weight will also be directed to the new location. Follow the example in the plugin’s settings and input your old URLs in the first input field and the new URLs in the second input field.
After you have gone through and added in all of your old page URLs to redirect to your new page URLs, you’re all set.
Since your original website was a static website, you probably didn’t have a blog. Now is the opportunity to add one. This is a built in feature of WordPress so all you need to do is start adding your posts and you should be all set.
You’ll also need to add a link to your blog if you don’t want to have your blog on the home page of your site. Create a new page with the title “blog” without any other content on it. Publish that page and link to it in your navigation. Depending on your theme, most of the time it will create a page with your blog posts on it.
In the reading settings for WordPress, be sure to change the “Front page displays” options. Set the page that you want as your home page in the “Front page” drop down and set the blog page under “Posts page”.
It’s up to you whether or not you want to add a blog. I still find it odd how many people tell me that they don’t want a blog on their website when we first start working together. However, after they have learned about the benefits of content marketing, they decided that regularly publishing articles to their websites is a good strategy.
Break Out the Brooms
Your website should be well on its way to completion at this point. Turn off the maintenance mode plugin and log out of your WordPress dashboard. You should now be seeing your site as a non-logged in visitor.
Click through the whole site and make sure all of the links work and that the website is behaving as it should. Manually type in the old URLs from your original website into the address bar of your browser. Make sure that they all redirect to the new pages on your WordPress website. If not, go back and double check the settings for the Simple 301 Redirect plugin.
After you have decided that your website is in working order, you can delete your old temporary site. You can use an FTP program to delete all of the files in the subdomain first but deleting the subdomain from your web host control panel should also delete every trace of the subdomain.
That’s it! You’re new WordPress website should be up and running now. The old site has been removed and all of the old URLs should redirect to the new URLs. The content from your old website should all be on your new website. You can start adding new content to your website and modifying existing content whenever your feel the need. Congratulations!
Have you ever had to move a static site to WordPress? How did it turn out?