How-to Use Webflow with a Git Publishing Workflow

Webflow is a Design Tool

Webflow is a design tool [full stop]

While it allows designers to build professional websites visually, it is not built for the same kind of Git-based workflow that you or developers might use for a traditional codebase.

In recent years Weblow has added lots of hosting capabilities to might make you never want to leave their ecosystem. Unless you are a stifler for writing in markdown and seamlessly publishing your markdown files.

Webflow is a closed system.

Webflow doesn't allow for the exporting and importing of full project files. Instead, it's designed to allow you to design, build, and publish websites directly.

That said, you can use Webflow in combination with a Git-based workflow for your code outside of the Webflow ecosystem. Here's a basic outline of how that works:

• Webflow Design and Development:
  Use Webflow to design and develop your website. This involves creating the layout, adding content, and doing any necessary styling. Webflow hosts the site for you; no need for running a build server locally.
• Export Code from Webflow:
  Once you're satisfied with your design, you can export the code from Webflow (HTML, CSS, JavaScript, and images). This feature is only available for paid accounts.
• Create a Git Repository:
  Create a new repository in your Git-based version control system.
• Add Webflow Code to the Repository:
  Put the code that you exported from Webflow into the new repository. Make sure to add and commit the files to the repository.
• Develop Further: Now, you can develop further using the codebase in the repository just like you are used to in your regular Git workflow, allowing you to use GitHub and GitLab etc. too.
• Deployment: Set up a CI/CD pipeline to automatically build, test, and deploy your website whenever changes are pushed to the main branch. This could be on a hosting service that supports Git deployments like Netlify or Vercel.
• Update on Webflow:
  If you need to make changes to the design, you can make those changes in Webflow, export the code, and then update the files in your Git repository.

This isn't a perfect solution, and it's not the way that Webflow is primarily designed to be used. The exported code from Webflow may not be designed to be easily read or modified. This workflow can work for small changes and tweaks, but for significant development work, it's often better to hand-code the website or use a development platform designed for a Git workflow.

Although not perfect, it is great for such a Design Illiterate like myself. And I use the Git Workflow mainly for publishing my blogposts, notes, work in progress, and documentation.

Webflow also has WebflowCMS, a separate product that allows you to manage website content and update it without having to export or import any code. You might find this a more efficient solution for managing website content, depending on your needs.

Now, is there a way to include the functionalities of WebflowCMS in my git-based content publishing workflow?

How-to include the functionalities of WebflowCMS in my Git-based Content-publishing Workflow?

WebflowCMS is a content management system that allows you to manage content and to invite other content editors to update content on your website without having to touch any code. It's a visual system designed for users who may not be coders nor designers, like a team of content editors.

WebflowCMS doesn't directly support a Git-based workflow. If you're looking for a CMS that natively supports a Git-based workflow, you might want to consider a "Git-based" or "headless" CMS like Forestry, NetlifyCMS (now DecapCMS), or Contentful. These Content Management Systems store your content files along your other files in a Git repository, allowing you to manage your content with the same version control and CI/CD practices you use for your code.

Therefore, you should to use a CMS that natively supports a Git-based workflow. So basically 2 steps:

1. Creating the static site using Webflow,
   1. use Webflow to design and build your site,
   2. export the static HTML, CSS, and JavaScript files.
2. Integrating a git-based CMS,
   1. set configuration and connect the CMS,
   2. add CMS editing Capabilities to your site according to the documentation of the CMS you’ve chosen) so pages can be edited through the CMS.

Additionally, set up and configure a CI/CD pipeline to automatically build and deploy your site whenever you push files (including your content files!) to your main branch. Many hosting platforms, like Netlify and Vercel, offer easy integration with Git-based CMSs and automatic deployment from Git.

Now, you and your content editors can use the CMS to add, update, and delete content. These changes will be committed directly to your Git repository, allowing you to track changes over time and roll back if necessary.

This way, you get the best of both worlds. A git-based CMS, where you can manage your content in the same place and in the same way as your code. with the version control and collaboration benefits that come along with a git-based workflow. But also the powerful design capabilities of Webflow that make it so much easier and fun for design illiterates like myself to make it easy for our users to find and work with the content that we serve on the internets.