Resources For Converting Dynamic Sites to Static Content Suitable For Rendering By Jekyll

     Hi, can anyone give me some pointers to resources meant to help people migrate from hosting their content on a dynamic web site to rendering it with Jekyll? I’m in the process of moving from WordPress.com to GitHub Pages, and would specifically appreciate material on how to convert a WordPress theme into a Jekyll theme beyond what minor mentions I’ve found by searching around with Google. All the reference I’ve seen to going about this just says something along the lines of ‘convert dynamic content to static content’ without explaining how to do that. For the record, I’m looking for assistance meant for people who have little to no experience maintaining server-side PHP code and/or who aren’t familiar with PHP in general, as WordPress themes contain plenty of it in their source and, in all honesty, it looks rather a bit like token soup to me.

There is a one-click WordPress to Jekyll exporter, created by Ben Balter: https://github.com/benbalter/wordpress-to-jekyll-exporter. However, please note that static sites generators are especially popular amongst programmers. Non-programmers are having an harder time understanding how SSG’s work.

there is a plugin for importing posts from WordPress.com :
https://github.com/jekyll/jekyll-import

I have been able to copy someone else’s theme that was not available as a theme by copying the css and then looking at how the different parts were built. I separated the top main nav into one part, the footer into another and the content area into another.

It was a bit of work, but a great learning experience.

I don’t think there is an “easy” way to do it.

1 Like

@rdyer:

     Oh, boy; that should be fun…; guess I’ll just have to grit my teeth and bear it, then. Pity I can’t spare myself the trouble; I’ve had more trouble with projects that look small to start out with, but then end up ballooning in size nearly past all recognition. I may put this on the back burner for now, seeing as that might turn out to be the case with this effort and all; like I said, I’m a complete newb when it comes to PHP, and I’m almost as much of one with respect to web development in general, even just for publishing content. Nothing to do but make time for this in the end, though.

@jhvanderschee:

     That might work if my blog was hosted somewhere other than WordPress.com and/or was willing to spring for the paid upgrade plan that would allow me to install WordPress plug-ins on it, but it isn’t and I’m too stripped for cash to be willing to pay as much as the site wants to vacuum out of my wallet for a whole year of the requisite subscription just for one measly little add-on at the moment.

@Frank:

     I’ve already run a WordPress.com XML data dump through https://github.com/thomasf/exitwp/; it’s just the site theme that I’m struggling with at the moment. (had to manually migrate a draft since that didn’t pick it up, but it was tiny, so it wasn’t too much trouble in the end.)

you shouldn’t need to know php - I just looked at the rendered website and viewed the source to rebuild the way the html worked.

Downloading the css should be easy.

Granted I wanted a simple html/css only framework, so I ignored all the fancy JS stuff that might be in some sort of dropdown mega menu or something. It was actually a great way to learn since I really wanted to do it. I wouldn’t have been able to learn as much without a challenge like this.

2 Likes

I’ll echo @rdyar’s comments. Focus on the end result HTML/CSS and build out your layouts backwards from there. Ignore all the PHP nonsense in Wordpress and look at the rendered HTML to determine the structure.There isn’t much to it once you get a handle on how to name your variables to pull in document content.

Maybe start with a post or page layout first. The tricky layouts are archives/indexes as you need to get a handle on how Liquid for loops work. But in my experience it’s way easier to figure out than navigating the complicated mess that is the loop in Wordpress-land.

2 Likes