About.

Webflow is a powerful website creation tool that has many great performance boosting features and tips, however when exporting sites to host externally we have the chance to further improve performance.

Setting up a new environment and writing optimization scripts can be time consuming, especially when your site is ready to launch.

With boltflow.xyz you can be ready to deploy with a few basic commands in your terminal. Your site will be neatly packaged, optimized and ready to deploy anywhere you want.

Access Boltflow from the link below:

Home

Tutorial Video.

Step by Step Guide.

The following information is taken directly from boltflow.xyz:

First, export your Webflow site code, unzip it and copy the contents of this Github repository to the Webflow website directory you just unzipped.

Simply clone the Github repository using the following command or download the zip. Unzip it.git clone https://gitlab.com/workwithmad/boltflow.git

Note: Make sure node, npm and the grunt-cli are installed before you start!

Up and running.

To get things up and running simply navigate to your website directory using the terminal or command line and install the dependancies with the following.npm install

Then once everything is installed, run the following command.grunt

And if everything has installed correctly you should see the following. Keep this up and running as you move onto the finishing touches.

Finishing touches

Simply rename the default css file to main.css and watch our system do it's magic!

Our website structure will automagically look a little something like this depending on how many pages you have etc.. ├── assets │   └── css │   └── main.css │   └── js │   └── scripts.js ├── build │   └── css │   └── main.min.css │   └── js │   └── scripts.min.js ├── css │   └── main.css │   └── normalize.css │   └── webflow.css ├── images │   └── ... ├── js │   └── webflow.js ├── index.html

Our system has magically generated a couple of new folders.

assets contains the css files that have been concatenated (combined) but NOT minified (compressed to reduce file size) so use these for further development if required.

build contains the css files that HAVE been concatenated and minified. Use these on your production website.

Now just make sure to remove css/normalize.css css/webflow.css and css/<your-project-name.webflow.css> :

Now, thanks to the Grunt magic we just need to link our tiny css file (build/css/main.min.css) as follows:

Now, like our CSS, remove the js/webflow.js link and any other js files included (i.e js/<your-project-name.webflow.js> as follows:

And our tiny js file (build/js/scripts.min.js) as follows:

All done!

Now, all you need to do is deploy the build folder, html files and images folder to your hosting provider of choice.

Further reading.

At Mäd, we are constantly exploring tech options to ensure our team have the best possible toolbox to create quality work. Webflow passed our QA testing, ensuring that it was powerful enough to build incredible websites—yet simple enough for clients to learn and manage.

The balance between the backend and frontend designers allow us to achieve our goals in harmony. We recorded some thoughts on Webflow, and also invite you to explore some website case studies built from this platform:

Why Webflow?
Webflow allows websites to be coded visually, managing all the code behind the scenes. This paves the way for design-led websites that are 100% flexible and can be rapidly built and updated.
ODOM.
Designing for Designers is always a challenge, one we embrace. We recently created a sleek website to showcase the dynamic upcoming ODOM project.
Canadia Bank Case Study
We helped Cambodia’s largest bank become a digital powerhouse.