Flattening a PHP build into HTML – ns-flatten

By North Street, A Creative Studio

Often times, we’ll have a project that needs to be delivered as flat html, but it’s quicker and more efficient to code it as a php build using php includes. When it comes times to deliver, we need a way to “flatten” the build back into html.

Here’s the quick and dirty way to pull off this magic.

  1. Name all your files, including php included files, as *.html
  2. Add this to your .htaccess so that your server will still parse your html files as php:
    AddType application/x-httpd-php .html .htm
  3. What’s that? You already started your build and your files are named with *.php extensions? Here’s a magical terminal script that will rename all *.php files to *.html, recursively.
    find . -name "*.php" | while read i; do mv "$i" "${i%.php}.html"; done

    (Note: You’ll still have to change all href references in your code from *.php to *.html. The easiest way to handle that is to load all the files into Sublime, then do a global find & replace across all open files.)

  4. OK, Now you code is running and *looks* like flat html, but how do you export it? With wget! Open terminal, and navigate to the folder where you want to “export” your website to, then plop this in. Make sure to change the SERVERNAME accordingly.
    wget --no-clobber --convert-links -r -p -E -e robots=off -U mozilla http://ns.SERVERNAME.dev:2326/
    
  5. This method should download most of the required assets, but it may skip over images found within CSS files, and possibly miss javascript files. The safest thing to do would is to copy over all your non-html assets from your build, but use the downloaded HTML files from wget.

EDIT: I’ve taken the ideas above and instead made this into a shell script to automate the process. I present:

ns-flatten

This script takes php files in a the given directory, renames then to html, removes all references to php and then uses wget to flatten the files. Then it cleans it all up.

Requirements

You’ll need wget installed.

You can install it via this link:
http://osxdaily.com/2012/05/22/install-wget-mac-os-x/

Or if you have Homebrew installed, using the following command:

brew install wget --with-libressl

Installation

1. Clone the following repo:

`git clone https://bitbucket.org/northstreetcreative/ns-flatten.git`

2. Open up your “~/.bash_profile” and add an alias to the location of the script file

alias ns-flatten='bash /LOCATION_OF_REPO/ns-flatten/ns-flatten.sh'

3. Save & Close. Restart terminal.

Usage

1. In terminal, cd into the folder you want to flatten.

2. Type “ns-flatten” to start the process

3. Once it begins, it will pause while the webserver starts. Just hit enter.

4. …and you’re done.

Todo

Currently, on “cleanup”, the following development files are removed:

  • localhost:8888
  • parts
  • router.php
  • .git
  • sass
  • config.codekit
  • style.css.map

Would be great to add the ability to specify more dev files to remove.

About north street

We engineer the thoughtful transformation of great organizations. Our proven process helps us understand what your competitors are doing right — and wrong. Want to learn more? Let’s chat.

More Notes

London Biedron Header

Team Spotlight: London Biedron, Client Development Specialist

Rebrand

How to Roll Out a Rebrand

12 Mood Boards to Inspire Your Rebrand