Webflow to Django: Template Preparation Guide

I love Webflow for designing UI, and I love Django for developing REST API’s. I wanted to try combining the two.

I have a project in Django where I give the user the ability to create their own SaaS landing page based off a set of template choices (all designed in Webflow).

In order to design your landing page in Webflow and then export and bring into Django you need to first hit the export code button in Webflow like so:

1. First hit button in the top right corner as shown below:

2. Then hit prepare zip and download the files as shown below:

3. Now you have all of your files from you landing page on your local machine.

4. Next, copy the folder into a location inside your Django project. I made a directory called webflow-templates and placed the files and folders (index.html, css, js, images) into another folder called landingpage_option1

5. Make sure this folder landingpage_option1 is referenced in the scripts below.

6. On my local machine I then pip install beautifulsoup4

7. This is used in the scripts to parse the html files.

8. I then created a scripts folder that contains 2 python scripts which are below.

9. Run move_exported_dirs_files.py

#!/usr/bin/env python3.8.3
import os
import shutil

# moving html files into templates
target_dir = "../templates/landingpage_option1/"
source_dir = "../webflow-templates/landingpage_option1"
print("Source: " + source_dir)
files = os.listdir(source_dir)
print("Files in source directory: " + source_dir)
files_html = [i for i in files if i.endswith(".html")]
os.makedirs(os.path.dirname(target_dir), exist_ok=True)
for file in files_html:
    print("Moving: " + os.path.join(source_dir, file))
    print("To: " + os.path.join(source_dir, file))
    shutil.copy(os.path.join(source_dir, file), target_dir)

# moving css, images, js folders
target_dir = "../static_files/landingpage_option1/"
source_dir = "../webflow-templates/landingpage_option1"
sub_dirs = ["css", "images", "js"]
list_dirs = os.listdir(source_dir)
for sub_dir in list_dirs:
    if sub_dir in sub_dirs:
        dir_to_copy = os.path.join(source_dir, sub_dir)
        target_sub_dir = os.path.dirname(target_dir + sub_dir + "/")
        shutil.copytree(dir_to_copy, target_sub_dir)

10. This will take the files from webflow-templates/landingepage_option1 and move the index.html into your Django templates folder (make sure this is created if not already) templates/landingepage_option1 folder inside Django

11. It then also moves all sub folders (css, js, images) into your static_files folder (or where ever you house your static files) into a folder called static_files/landingpage_option1

12. Run find_and_replace.py

#!/usr/bin/env python3

# add django static tags to index.html file
from bs4 import BeautifulSoup as bs

# append load static
with open("../templates/landingpage_option1/index.html", "r+") as file:
    html = file.read()
    file.seek(0, 0)
    file.write("{% load static %}\n" + html)
# replace all href links
with open("../templates/landingpage_option1/index.html") as in_file:
    html = in_file.read()
    soup = bs(html, "html.parser")
    for link in soup.findAll("link"):
        beg = "{% static 'landingpage_option3/"
        end = "' %}"
        link["href"] = beg + link["href"] + end
        # {% static 'css/normalize.css' %}
with open("../templates/landingpage_option1/index.html", "w") as out_file:
    out_file.write(str(soup))

# # replace all src in img tags
with open("../templates/landingpage_option1/index.html") as in_file:
    html = in_file.read()
    soup = bs(html, "html.parser")
    for img in soup.findAll("img"):
        beg = "{% static 'landingpage_option3/"
        end = "' %}"
        img["src"] = beg + img["src"] + end
        # {% static 'css/normalize.css' %}
with open("../templates/landingpage_option1/index.html", "w") as out_file:
    out_file.write(str(soup))

# # replace all src in script tags from webflow
with open("../templates/landingpage_option1/index.html") as in_file:
    html = in_file.read()
    soup = bs(html, "html.parser")
    script = soup.find("script", src="js/webflow.js")
    beg = "{% static 'landingpage_option1/"
    end = "' %}"
    script["src"] = beg + script["src"] + end

with open("../templates/landingpage_option1/index.html", "w") as out_file:
    out_file.write(str(soup))

13. This script will replace all your referenced static folders and files with the Django template static tags. This will add {% load static %} to the top of your index.html file in the templates folder as well as add static tags to all your <link href ’s as well as your <script src=”{% static ‘landingpage_option1/js/webflow.js’ %}” type=”text/javascript”></script>

14. You should be ready to go to see your new template rendering if you have a view in Django pointing to the template. Something like this views.py

from django.shortcuts import render

def index(request):
 return render(request, "landingpage_option1/index.html", context)