Migrating your static site to Wake Sites

Introduction

Many faculty and staff are migrating their personal websites to WordPress on Wake Sites, the new recommended hosting environment for departmental and individual websites at Wake Forest.

However, many of us 1) do not want to orphan our old static html pages, 2) do not want to run dual sites on different domains, and 3) do not want to take on converting all our static pages to WordPress. If this sounds like you, this is the page you are looking for.

For a small site …

How many pages do you have? If you only have a couple of dozen, you are better off recreating each page manually in WordPress. For each page you want to move:

  • Create a new page on your WordPress site, choosing the best title and choosing an appropriate Parent page to lend a hierarchical structure.
  • In your browser, open the old page, copy the contents (Ctrl-C), and paste the contents of your old page into the editor your new WordPress page.

When you are done, you can ask Information Systems to redirect your old site to your new site. (See below for instructions.) You will probably have lots of broken links, both internal and external, but if you install the Redirection plugin, you can use it to permanently redirect attempts to access the old pages to their new equivalent. Watch the plugins “404” tab for new broken links.

However, if you have dozens…

… or hundreds of web pages like I do, and you want to migrate them, the above approach is tedious and cumbersome. Please keep reading for a guide on how to move your entire static site to your new Wake Sites domain, right alongside your new WordPress pages.

Your WordPress site: avoid URL conflicts

This page assumes you have already created your WordPress site on sites.wfu.edu. If not, go there first, create your site, and come back, preferably before you have created very many new pages. (See Tips on creating a personal website on sites.wfu.edu.)

Important: avoid WordPress page permalinks that conflict with your existing static pages and pathnames under your existing users.wfu.edu/username. Example: Since I had a directory http://users.wfu.edu/matthews/teaching/, I should NOT create a WordPress page named “teaching”, since both would refer to https://matthews.sites.wfu.edu/teaching once the migration is done.

Tip: I avoid any conflicts between my new WordPress pages and my old static pages by

  • first creating my WordPress Homepage,
  • and then creating a single additional WordPress page that will be the top-level parent page for the rest of the WordPress site.

I used “w”, i.e., matthews.sites.wfu.edu/w, (“w” for WordPress). Check out the URL for this page! But you can name your WordPress parent page anything you want. Keep it short, since it will be in the pathname of any additional WordPress pages you create. As you create new “top level” pages in WordPress, just choose “w” as its parent page. In the above example, that means I could safely place a new teaching page at https://matthews.sites.wfu.edu/w/teaching without conflict with the migrated static page at https://matthews.sites.wfu.edu/teaching.

If you will have a big site, I recommend that you never create a page without a thoughtful choice of a parent page. This is the only way that you can establish the semblance of hierarchy in a WordPress site. Bonus tip: consider shortening the URL slug (last part of the permalink) of each new page before publishing. No reason to have the entire title as part of the permalink.

Just as you should use the common parent page to isolate your new WordPress pages from conflicting with your old static pages, you need to assure that your posts do not conflict. You can take care of this by

  • going to Dashboard > Settings > Permalinks
  • select “Custom structure”, and
  • add “/posts” to the beginning of whatever post naming structure you choose. Example:
    /posts/%category%/%postname%/

Copying your old site

When you created your site on Wake Sites, you should have received an email containing your FTP login information with your FTP account name, password, FTP server address, and port number. You will need those for next steps.

Are you an experienced Dreamweaver user?

If so, just configure Dreamweaver to sync via SFTP with a local folder on your hard drive, click the synchronize button, reconfigure this same local folder to SFTP to your new username.sites.wfu.edu, and click synchronize again. All your pages will now reside on the new site. Caveat: use the “remote view” in Dreamweaver to assure that no existing files or folders on the server will be overwritten with the second synchronization.

For everyone else:

You should have a local copy of your old site. Take note of the location on your computer of the root directory of the site. If do not have a local copy, you can install an FTP program to create a local copy. Setting up an FTP program is simpler than configuring Dreamweaver. Your instructional technologist can help.

Next configure an SFTP program to connect this same folder to your new site username.sites.wfu.edu. WinSCP is a good choice of SFTP for Windows. The following instructions assume you are using WinSCP, but can be adapted to any FTP program.

Configuring WinSCP for your old site

If you do not have a local copy of your old site at users.wfu.edu/username, download and install WinSCP if you do not have it.

  • Launch WinSCP.
  • Choose “New site”.
  • Choose ac.wfu.edu as the host name.
  • Enter your WFU username as the username.
  • Leave password blank, for best security.
  • Choose “SFTP” as file protocol and 22 as the port number.
  • Save.
  • Click Connect.

In WinSCP, you should now see your local file system in the left frame of WinSCP window, with your Wake Sites file system in the right frame.

In the left frame, navigate to the directory to hold your local copy of the root directory of your old site.

In the right frame, navigate to the www-home folder of your ac.wfu.edu account. This is your remote root directory of your new Wake Sites website.

Click and drag every file and folder from your remote root directory (on the right) to your local directory (on the left)

You now have a local copy of your website. Click Session > Save Session as Site. You will now be able to load this configuration in the future.

Configuring WinSCP for your new site

Now that you have a local copy of your website, it is time to move it to your new Wake Sites site at username.sites.wfu.edu.

  • Launch WinSCP.
  • Choose “New site”.
  • Choose username.sites.wfu.edu as the host name, where username is you WFU login name.
  • Enter the remaining login information from the email you received when you created your account.
  • Choose “SFTP” as file protocol and 22 as the port number.
  • Save.
  • Click Connect.

In WinSCP, you should now see your local file system in the left frame of WinSCP window, with your Wake Sites file system in the right frame.

In the left frame, navigate to the local copy of the root directory of your old site.

In the right frame, navigate to */public_html folder of your username.sites.wfu.edu account. This is your remote root directory of your new Wake Sites website.

Click Session > Save Session as Site. You will now be able to load this configuration in the future.

Now you are ready to move files and folders. To move a file or folder:

  • Highlight a file or folder in the left frame.
  • Check to be sure there is no conflicting folder name in the right frame.
  • Click “Upload.” This moves the file or folder to the root directory of the WordPress site. you should see this file or folder appear in the right frame, showing it has been uploaded to your new site.
  • Check to see that your pages are now visible via the web on your new site. You should be able to deduce the URL from the pathname of the folder or file you moved.

Warning 1: be sure you are keeping files and folder at the same level. As long as you are transferring at the root level of each, as described above, this will happen.

Warning 2: Be careful about transferring special files in the home directory such as .htaccess, robots.txt, etc., unless you understand exactly what these are doing. Also, do not move index.html, your old home page. Instead build your new home page in WordPress.

Once you have transferred all your old files and folders you want migrated, all your static pages you moved should now be visible on your new site.

Redirecting your old URL to your new site

Your old pages that you just copied now live two (actually three) places:

  1. username.sites.wfu.edu/pathname. Example: matthews.sites.wfu.edu/teaching.html
  2. users.wfu.edu/username/pathname. Example: users.wfu.edu/matthews/teaching.html.
  3. wfu.edu/~username/pathname. Example: wfu.edu/~matthews/teaching.html. This is an alias for #2.

Many web pages are likely to link to pages of your old site. You want all those potential visitors to find your new site. What’s more, search engines penalize you for duplicate content at two or more URL’s. Therefore you need to redirect your old pages to your new pages. This needs to be done by Information Systems. You may request this be done as follows:

  • Visit AskDEAC (https://help.wfu.edu) You will be prompted to login to your WFU account.
  • Click “Submit a Ticket”
  • Enter the following. (Note: username in all places below refers to your WFU username.)
    • Subject: Redirect old site to Wake Sites.
    • Description: Please create a 301 permanent redirect from my old static sites to my new username.sites.wfu.edu site. These four sites should be redirected:
      • http://users.wfu.edu/username/*
      • https://users.wfu.edu/username/*
      • http://wfu.edu/~username/*
      • https://wfu.edu/~username/*
      • Please confirm that pages under the old domain redirect to their corresponding pages under username.sites.wfu.edu.
    • Urgency: Medium
    • Click Submit

You will be notified by email when the redirects are created. This redirection will avoid most broken links to your old site; they will be redirected to the corresponding page on your new site.

Caveat: #include files

Expert authors of static web pages may have used #include statements to insert common code on lots of web pages. If you have done that in your site at users.wfu.edu/username, your migrated web pages will generate 404 errors for any page using such an #include. To fix this, use WinSCP to create a directory on your new site under public_html named username, e.g., “matthews” in my case. Next, copy the #include file and its containing folder to this location. Example: on my old static site at users.wfu.edu/matthews, I had a file /include/head.html that I included in most of my static pages. On my new site, created a new top level directory under public_html named matthews, and then copied the head.html file to /matthews/include/head.html.

All your pages should now work.

Troubleshooting

  • Spot check that your pages are present at their new URL. Spot check that you can still access them using by typing the old URL’s which should redirect to the new.
  • Install the Redirect plugin on your WordPress site. Under the plugin’s Settings, check the 404 tab. That will show you failed attempts to access pages on your site. This will alert you to pages that did not migrate properly, or perhaps broken links you have had on your site for years.
    • When you find such a link, try to determine the cause. There are always some that are just robots exploring your site, but you should recognize 404 errors that look like attempts to reach genuine pages of yours. Try to figure out what is causing them. If you find the legitimate page, you can redirect to that page.
    • Be aware that on our old static websites, such as users.wfu.edu/matthews, the URL was NOT case-sensitive. On sites.wfu.edu, capitalization matters. As you look at 404’s, the problem may simply be capitalization, and URL’s that worked before migration no longer work.

Getting the most out of your migrated static pages

Your static pages are now functional on your new domain. Since you have gone to the trouble of migrating your old static sites to your new environment, they must have value. If you want to promote these pages, you need to do two more things: make them mobile-friendly and make them easy for search engines to find.

Making your old static pages mobile friendly.

For visitors to derive the most value and for the pages to be highly ranked, they need to be mobile-friendly. To learn how to efficiently retrofit your old pages to make the mobile friendly, see Responsive Web Design: Quick Retrofits. You can check to see if your pages are already mobile-friendly at Mobile Friendly Test.

Search engine optimization

If you want your pages easily found on the web, you need to create a Google-friendly sitemap. Hopefully have have added a plugin to your WordPress site to create a sitemap. That will take care of mapping your WordPress pages. You will need a second sitemap for the static pages you just migrated, since these plugins will ignore the static pages. I hope to have more detailed instructions soon, but here is the short story for now:

  1. Go to a sitemap generator website such as https://www.xml-sitemaps.com/ and create a sitemap.xml for your site.
  2. Open the sitemap with a text editor such as Notepad or Notepad++ to remove sections associated with your WordPress pages. (WordPress pages should be covered by another sitemap dynamically updated by a WordPress plugin.) Save.
  3. Rename to sitemap-static.xml.
  4. Upload to the public_html directory of your username.sites.wfu.edu site.
  5. Go to the Google Search Console and register both this new sitemap and the default sitemap (probably sitemap.xml) created by whatever SEO plugin you use. (See My favorite plug-ins.) If you have never used the Search Console, follow the instructions to create an account and confirm ownership of your site.

You will only need to update this sitemap-static.xml if you add new static pages.

Related pages