< Back

Webflow to Pinegrow COURSE – Import into Pinegrow (FREE HOSTING)

We take a look at how we can host our Pinegrow website for FREE!

Transcript

In this episode we are going to be exporting our Webflow projects and bringing it into Pinegrow. It’s going to be a double whammy because I’m also going to be showing you how to properly deploy a website. We’re going to be going down a free route first and foremost and a very simple route people are still logging in with FTP and once you override those files they’re gone so we’re going to set up a pipeline say there’s an error you can undo those changes and then the new version which was actually the old version will get deployed.

And in case you didn’t know Pinegrow is what I consider a far more powerful far more flexible no-code platform similar to Webflow that I’ve been producing content for for the last I don’t know a year or so.

Let’s jump right into it I’ll try and make these as quick as possible because I know your time is precious and so why not get cracking.

In Webflow if you don’t know being able to export your code is a pay for feature unfortunately it comes with the account plan I don’t think it needs a site plan but it comes with the account plan and it’s basically I think 20 bucks a month something like that or you pay for the year if you’re already paying for it great but you might need to just swallow that initial payment just to get the export kind of feature working.

So, I’ve clicked into a website here and you’ll see this export code button at the top here now I haven’t got the plan but luckily I’ve exported this website but when you click that you should be able to this upgrade plan won’t say upgrade plan it would be export code and then you download that zip folder full of all that code, what’s exported is all of your CSS all of your pages the HTML the JavaScript that’s necessary that includes your interactions and then the various pictures and images that you use on your website.

Now it warns you here that it doesn’t include native form functionality and I’ll make a video on that if you’d like me to just again leave me a comment and then it also warns you that the CMS data doesn’t export now that’s a bit trickier um and again, I think that’ll be a separate video but it could be quite a fun episode to build their own CMS have it work with with Pinegrow but for another day.

So, once you’ve exported that you should have a zip file and now we’re done completely with Webflow. Opening Pinegrow what you want to do then is open a project and I have downloaded this um this project already and you can see it’s got all my files here and if I select that it will now open it in Pinegrow.

If we click on our index HTML you can see that everything even the images and the the links to all the images is all working and we can even turn JavaScript on, we even get our interactions fading in which is great, go down to mobile desktop, and all the rest of it so you can see our website is fully functioning um and and now you’re in Pinegrow and you can easily make changes here you can make changes to the Head um you can do whatever it is that you need to do.

So, to a few of you that was probably pretty underwhelming uh firegrow just picks up on the HTML files and gives you complete access to begin dragging and dropping your different elements changing your design for all intents and purposes it’s now a website that was never created in Webflow. So, what we’re going to go on to now is actually deploying a website the air quote correct way or at least a more safe way than simply FTPN and this is going to be free, what we’re going to do is we’re going to be using GitHub so you’re going to need yourself a GitHub profile and we’re going to use Netlify which you can sign up for netify again both for free, so this is going to be the thing that stores the code and the different revisions of your code base.

Before we get going one thing I would strongly recommend is creating a “gitignore file” and you can do this quite easily from either within Pinegrow or a little bit easier is just within Visual Studio code which which you can edit code and you’re going to name your file dot get ignore and the reason we’re doing this is that Pinegrow creates a bunch of folders that basically maintain your UI how you’ve arranged your UI and various things like that I’ve not done too much into exactly what it’s doing but essentially GitHub and other users or other developers don’t need this these files on your on their systems.

When they’re using plant grow they need their own versions So within a “gitignore” folder this is a kind of standard gitignore folder probably remove these two here but underscore PG backup underscore PG info pingrow.json and then DS store if you’re on Mac these this is kind of like the standard thing that you want to include in your project.

Four, we move it on to git now again you’re going to need git installed on your computer and I’ll leave a link to instructions on how to do that I’m not going to go through it right now but essentially we want to create this into a git project and I often start just by jumping into GitHub and just creating a project there and then it gives you instructions on how you would then push your your Pinegrow project up into this repo and once again I have already done this and you should find that…the website should appear in inside of GitHub and that’s kind of it and the workflow would be if you make an update, if you change something I’d strongly suggest understanding and learning how to use git but at the very least you’ll be doing git add full stop, git commit updates and git push and those three commands will then take the latest version and override the the revisions that’s happening on on GitHub.

And then, you can see I’ve not touched this website in years in fact but you can see I’ve initially committed I’ve maybe changed it a little bit and then I’ve updated a calendly link very very simple but you’ll see this history if there was an error in this push then you can then revert it to a previous version and….and that that’s where the power of you understand you get and using git comes from because we can we can navigate through the history and nothing is ever permanent you’ve even got a record of what the website looked like at that commit.

You can see what the website kind of the state of the website didn’t look like and navigate through all those files and actually see what the changes were as well so if we go in here and see what the changes are again this is not a lesson on git but it’s just to encourage you to go and explore how to use git to store and keep the history of your website.

So, with that now how do we get this website live? Well, so we’re going to be using a tool called Netlify and I’ve got a bunch of new sites here but you’re going to go ahead and you’re going to import an existing project okay.. and you’ve got various logins here and obviously we’re using GitHub in this example but if you were to log in this is just logging in here it’s now going to pop up with all the GitHub repos that I have see I’ve got a bunch there I know for example this has already been uploaded to here into the Jupiter draft category and you can kind of leave this as it is.

It’s a static website it’s not nested in any folders we’re not having to go into any folder to serve a specific thing it’s all completely flat so we can we can actually then just go ahead and click employee site straight away here and again I’ve already done that what you’ll get given is a domain management you’ll see it will give you a junk kind of URL whether you can then visit that website after it’s being deployed, which is great and then again this won’t be a lesson on Netlify but then you will add your domain name to this and there are tons of guides out there on how to do this.

Again, I’m not going to tell you how to do that right now but this is effectively your website now that’s been deployed and what will happen because you’ve linked your GitHub repo to the to the Netlify account every single change that you make will then be or pushed into git rather will be deployed to your Netlify profile and all this is free…all this is free so going back into Pinegrow.

You know, like I say we can we can treat this like any other no code Pinegrow project so I can flip these around I can um you know just start swapping stuff around as you would expect change the um change the text and once I’m happy with that save it, push it up to GitHub, it will automatically deploy to Netlify and that is all it takes to export your Webflow project bring it into Pinegrow and have a really safe and confident deployment structure that costs absolutely nothing.

So, hopefully I’m going to make this transition from a proprietary limited and expensive Webflow experience into Pinegrow a hell of a lot easier. So, thanks for sticking around to the end if you enjoyed this video make sure you give it a like if you want to hear more about the Pinegrow kind of 101 stuff obviously subscribe to that if you want to support me then you can do so at buy me a coffee.com fake Sam Gregory those those little donations really go a long way to helping me create content um..

And, I think that’s probably about it so I hope you enjoy the rest of your day and uh Happy building the future of the web.