Turn exported static html pages into selfhosted dynamic html
Webflow has the option to export code (with a paid workspace plan), but it won't include the CMS items that make it all so dynamically beautiful.
So what if we can design whatever in Webflow as a static page and turn it into a selfhosted CMS Collection Page?
That's what I'll be explaining in this guide.
A sidenote, what will be explained applies to any type of static code turning it into dynamic code. So this can also be an exported index file from any Virtual Tour software such as 3DVista or a w3school html page. It's more a conceptual method to understand, but for the sake of keeping things specific, I'll stick to exported Webflow code.
So I've found this beautiful Scrolling Zoom template on the Webflow Marketplace. First thing I'll be doing is replacing the "main-image" image with an iframe embed component and keep the same main-image class to it, so that the interaction animations keep working nicely.
In the iframe embed component I can fill in the "https://360creators.nl/tours/think-bigger"
Let's replace the part of what we put in between the brackets after src= with "xxUrl". As that becomes our searchterm to replace later on.
Let's export the code.
Now what we're going to do is creating an Airtable base and make sure we have a Long text field (enable rich text turned off).
Then we copy everything from index.html and paste it into a record inside the Long text field.
We'll create an extra URL field, so that for that record, we're going to place in that specific URL. Plus we're going to create a Formula field to dynamically combine the Original html with the Placed URL.
The formula for the New html is going to be:
SUBSTITUTE({Original html},"xxUrl",{Placed URL})
Voilà! We now have our new html created.
We can now create 10 records with different placed urls or a 1000 records, all generating the new html with this simple formula.
But before we're going to call it a day, it'd be nice if we could just hit a button that says "Upload to Server".
For that we'll need to dive a little bit into automations and webhooks. It can be built in any automation tool, but for the sake of selfhosting, I'll be using n8n as that's what we're intending to do here, selfhosting things.
I'll be copying the Text URL, get back to Airtable and place the following button field:
Now we're having a nice button in Airtable that will serve as the n8n automation trigger to generate that html file right away on the server.
Back in n8n, I hit Listen FOr Test Event, and then I click the Upload to Server button, so that n8n receives a webhook with an ID to it that we can use further through building the automation.
Then we close the popup and connect Airtabel as the second module to it. We choose "Get a record" from the Action list.
Select the credentials, the base and the table. And then we need to drag & drop the record_id from the left to the center. Hit Execute node and get the succes message with output data.
Then, moving on, we select the 3rd module being "FTP" and we select "Upload a file".
Select your credentials, select your path on the server starting with a slash.
If you want people to go to a clean address, you make sure the Path is ending with "index.html".
If you don't mind it showing the html page in the url, then you can do page1.html, page2.html etc.
Let's check the url aaaand.... That still doesn't look good (yet).
Last thing to do, is to get the three folders (images, css, jss) and upload those to the server.
And now it works.
One last thing. If you want to create 100 html pages like this, you could change the folder and upload those three folders everytime in each new folder. But if you replace "index" with the name of the record, it will generate 100 html files in the same folder, all pointing to the same three folders.
Now you can generate all those pages however you like and have them uploaded to the server.
And you have learned how to replace a variable inside an indexfile. Now you probably also understand how to change the <h1> titles, as well as the images and much more.
