Streaming live at 10am (PST)

Webflow Git - utility to track changes to a Webflow site on GitHub

I am sometimes struggling with regressions in Webflow projects, especially when multiple people work on the same site. Webflow Backup function is great for finding and reverting to the last working revision, but it’s impossible to know what was the change that caused the regression. Personally, I also like to self-review changes that I made at the end of the coding session.

That’s why I created Webflow Git - a simple, free utility to track changes to a Webflow site on GitHub. It’s a kind of a version control system supporting the Backup, that can monitor changes to the generated stylesheet as well as pages content.

Here’s an example of a commit to one of my sites:

I have tested it over the last couple of weeks and I find it useful. I wonder if you also find such tool helpful in your work.

PS. Please note that the tool is still experimental and any comments or suggestions are very welcome!

6 Likes

Hey, this seems amazing. I assume it would work as a way to host Webflow sites through Github pages without having to download, extract and push them manually?

I actually developed something similar in node, but which listened to “publish” webhooks instead of crawling at certain intervals. I’m not familiar with how this is developed (never heard of Github utilities (?)), but would any kind of webhook listening be a possibility?

But thanks! Definitely gonna try it out :slight_smile:

1 Like

Hi,

Thanks for your comment!

Publishing to Github Pages wasn’t really my intention - the idea was versioning to visualize changes to a site. I didn’t see much benefit of hosting a site somewhere outisde of excellent Webflow hosting, especially because assets will still be hosted by Webflow. However, when I think about it now it might be useful for example to fully customize redirect rules, e.g. hosting multiple sites under a single domain. I will think about adding it…

I didn’t realize there are webhooks available in Webflow - thanks for pointing it out! The benefit of polling is that it doesn’t require any setup in Webflow or generating an API token. I think I will add an option to disable polling and listen to publish events - GitHub also exposes webhooks that can trigger workflows, so it should work.

Thanks,
Jarek

1 Like

Love this @Jarek , only the published changes to a sitedomain (either subdomain or other) is how your program tracks changes?

My Workflow idea right now would be to set the site domain as the subdomain and publish my changes there for it to track and commit in GitHub?

Hi,

I am not certain if I understand your question. Yes, it tracks changes by monitoring a specific domain, so it can be a webflow-default domain, a custom subdomain as well as top-level domain. It doesn’t need access or any changes on Webflow.

That would be amazing actually. For years, the manual process you describe has been a pain. I would actually pay for something like this.

Take a look at this feature request. There seems to be a tool called Flowgator that could do what you are looking for (the link doesn’t work, not sure why, it used to work when I read about it few months ago).

1 Like

Whoa. Great find. Thank you.

Appears the project is no longer active. The website is down. Thanks though.

@Jarek I just followed the steps you outlined however when I run the webflow-git action I see the attached error.

I’m also attaching my webflowgit.yml

Any ideas?

The site needs to be a full URL: https://test-project-68f3d2.webflow.io

Sorry for confusion, I will update the README.

Amazing, thank you that worked! I tried a few more of my sites and while they all still work, one is reported a “CSS file not found”. I’ll send you a DM.

Great.

I answered your message - Webflow uses many different locations where it stores the CSS file (I suppose it evolved), and the script wasn’t recognizing the one used on your site.

I have added a new pattern to the script, it should work now.

Website mirroring / hosting elsewhere

I realized that it’s easy to achieve what you are asking for with my little tool.

I haven’t implemented the Github Pages support (which I will probably do it in the near future), but you can host your site with other service, such as excellent Netlify, which is super fast, offers a lot of customization, advanced redirection rules, and more.

Here’s a step-by-step guide (I will update the README later):

  1. Create netlify.com account

  2. Create New site from Git

Screenshot 2021-10-06 at 12-53-05 Sites Netlify

  1. Select Github git provider

  1. Give Netlify necessary permissions to your repository created from Webflow Git template, containing your website and select the repository (refer to the official documentation if you encounter any issues).

Screenshot 2021-10-06 at 12-56-39 Create a new site Netlify

  1. Leave the build settings empty and click Deploy site (no build is necessary and you will be hosting from root directory)

Screenshot 2021-10-06 at 12-57-30 Create a new site Netlify

  1. Now you can visit your site (URL is in the header of the project, and you can connect your custom domain). Every time you make changes on Webflow, they will be picked up by Webflow Git, pushed to Github and deployed on Netlify.

Screenshot 2021-10-06 at 12-58-53 trusting-clarke-029c5f Site overview

The build is currently based on polling, so next time you make any changes in Webflow, you might have to wait up to one hour until they are visible on your mirrored domain. I will make it event-based later, but it requires authentication to Github, so a bit of extra complexity and external webhook tool when configuring your site.

Please keep in mind that assets (images, videos, aniomations, etc.) are still hosted by Webflow. Also note that forms, e-commerce and other dynamic functionality will still be handled by Webflow.

1 Like

And hosting on Github Pages is even simpler.

Click Settings, the Pages. Select master branch and (root) directory.

Then configure a custom domain (links won’t work in a directory). Add a CNAME record pointing your subdomain to .github.io, generate and enforce certificate, and done.

Please keep in mind that assets (images, videos, aniomations, etc.) are still hosted by Webflow. Also note that forms, e-commerce and other dynamic functionality will still be handled by Webflow.

This is just perfect. Great step-by-step. I’ll test this out on a test site and see how it goes. Much appreciated!