Back

Boltflow.

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

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.

Update CSS links

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:

Update JS links

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:

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Block quote

Ordered list

  1. Item 1
  2. Item 2
  3. Item 3

Unordered list

  • Item A
  • Item B
  • Item C

Text link

Bold text

Emphasis

Superscript

Subscript

Elevate Your Business Today

Work with our expert team to get measurable results. 
Together we can Make It Happen.™

Start a Project
back to top icon