Dan Robinson
EF5
Have you let your old web site expire and would like to get it back? It's easier and cheaper than you think. For most of you, you might be able to do this with only a couple of evenings or Saturdays of work! Don't be intimidated if you had a huge, complex site. Start "basic" to just get your best/core work online, and add complexity later. Register a domain for 10-20 bucks, then ten bucks a month should get you a good hosting plan for it.
Search engines and users today like good content and a clean look, not necessarily complex or flashy designs. A one-column site with text and pictures is perfectly fine - that's going to be SEO and user friendly, which is what you want with today's web. Remember that more than half of your traffic will come from tablets and phones!
CMS and gallery systems
If you don't want to deal with html and just want to get a photo gallery back online, a simple route is to use a service like Zenfolio, Wix or Smugmug. With these, you can register a domain name and point it to that account, and use their systems to manage the site. With the ZF and SM gallery sites, you have the added bonus of being able to sell prints. You can use Archive.org's Wayback Machine to retrieve old chase accounts to go with the images so you won't need to retype things from memory. Don't forget, you can use Stormtrack to host your (reasonably sized) gallery!
Restoring an old site
Step 1: Download and install necessary software
These are shareware apps that have the functionality you'll need. This is not a paid endorsement or anything like that, just the ones I've used:
Step 2: Retrieve your site from archive.org's Wayback Machine
Step 3: Remove the archive.org path in the hyperlinks and image tags
Use the find and replace software to remove archive.org's code from the page's links and image calls. Each link and image tag will have URLs like this:
Simply put the "/web/20011031051442/" (the exact code will be different than this, just copy what's there in your pages) into the find-and-replace software and leave the "replace with" field blank. This will remove all instances of the archive.org code and make your site work on a web server again. If your old domain is no longer available, you can use the find-and-replace software to change everything to your new one.
Step 4: Make your site mobile-friendly
The easiest way to make your site mobile-friendly is to move to a single-column layout with navigation links at the top and bottom of each page. Again, use the find-and-replace app if all of the code is the same at the top and bottom of your pages.
a.) IMPORTANT: Add this Meta tag code somewhere within the header (<head></head>) tags at the top of the page. This has to be there or else the adaptive styles below won't work on phones or tablets.
b.) Wrap your page content in an "adaptive" div or table with this code (change 1000px to whatever pixel size you want your site to be on a desktop computer):
OR
c.) Add adaptive code to all of your images:
Change 700 to whatever the actual width of the full-size image is. This makes all images scale down to any screen size.
Make sure that ALL images on the page have this adaptive code, otherwise the page won't scale down on smaller screens.
Step 5: Upload the files
Use the FTP software to upload your files. If you had an old site, you probably are familiar with this already.
Search engines and users today like good content and a clean look, not necessarily complex or flashy designs. A one-column site with text and pictures is perfectly fine - that's going to be SEO and user friendly, which is what you want with today's web. Remember that more than half of your traffic will come from tablets and phones!
CMS and gallery systems
If you don't want to deal with html and just want to get a photo gallery back online, a simple route is to use a service like Zenfolio, Wix or Smugmug. With these, you can register a domain name and point it to that account, and use their systems to manage the site. With the ZF and SM gallery sites, you have the added bonus of being able to sell prints. You can use Archive.org's Wayback Machine to retrieve old chase accounts to go with the images so you won't need to retype things from memory. Don't forget, you can use Stormtrack to host your (reasonably sized) gallery!
Restoring an old site
Step 1: Download and install necessary software
These are shareware apps that have the functionality you'll need. This is not a paid endorsement or anything like that, just the ones I've used:
- TextPad: Good way to edit your html code.
- Advanced Find and Replace: This allows you to make global changes in the html code on every page of your site, without having to open every page and do it manually.
- WinSCP FTP: For uploading your files to your web server
Step 2: Retrieve your site from archive.org's Wayback Machine
- a.) Make a folder on your computer for your old site.
- b.) Go to http://archive.org
- c.) The Wayback Machine likely has your entire site saved. You can choose which date/edition of your site to retrieve. Simply enter your old URL into the field, choose the date, and volia, each page of your old site can then be saved by choosing File > Save for each page!
- d.) You may have to "right click > save as" individual images on each page if you don't have those backed up anywhere.
Step 3: Remove the archive.org path in the hyperlinks and image tags
Use the find and replace software to remove archive.org's code from the page's links and image calls. Each link and image tag will have URLs like this:
/web/20011031051442/http://mysite.com/page.htm
Simply put the "/web/20011031051442/" (the exact code will be different than this, just copy what's there in your pages) into the find-and-replace software and leave the "replace with" field blank. This will remove all instances of the archive.org code and make your site work on a web server again. If your old domain is no longer available, you can use the find-and-replace software to change everything to your new one.
Step 4: Make your site mobile-friendly
The easiest way to make your site mobile-friendly is to move to a single-column layout with navigation links at the top and bottom of each page. Again, use the find-and-replace app if all of the code is the same at the top and bottom of your pages.
a.) IMPORTANT: Add this Meta tag code somewhere within the header (<head></head>) tags at the top of the page. This has to be there or else the adaptive styles below won't work on phones or tablets.
<meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0">
b.) Wrap your page content in an "adaptive" div or table with this code (change 1000px to whatever pixel size you want your site to be on a desktop computer):
<center><table border=0 cellpadding=10 cellspacing=0>
<tr>
<td style="width:100%; max-width:1000px;">
Your page's content
</td>
</tr>
</table></center>
OR
<center><div style="width:100%; max-width:1000px; padding:10px;">
Your page's content
</div></center>
c.) Add adaptive code to all of your images:
<img src="my-picture.jpg" style="width:100%; max-width:700px;">
Change 700 to whatever the actual width of the full-size image is. This makes all images scale down to any screen size.
Make sure that ALL images on the page have this adaptive code, otherwise the page won't scale down on smaller screens.
Step 5: Upload the files
Use the FTP software to upload your files. If you had an old site, you probably are familiar with this already.
Last edited: