Just finished a major redesign of the original Kynosarges website. I might claim its extremely basic old layout was the pinnacle of suave hipster minimalism, except it was actually because I’m clueless about web design. Seeing the pretty weblog here I wanted to have the same look for the static pages on the old website. Yet I didn’t want to rely on a slow and fragile PHP/MySQL contraption for all my content, and besides WordPress doesn’t support my old canonical URLs that all end in .html. On the other hand, the WordPress theme files are too complex to adapt for my existing pages. What to do?
The solution presented itself when I looked at the generated HTML page for one of my WordPress posts, ignoring the obscure mechanism behind it. For all its underlying complexity, WordPress generates fairly clean and simple HTML. I could quite easily replicate the structure in the XSLT transformation that builds my static pages. I kept the class names used for style tagging but left out all the dynamic parts that would require database access or WordPress connectivity, replacing them with static content. Finally, I linked the pages to the same ordinary CSS and JavaScript files used by my WordPress theme, adding just a few rules to handle specialties such as indented paragraphs without spacing.
Painless Update (mostly)
The whole procedure was surprisingly painless and took less than two days. Indeed, a good part of that time was spent on figuring out when each page had originally been created, as I had foolishly kept only the last modification dates. To find the first publications of older pages I had to go spelunking in my project histories and the Wayback Machine’s search robot records. I think they’re all fairly accurate now, including the very first page I ever put on the Internet. (It’s for a silly strategy game, of course.)
Website and weblog are now both presented in the same pretty responsive package. There’s a single combined About page, and the website got the nice Twitter timeline. Happily, the invaluable table scrolling trick still works, and the recent novelties are present as well. The CSS fly-out menus were replaced with JavaScript-powered drop-down menus, though. I tried to fix all page content that needed adjustment for the new layout – do let me know if anything doesn’t quite work yet.
One known problem can’t be fixed until Google fixes its browser. Surprisingly, Chrome is the only modern browser left that doesn’t support automatic hyphenation, meaning my justified text layout sometimes causes excessively spaced characters and words. I tried to ameliorate the worst cases by sprinkling soft hyphens (­ U+00AD) throughout long directory names and the like, but ultimately Google needs to wake up and add this badly needed feature.
Static WordPress (sort of)
Building static sites with WordPress is indeed possible but works much like the old sculptor joke: take a block of marble and chop off everything that doesn’t look like a horse. I essentially took a dynamic WordPress site and threw away all the dynamic parts…
- Build a regular dynamic WordPress site, tweaking the style until you’re happy.
- Save a generated HTML page. Adopt the structure and class names in your static pages.
- Link your static pages to the original WordPress theme files (CSS with some JS support).
- Replace any dynamic widgets with static or non-WordPress equivalents.
- Behold the Frankensite – static pages with a WordPress theme!
Static sites don’t need to lack all dynamic functionality, of course. I’ve integrated Disqus comments and my Twitter timeline, for example. You just can’t use any dynamic features provided by WordPress, as that system expects all content to come from its databases. You can only use those WordPress features (specifically layout and styling) that apply to an HTML page after WordPress would have assembled it from database contents.