Setting up Webflow on Ruby on Rails

Read this to save time.

Step 1: Create a new rails app:

rails new webflow-demo

Step 2: Download zip file of exported html/css/js Webflow code from the website.

Download the zip file

Step 3: Copy and import in the following css and js files from the exported Webflow folder:

css/normalize.css
css/your_site.webflow.css
css/webflow.css
js/webflow.js

into your Rails path:

> vendor
> assets
> javascripts
webflow.js
> stylesheets
normalize.css
webflow.css
your_site.webflow.css

Step 4: Copy and paste in static images from the exported Webflow zip file into app/assets/images

Step 5: Open up any one of Webflow’s exported html file, it should look something like this:

<!DOCTYPE html>
<!-- This site was created in Webflow. http://www.webflow.com -->
<!-- Last Published: Fri Aug 10 2018 08:27:08 GMT+0000 (UTC) -->
<html data-wf-page="5b60ffb6a351717964300691" data-wf-site="5b5dd320b008d147d2e7ac04">
<head>
<meta charset="utf-8">
<title>Profile2</title>
<meta content="Profile2" property="og:title">
<meta content="width=device-width, initial-scale=1" name="viewport">
<meta content="Webflow" name="generator">
<link href="css/normalize.css" rel="stylesheet" type="text/css">
<link href="css/webflow.css" rel="stylesheet" type="text/css">
<link href="css/your_site.webflow.css" rel="stylesheet" type="text/css">

<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js" type="text/javascript"></script>
<script type="text/javascript">WebFont.load({ google: { families: ["Montserrat:100,100italic,200,200italic,300,300italic,400,400italic,500,500italic,600,600italic,700,700italic,800,800italic,900,900italic","Open Sans:300,300italic,400,400italic,600,600italic,700,700italic,800,800italic","Roboto:300,regular,500"] }});</script>
<!-- [if lt IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js" type="text/javascript"></script><![endif] -->
<script type="text/javascript">!function(o,c){var n=c.documentElement,t=" w-mod-";n.className+=t+"js",("ontouchstart"in o||o.DocumentTouch&&c instanceof DocumentTouch)&&(n.className+=t+"touch")}(window,document);</script>
<link href="https://daks2k3a4ib2z.cloudfront.net/img/favicon.ico" rel="shortcut icon" type="image/x-icon">
<link href="https://daks2k3a4ib2z.cloudfront.net/img/webclip.png" rel="apple-touch-icon">
</head>
<body>
...
<script src="https://code.jquery.com/jquery-3.3.1.min.js" type="text/javascript" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="js/webflow.js" type="text/javascript"></script>
</body>
</html>

Step 6: Change the application.html.erb layout

<!DOCTYPE html>
<!-- This site was created in Webflow. http://www.webflow.com -->
<!-- Last Published: Fri Aug 10 2018 08:27:08 GMT+0000 (UTC) -->
<html data-wf-page="5b5e6da8c3f7cb207c48c27e" data-wf-site="5b5dd320b008d147d2e7ac04">
<head>
<title> <%= @title %> </title>
<%= csrf_meta_tags %>
<meta content="width=device-width, initial-scale=1" name="viewport">
<meta content="Webflow" name="generator">
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js" type="text/javascript"></script>
<script type="text/javascript">WebFont.load({ google: { families: ["Montserrat:100,100italic,200,200italic,300,300italic,400,400italic,500,500italic,600,600italic,700,700italic,800,800italic,900,900italic","Open Sans:300,300italic,400,400italic,600,600italic,700,700italic,800,800italic","Roboto:300,regular,500"] }});</script>
<!-- [if lt IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js" type="text/javascript"></script><![endif] -->
<script type="text/javascript">!function(o,c){var n=c.documentElement,t=" w-mod-";n.className+=t+"js",("ontouchstart"in o||o.DocumentTouch&&c instanceof DocumentTouch)&&(n.className+=t+"touch")}(window,document);</script>
<link href="https://daks2k3a4ib2z.cloudfront.net/img/favicon.ico" rel="shortcut icon" type="image/x-icon">
<link href="https://daks2k3a4ib2z.cloudfront.net/img/webclip.png" rel="apple-touch-icon">
</head>
<body>
<%= yield %>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" type="text/javascript" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<%= javascript_include_tag 'webflow', 'data-turbolinks-track': 'reload' %> <!-- [if lte IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/placeholders/3.0.2/placeholders.min.js"></script><![endif] -->
<!-- [if lte IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/placeholders/3.0.2/placeholders.min.js"></script><![endif] -->
</body>
</html>

Step 7: Delete require_tree from assets folder in javascripts

// assets/javascripts/application.js//= require rails-ujs
//= require turbolinks

Step 8: Explicitly add in webflow.js in the precompile list

## config/initializers/assets.rbRails.application.config.assets.precompile += %w(webflow.js)

Step 9: Set up the assets stylesheets like so:

/*
* app/stylesheets/application.css
*= require_tree .
*= require normalize
*= require webflow
*= require qpi
*= require_self
*/

Step 10: Copy and paste in any exported html code into a view template in Rails now starting from immediately after the start of the <body> tag to the start of the script tag referring to external jquery code like below:

<body>  COPY AND PASTE IN SPECIFIC WEBFLOW HTML/CSS CODE TO SPECIFIC RAILS     VIEW TEMPLATE HERE<script src="https://code.jquery.com/jquery-3.3.1.min.js" type="text/javascript" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

Step 11: Change the source of every image to refer to the asset path:

This now becomes:
<img src="images/Logo_CircleOnly.svg" width="46" class="brand-link">
This:<img src="<%=asset_path('Logo_CircleOnly.svg')%>" width="46" class="brand-link" >

Step 12: Things should be exported seamlessly at this point!

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store