Skip to main content

Static EE: When a Static Site Meets Expression Engine

03-31-14 Rob Tarr

Rob shares the story of how we made our Expression Engine blog live happily inside a static site—and the secret sauce that makes it work.

We recently launched our new website, there’s a good chance you’re using it right now to read this article. One of the discussions we had when we started talking about the architecture and technology for the new site, was what to do with the blog. We knew that we wanted the site to be as fast as possible, which was one of the driving factors in making most of the site static pages. However, we also have three years of blog content in Expression Engine (which is what the entire old site sat on top of). This is our story of making the Expression Engine blog live happily inside a static site.

The Setup

It’s no big secret that we use GruntJS and Assemble for our build system. So, using the same process that we use for generating static templates for all our projects, we built out the static pages for sparkbox.com. We then had to remove all the non-blog content from Expression Engine—stripping it down to just what we needed moving forward.

Integrating

One of our first efforts was to use a git sub-module to include the foundry inside the static site GitHub repo. This was a painful experience, so we threw it out the window. Instead, we took the following approach with our folder structure:

  • foundry

    • all the EE files

  • static

    • dist <- this is the generated static site

    • src files...

When Grunt runs, it compiles everything that it needs from inside the static folder and generates the static site inside the dist folder. This is the folder that our server points to in order to serve the site.

Templates

I was also concerned about keeping the header and footer templates in sync between the static pages and the Foundry. So, when Grunt compiles the static pages, it also generates header and footer templates with the appropriate Expression Engine tags for the Foundry pages and saves them into the foundry folder.

Secret Sauce

The secret sauce to getting at EE lies in a symlink. So, if you were to peek inside the dist folder, you would find:

  foundry -> ../../foundry

This just means that if you try to access /static/dist/foundry, what you would actually be getting is /foundry. This allows us to have EE feel like an integrated part of our site, at the URL that we want, yet it still exists separately for development purposes.

The Future

This was our quick solution. It’s not completely refined, but it allowed us to get our new site up without a huge effort of converting the foundry articles. It gave us a site that is fast (that was a requirement for us) by eliminating all the database calls for pages that are mostly static.

There are certainly other possible solutions. It’s possible that someday the Foundry will exist as a set of generated blog posts (we’re working on a plan for that). But for today, this gave us the ability to get the new site up quickly with the existing content in place.

Just keep iterating.

Related Content

User-Centered Thinking: 7 Things to Consider and a Free Guide

Want the benefits of UX but not sure where to start? Grab our guide to evaluate your needs, earn buy-in, and get hiring tips.

More Details

See Everything In

Want to talk about how we can work together?

Katie can help

A portrait of Vice President of Business Development, Katie Jennings.

Katie Jennings

Vice President of Business Development