Automatic Webflow to Jamstack Converter

tl;dr

• Webflow is an awesome tool for quickly building websites
• Jamstack/static sites usually offer better performance, security, and SEO
• Manually exporting, then uploading your Webflow files to a static host every change is a pain.
• Use CryoLayer to automatically rewrite your site for better performance and convert it into a Netlify-hosted static site.

The Problem

Webflow has been an amazing design tool that has saved us countless hours from our previous process of having a frontend developer reinterpret a flat design to dynamic code. But there are a few things Webflow can't do that has been a deal breaker for us or our clients on a few occasions. Some examples:

• No next-gen image support (like webp)
• There are some performance issues that can't be solved without modifying the code Webflow exports
• You can't specify which pages to exclude from the sitemap
• Many of the default JS & CSS resources (like fonts) are render-blocking, which causes performance issues
• You can't build an API on the same domain

What We Tried

Webflow has a fantastic community. Webflow users frequently share tips and hacks to get around some of these shortcomings.

We tried out Udesly which is a fantastic Webflow conversion tool. It's great for converting Webflow designs to WordPress templates or Shopify themes. However, we found it slightly lacking as a part of our designers' workflow. Every time you make a change you have to manually export the website and upload it to your platform of choice. This is a problem when you're developing a website that requires frequent live revisions.

We also tried using Cloudflare Workers (sometimes referred to on other platforms as "edge functions") to transform the code in transit right before it's sent to the user's browser. This actually worked super great! We were able to make a lot of changes to the code, and I even wrote about how to rewrite your HTML to lazy load images with edge workers. I'd highly recommend this for some sites, unfortunately not for Webflow sites. Our SSL certificates failed to renew once Webflow's system realized we DNS nameservers were pointed to Cloudflare's servers and not Webflow's, then we started getting 404s. There's workarounds for this, but we were not able to find a workaround that didn't require some kind of manual process and we definitely want the workflow to be as simple as hitting the publish button in Webflow once the design is ready to go.

So with Udesly and Cloudflare Workers out, we started working on a new solution.

CryoLayer

We built and launched CryoLayer, a no-code tool for easily optimizing, converting, and deploying Webflow sites to Jamstack.

How Do I Use It?

Just sign into your Netlify account, click one button, and CryoLayer will automatically optimize your website, convert it to a Jamstack site, and automatically upload it to Netlify for you. No exporting or technical skills required!

You can even set up your new Jamstack site to automatically stay updated on every change in your Webflow design. Every time you hit publish, CryoLayer will automatically optimize and convert it for you without any extra work. So you can continue to use Webflow exactly as you normally do, and CryoLayer will handle the rest.

Automatic Improvements

• Performance optimizations are made by transforming the code before it's deployed to Netlify
• Images are automatically converted to webp, and HTML is modified to use the webp version of the image if the browser supports it
• Images are compressed
• CryoLayer automatically determines the best method to load your fonts with for better performance
• We can now have APIs living on the same domain via Netlify Functions
• We can exclude pages from the sitemap by adding a sitemap=no custom attribute to the body tag in Webflow
• External links are given a rel="noopener noreferrer" attribute if they don't already have one
• A robots.txt file is added if necessary

And the list will keep growing as we find more things to optimize in the future. The deploy button in your account will automatically update to the latest version as we add features!

Conclusion

Let me know in the comments if you have any questions, comments, or feature requests for CryoLayer!