HTMLtoJekyll: from a folder of HTML to a site you can edit

Every HTML template looks finished… until somebody has to change the footer.

Then you find out the footer is pasted into every page. So is the nav. So is the header, and the meta tags, and the scripts at the bottom. One change becomes thirty, and the client who wanted to update their own hours is emailing you to do it.

I’ve built dozens of Jekyll sites for clients, and almost every one started with the same first step: take a static HTML design apart and rebuild it as a real Jekyll project. It’s not hard work. It’s slow, repetitive work, which is worse. So I built HTMLtoJekyll, a converter that turns HTML into Jekyll, to do it for me.

What does it actually do?

You give it HTML. It gives you back a project a Jekyll developer would recognize.

There are two ways in. Upload a ZIP of your HTML files, or paste the URL of a live site and it crawls the public pages and downloads the assets. Then it goes to work:

• Layouts and includes. It compares every page to find the shared regions, like headers, footers, sidebars and nav, and lifts them into _layouts and _includes. A change happens in one place, not a hundred.
• Front matter. Titles, dates and metadata are pulled out of your markup and written as clean YAML front matter.
• Collections. Repeating page types, like blog posts, docs and product listings, become collections you can loop over with Liquid.
• Assets and links. Images, CSS and JavaScript move into the right folders, and links are rewritten with relative_url so the site works at any base path.
• CloudCannon. It generates a cloudcannon.config.yml and marks editable regions, so the people who write the content can edit it visually.
• A build check. Every export is test-built with jekyll build, so you get a project that runs on the first try.

The features page has the full list, including ZIP uploads up to 2 GB.

Who is it for?

Freelancers and agencies who start client sites from HTML templates. This is the job it was built for, and it’s part of my standard workflow now.

Anyone stuck with a hand-built site. If your site is a folder of HTML files and every edit means opening all of them, a conversion turns it into something you can actually maintain.

Anyone handing a site to a client. This is where the CloudCannon setup earns its place. Editors get a visual interface. Developers keep clean, version-controlled Jekyll. Every edit is a Git commit. This site works the same way.

Where does Website Sucker fit?

If the site you want to convert is live but you don’t have the files, HTMLtoJekyll can crawl the URL directly. You don’t always need anything else.

But if you want a copy of the original before anything changes, back it up first. Website Sucker downloads a public site as an offline ZIP, and I wrote about it in Website Sucker: take the whole site with you.

What does it cost?

Your first conversion is free, and no credit card is required. One conversion is one ZIP upload or one URL crawl, processed into a complete Jekyll project.

After that, buy credits or subscribe:

• 1 credit, $19. For a one-off project.
• 5 credits, $69. Or 10 credits, $119. Credits never expire.
• Starter, $19 a month. Three conversions a month.
• Agency, $79 a month. Unlimited conversions and priority processing.

Subscriptions cancel anytime, and you keep any credits you have left. And you’re not charged for a failed job. The pricing page has the details.

What will it not do?

It’s a conversion, not a redesign. Give it a messy template and you get a well-organized version of the same template. The design is still yours to fix.

It doesn’t replace knowing Jekyll. The output is clean and it builds, but somebody still has to own the project after that.

It keeps what it finds. Interactive elements are preserved as they are. That’s the right default… and it also means whatever JavaScript the template shipped with comes along for the ride.

Getting started

The quick start guide covers it in four steps:

1. Open the converter and choose a file upload or a URL.
2. Provide your HTML. A ZIP, a single HTML file, or a public address.
3. Set the basics. Site title, description and a few options. Sensible defaults are already filled in.
4. Convert and download the ZIP of your Jekyll site.

Then run bundle install && bundle exec jekyll serve and preview it locally.

From there, the docs pick up where the converter stops. Understanding your Jekyll export explains what each folder does. Deploying and editing with CloudCannon covers publishing it and handing editing over to a client. If something breaks, start with troubleshooting. For the longer read, there’s the HTML to Jekyll migration guide.

And if the site needs to sell something once it’s in Jekyll, AnyCart adds a cart with one script tag. That’s in AnyCart: a cart for the website you already have.

The short version

A template is a design. A Jekyll project is a site somebody can maintain. HTMLtoJekyll turns the first into the second in minutes instead of hours, and the first conversion is free.

The HTMLtoJekyll project write-up has the background. And if yall would rather hand off the whole job, the conversion, the cleanup, the CloudCannon setup and the launch, that’s what I do. Send it through the contact form. I’d love to help.