There are a lot of reasons to use WordPress, especially as a designer. But how do migrating your static site your content into the CMS?
Let’s say you’ve already got an established website coded in static HTML, but you want to migrating your static site it to WordPress.
There are plenty of reasons why this is something worth doing, after all – easier management of your content, for one, and greater freedom where design customization is concerned. Better yet, with the right tools, it’s actually a relatively painless process.
Let’s talk about what you need to do for it.
Before You Begin
First thing’s first, you’ll need to make sure you’ve the proper tools. There are only two pieces of software you’ll really need for this process. One of them’s freeware, the other’s a plugin:
- HTTrack: This utility allows you to download your entire website in static HTML format. This allows you to easily import it to WordPress.
- HTML Import 2: This WordPress plugin is designed to migrating your static site into a WordPress installation, allowing them to be managed through the CMS.
Once you’ve downloaded both – and before you actually start the transfer process – there are a few questions you need to ask yourself (courtesy of Smashing Magazine):
- How much content needs to be imported (number of pages, number of images, etc.)?
- Can the content be categorized into the standard “posts” and “pages,” or does it call for custom post types?
- Does extra content need to be stored for certain pages (custom fields, taxonomies, etc.)?
- Will the URL structure change? If so, will the old URLs need to be redirected?
- Does the old website integrate any third-party services (data collection, reservations, etc.)?
- Do any forms need to be migrated (contact forms, application forms, etc.)?
- Is access to any content restricted (such as members-only content)?
- Does the website sell products (digital or physical)?
- Do any administrative tools need to be carried over?
Step One: HTTrack
First, you’re going to want to open up HTTrack. While you can run it from the command line, I’d recommend the graphical user interface for simplicity’s sake.
You shouldn’t need all that much guidance for this phase – since you’re importing an HTML site without any dynamic elements, you can simply download it (you’d have to use the “mirror” option if it contained dynamic elements).
How long this takes depends mostly on how large your site is. Go grab yourself a coffee or make a sandwich, and it should be done by the time you get back. By then, you should have a folder that contains everything on your site in static HTML format.
Now, you’re ready to transfer it over to WordPress.
Step Two: The Import Process
Note: It’s EXTREMELY important that for this stage, you’re working with a fresh installation of WordPress. Otherwise, you could be dealing with a chaotic sitemap and duplicate pages, if the process doesn’t fail outright.
Open HTML Import 2. Now, here’s where things get a little complicated. You need to instruct the plugin on how to recognize the content on your site that you want to import (and ignore the content that you don’t). Look for common HTML tags surrounding your content for example
<code><div ID=”Web”></div></code>
Those’ll be your identifiers.
Once you’ve figured out how to import the stuff you need, start the process. Before too much longer, you’ll have everything up and running.
Step Three: The Follow-Up
With the tough steps out of the way, all that’s left is beautification and follow-up work. In no particular order, here’s what you’re going to need to do:
- Redirect visitors from your old site to the new one (HTML Import 2 provides a list of Apache redirects to allow you to do this).
- Modify the design template of your old site into a WordPress theme – though it may be easier to simply come up with a new design altogether.
- Make sure everything you wanted to import is present on your new site.
And that’s pretty much it! You’ve now got a fully-functional, easy-to-manage WordPress site. Pretty cool, right?