How can I demo a WordPress site with no internet connection?

June 22, 2010 1:08 PM

How can I create a static version of a WordPress website that runs on a laptop without internet access?

I built a WordPress site to accompany a product. The sales managers are demoing it to potential advertisers on Friday, but they're concerned that they may not be able to get online. They will have a wireless card, but they're still worried about connectivity.

"Can't you put it on a flash drive?" was the actual question. They're not techie people so I don't want to go into installing Apache on the presentation laptop and getting them to start up the service, etc. I won't be on the calls.

As a last resort, I suppose I can do a "Save as HTML" from the browser for a few pages, tell them to only click on certain links and be done with it. But surely there's a better way...right?

posted by ladygypsy to computers & internet (15 answers total)

If this is a mac laptop in question, you could install MAMP, which runs wordpress fine. It's just a program, so it's very easy to tell a non-techie like, click on this icon, then these buttons.
posted by shownomercy at 1:10 PM on June 22, 2010

Inspyder Web2Disk does a good job of ripping dynamic websites to static ones. As an alternative install WAMP if you're on a windows machine. Works just as well.
posted by pyro979 at 1:22 PM on June 22, 2010

Something like Portable XAMPP, maybe?
(XAMPP = easy to install apache+mysql+php+python stack)
posted by unmake at 1:27 PM on June 22, 2010 [1 favorite]

If your Wordpress site is static, you can use a website copier like HTTrack to copy it to a bunch of static files that can be put on the laptop. The sales people can then open a file through their browser, and things should work as they expect it to work.

If it's not a static site, you probably are going to need to run a WAMP/MAMP stack on those laptops.

I suppose one other option is to record the interaction as a video file that they salesfolks can play using screen recording software like Cam Studio. That's not particularly interactive, either, and presumes a set script that the salesfolks can't deviate from, but it might allow you to show some dynamic aspects of the website (e.g., create a user account) which can't be replicated with something like HTTrack output.
posted by chengjih at 1:28 PM on June 22, 2010

Guys, please read the question: he specifically ruled out installing Apache.

You can use wget with mirroring and recursive options and it will create a static copy of the site on disk. wget will even convert the links to references to the local files if instructed (-k) so internal links should all work. Just make sure to limit the recursion to the site's domain only.
posted by Rhomboid at 1:29 PM on June 22, 2010

The Comparison of WAMPs lists a number of other portable webserver options.
posted by unmake at 1:30 PM on June 22, 2010

Second installing HTTrack. It'll turn a database driven Wordpress site into a static site.
posted by backwards guitar at 1:31 PM on June 22, 2010

Guys, please read the question: he she (ftfy) specifically ruled out installing Apache.

But dropping MAMP on a Mac is not like "installing Apache," although technically it does install Apache (and MySQL and phpMyAdmin too). The point is, installing it is just as easy as installing any other Mac app, and once you do, starting Apache, MySQL, and phpMyAdmin takes literally one click in the very simple GUI.

Drop your Wordpress files in MAMPs htdocs folder, configure your database connections, and away you go.
posted by bricoleur at 1:56 PM on June 22, 2010

Thanks for the suggestions so far! It's a PC laptop that they'll be using.
posted by ladygypsy at 1:56 PM on June 22, 2010

You could also reproduce your production environment inside a VM using virtualization software like VMWare or VirtualBox. You can set it up so that the VM just shows up as just another machine on a virtual network. This way, you can just create one virtual machine image to give to anybody that needs to demo the site. If you set it up right, your sales people will just have to hit the "play" button on the VM and then open a bookmark pointing to the virtual machine's virtual network address.
posted by strangecargo at 2:01 PM on June 22, 2010

I would definitely use XAMPP Portable or MAMP.

You would need to set up the database using phpMyAdmin to be a clone of the one on the website. Then you would need to copy all the WordPress files and other HTML bits and bobs into a local folder withing XAMPP/MAMP.

The only vaguely tricky part would be editing the hosts file on the presenter's laptop to create a fake domain name (like "www.companyname.test"), but even that would take no more than a minute in Notepad or whatever. You could definitely walk a non-techie through it as long as they know the administrator password on the computer.

Then you just edit the local copy of WordPress so it thinks it lives on companyname.test rather than companyname.com, and you're good to go.
posted by bcwinters at 3:39 PM on June 22, 2010

If it's a demo, does it really need to be live? Make a series of screencasts as demos and let them just play those instead. Screenr lets you make 5 minute videos of anything in your browser and download them, no logos, no internet required.
posted by Hildegarde at 3:50 PM on June 22, 2010

I don't think the hosts editing bcwinters mentions is strictly necessary - localhost or 127.0.0.1 should suffice (as long as wordpress is configured to work on localhost). Once something like this is setup properly, all the non-techie people will need to do is click one icon to start the stack, and click another (internet shortcut) to open up localhost, or whatever.

It looks like Server2Go takes it a step further and reduces this to a single (double) click.
posted by unmake at 4:32 PM on June 22, 2010

If you go the WAMP+flash drive route, you might like MoWeS Portable, which is a free version of MoWeS (Modular Webserver System). On Windows machines I found it simpler to get working "out of the box" compared to XAMPP, but it's been a couple of years since I've tried XAMPP.

When downloading from the site, you use what's called the "MoWeS Mixer" to choose the software you need (Apache, MySQL and PHP of course, and you can also add phpMyAdmin and WordPress) to build a custom package to download. Save it to the flash drive and then just run mowes.exe. The first run will install all of the software you chose, and upon successful completion there'll be a server status window showing that Apache and MySQL are active. Then just set everything up as you need (and as unmake above says, configure your WordPress database/settings to use localhost or 127.0.0.1 for the blog and installation path).
posted by rangefinder 1.4 at 12:25 AM on June 23, 2010

I ended up going with HTTrack and it worked like a charm. I just had to tweak some of the flash elements so that they called back to the local files. I put a shortcut on the desktop to index.html and named it CLICK HERE FOR DEMO SITE (as requested) and set it up so it'll open in Firefox to avoid the pesky IE security alert bar.

Screenr looked great too, but I was wary about linking it up to my Twitter account and not being able to keep the demo private. But I think that'll come in very handy for one of my personal blogs!

And I'm going to play with XAMPP at home tonight.

Now, fingers crossed that the demo sells so everyone else but me can get a bonus. ;)

Thanks for all the suggestions!
posted by ladygypsy at 8:31 AM on June 23, 2010