ไม่สามารถเล่นวิดีโอนี้
ขออภัยในความไม่สะดวก
How to export and host your webflow website, free!
ฝัง
- เผยแพร่เมื่อ 18 มี.ค. 2021
- How do you export your website from webflow, and upload it to firebase?
If you have used firebase before, it can be very simple, but if you have not done it before, I will show you how on this video.
Webflow is a great tool, and I use it for some of my project, but if you have a simple website about you, that is not updated on a regular basis, why pay a monthly fee when you can export it and host it for free with Firebase.
Installing firebase tools in the terminal:
/ webflow-free-hosting-w...
Excellent! I was not aware that you can "take out" your website out of the Webflow's eco-system and host it yourself.
You are so under rated good job
Thank you Jago :)
It would be cool to see a process for exporting a design from Webflow to be built in a Client's Wordpress or Wix account
Nice.
👍- Quality content
👍- No presenter head blocking content
👍- No jibber jabber
👎- Unfortunate/ distracting background “music”
Thanks a lot
I was looking for this kind of video for a long time Thank you Grego for sharing
SUBSCRIBED. All others channels just teaching for pay money for hosting in Webflow (sponsored video maybe). Thanks a lot. This video was amazing and informative.
Thank you Nayem, glad you found it helpful :)
Thank you! It actually works :) I've noticed that some things didn't successfully transfer over like things dealing with CMS, but no problem, I can just delete that stuff
No worries :) yep there is no CMS functionality in this type of website.
Good video, but only catch is Webflow doesnt let you cancel the subscription and pay only for that month as of now (not sure if it allowed earlier). They are clearly saying that we need to pay the remainder of the term for the plan you signed up for.
Thanks for the tutorial Greg
252 subscribers? Give it time , you are good!
This is amazing! You need to have more subscribers
You deserve more sub.. Great content bro!!
thanks so much!, hoping to make more content on different nocode tools soon.
dude this is gold, thanks!
Thanks for this!
Wow you are wayy too underrated. Keep up the good work!!
Thank you Greg!
You’re very welcome :) I’m planning to make a video on making a blogging website for free, using Hugo, and easy to maintain, but haven’t had the time. Hopefully in October.
@@gregortega I'm looking forward to it!
Love this video.
From Pakistan
Thank you!
Thanks for the tutorial, Greg!
First of all, is there a way to upload the files directly to Firebase bypassing the terminal usage?
Second, is it necessary to keep files on a computer? Can I just remove the folder? If yes, then is it okay to press “delete” or there is some sort of unlinking process involved?
Third, how to update the contents of a website? Let’s say, I want to add a new page or fix mistakes in the text - what should I do? If I need to download the custom code from Webflow’s project then change the contents of the folder with newer ones, then what should one do if he/she deleted the folder (the second question)? I guess it will be a pain in the arse.
P.S: I love your camera setup! Color grading is on point. Though, you look quite tired, mate.
Hi Georgy!, thank you!
to answer your questions
No, there is no way to upload the files to firebase directly without using terminal. Not that I know of. As for the delete, you can, the webflow project will remain in webflow, but you will not be able to export again if you don't have a subscription at a later time. I would recommend, using github for source control if you plan to update the website manually without webflow. That way you can safely delete from your computer, as long as you have a copy of the project somewhere like github.
Yeah updating things manually can get complicated, but is doable if you have a simple website, you can use something like VS code, or ATOM. You can always see the changes by double clicking in the index.html file and seeing the local changes to the website in your browser
Thanks mate, Im pretty happy with the setup, and yeah I needed to rest that day haha :D
@@gregortega I see, thanks a lot for the reply!
Thank you so much for the tutorial, Greg! Just wondering if the design will also be responsive (mobile, desktop, tablet)?
responsive design is a media query, which is already included in the css code.
cool thanks man
Awesome!
This does not work anymore? I need to pay to export my website? Just created a new account and website. "Upgrade your account plan to export your site"
Hi there, yeah that’s how it’s always been. This is so that you stop paying if you’re already in a subscription and don’t need to update the website frequently
Very nice.
Hi. SORRY...BUT my terminal says "Error: Not in a Firebase app directory (could not locate firebase.json)" when I use the "firebase deploy" command. What Can I do? THANK YOU VERY MUCH! SO far, your instructions I was able to follow. Thank you!
Hi TopFive,
Sorry for the late reply. You need to ensure the terminal is at the directory of the firebase project. You can check in the terminal in which directory you are currently in by entering "pwd". If you are not in the firebase project directory then you can change directories with the "cd" command and input the directory you want to change to.
It breaks if the website has CMS collection.
I'm using next.js as well as mdx for blog posts. How can you copy the code and then make it work within the typescript?
Hi Juan, apologies for the delayed response. If you're using next.js and mdx, then you're probably better off with your own solution and deploying to netlify or firebase. I don't think I understand your question 😓 but there is tutorials out there to help do this :)
Thanks Greg
I'm a Webflow developer, this is awesome! I'm going to try it with some portfolio project websites. But for my own website, I think I like to do updates on it at least once a month. In this case, does it still make sense to pay for an annual Webflow hosting plan?
absolutely insane my golly
Love the video
Thank you! :)
What's current cheapest/minimal cost for to be eligible to export your already made site in webflow, like what's the exact name of the deal/paid package, anyone knows?
You can look it up on the pricing page when you expand on the feature look for code export. It’s Core plan I think
what if i want to update something on the website or if i need cms dynamic content?
If you need to have a CMS I would not recommend doing this, it would not work. This only works for a static website, that does not require updates, for example, a CV or just a landing page about you or your business.
How can I import webflow CMS collections to an exported site?
Hi Rafi, this is not possible. This tutorial only works for static sites, so no CMS
I guess you can use Netlify CMS
I think Udesly + GitHub + Netlify is a much better solution because you can still use CMS functionality and the forms still work.
This is fantastic. Will it work if you have contact form? If so, Can you do another tutorial with contact form?
Hi Denniszen. Im not sure if this will work, if the contact form does not interact with webflow it should work fine. Think of it this way, if you embed the contact form without using webflow and the contact form just sends the info somewhere else it should be fine.
@@gregortega Thanks
this is dope! cool alternative...
is the animation i made on webflow can works properly?
You would have to try this first by downloading the code. I would expect most animations to still work :)
Hi, Thank you very much for this great tutorial. Can you also add your webflow databases to firebase?
Hi Daphne, no unfortunately. This tutorial is for static websites that don’t have dynamic data, so it cannot cannot to webflow while being hosted elsewhere.
What about back up . I have go daddy as a host with back up. But its going to cost £150 for so with everything. What do you suggest
Hi there, sorry but Im not familiar with goDaddy as a host provider, I have only used it for domain names :(
I didn't understood how coding terminal was opened any help is appreciated
Thanks for the wonderful video. What does the js folder includes. Does it incldue anything other than animations.
Also if you dont mind can you opensource one of your webflow exports ( anything would work) . I just want to basically look at the what really is in the different folders. Also if you have a multipage project. Do you need to export each page individually. In that page would each page have a copy of the global css.
Hi Rachit, good question. I am not sure, I just had a look at the JS folder, and to be honest Im not sure what is in there, it looks like something specific to webflow. Depending on the project you might or might not need it. I tried removing it locally, and the index.html still opened fine, but I would not recommend removing it from a published website.
I just saw your second question, sure. Give me a couple of days and ill create a github repository with the exported site. About the multi page, if they are not dynamic pages they should be exported with the single export, I don't have a multi page website to export atm.
Hi Rachit, I've uploaded the exported code to a github repo if you want to have a look. This is before the firebase step. It contains pages that came with the webflow template, but are not in use.
github.com/Gregortega/personal-website
@@gregortega Thank you so much 🙏
Does this work for websites made on Webflow using the e-commerce plans?
Unfortunately no. This is just for static sites.
Do forms work using this?
No. This is just for static websites
Thank you 🙏🏻 does this work also with e-commerce with photo animation?
Apologies for the late reply. No, this is meant to be for static sites only.
@@gregortega do you know anyway I could do that?
Hey Xavier, no. But I would not recommend running something like this for e-commerce. If you’re running a store you should definitely be on a subscription
Good video Quality :)
Thanks so much :)
how would one go about exporting the webflow code on pages + blog + cms collections to godaddy staging site on wordpress using divi theme? Webflow is great but we cannot use it for what we need.
Oof I wish I could help but this is a bit too complex of a use case for how I normally use firebase hosting. You’ll need to have a look at godaddy staging site and how they handle a cms.
You’ll probably need to transfer the data of the CMS manually or via the webflow + godaddy APIs.
Sorry I can’t be much help here, good luck
@@gregortega Ya im finding that to be the case. might need to rebuild it. i do appreciate you getting back to me. first amd only content creator to respond to my question. 🙌
Can I hire you to build my website on Firebase?
Thanks for the interest @TrendosTopPicks but I’m currently not doing any contracting
I wonder how the performance is. Is it possible that you can do a speed test? For me it is important that the website is fast with optimal core web values and I was wondering if the code would run similarly on another host. Great video btw!
Thanks so much.
I ran some speed tests, first one took 2.4 seconds loading from London, which is a lot but the again is free. Every other test shortly after that took between 200 and 600ms. Then I ran another test, from Japan and it took 1.86s. So it depends on where is the website being cached, and if it’s been cached before. The page size is 1.2 MB, and ran the tests with solarwinds pingdom.
I have another website that is on webflow, as I need the CMS functionality, I might run some test on that later and compare but at the moment is not ready yet.
@@gregortega Thanks so much! Free is free and I might use that for pages where speed is not important. Keep it up!
Things got real messy when my client transferred to WordPress; my company lost integrity because of it. How'd it go for you?
Can we delete the website that we made in webflow after exporting the code ?????
You can but I think you can simply downgrade the account instead of deleting the site. So that you don’t loose the project.
If I have a blog and add new posts/ edit it, will it automatically change it while hosting it on firebase?
Hi Alex, you would need to re deploy the site for changes to take place
Webflow's GTM Team is not pleased to hear these?
they could always provide a more friendly way to do this, a different monetisation strategy for people that only use webflow a couple of times only when exporting the code for example : ) it would still be a win for them
Will the background videos work in the exported site?
Do forms still work with this method
I think this should still work if they are simple forms, no files or images, but I have not tried it myself. If you export the code, you can try it locally before deploying the website.
im using cargo for web builder, is it gonna work for cargo as well?
If you can download the code from cargo then yeah it should work, but check that the code runs first locally :)
Do I need to import the code from Wordpress to webflow tp make edits?
This tutorial is not for Wordpress, I don't know much about Wordpress
Can we export complicated websites with some animations?
It depends on what you mean by complicated. This is meant for static websites only. Where there is no interaction with a server or database or cms. Animations should be ok tho, but best to check the code can run locally first :)
This could work with E-Commerce websites?
Hi Chase, no unfortunately. This is only for a static website.
Thank u for share It❤️
Can i do this on my iPad Pro
No, unfortunately this is not possible from an iPad
Hi, is there a way to export code and host my e-commerce website outside of webflow? I have real confusion regarding this. PLEASE HELP.
Hi Shaswata, this works only for static sites in webflow. It would not work for e commerce sites
@@gregortega Thankyou very much for the clarification sir. I hope your channel grows to millions this year.
hey buddy, does firebase charge when there are many visitors?
It depends on your use case, the free plan covers up to 10gb of storage and 360Mb data transfer a day
Using Netlify for hosting is easier.
Yeah for sure. Thinking of making a video about that too :)
hi, new subscriber here! I just want to ask if it's real that you can unsub after purchase?
Hi Zoe, thanks for that. Yes, you can unsubscribe from web flow after exporting the code. I would recommend only doing so after you exporting the code and uploading it to firebase
Hey how can I do it in windows?
Hi Saad, you should be able to follow the same instructions on Windows. Firebase has command line tools for most operating systems.
Does this work with Dreamhost?
Hi Asia, I did not know about Dreamhost until now. Yes it should work as well since they focus on web hosting, but I don't know exactly how. Best to try before it is what you want to do before committing to anything. help.dreamhost.com/hc/en-us/articles/360003490852-Using-the-website-file-manager-in-the-panel
Sir tell me how we earn money from webflow without freelancing system..??
Sir can we sold our websites theme in different platform???
I’m not sure what you’re asking, I’ll be covering different no code tools in the future. You can potentially earn money by implementing different ideas with no code. As for selling theme, I’m sure there are videos about it, if not I’ll look into it . Thanks
I'm not paying monthly for hosting. I'm paying annualy. It is more convenient.
Does it retain the animations and interactions?
Hi Francis!. Yes it should retain this things, however I think if you have other things like mailing lists and sales it might not work. This is advice mainly for static websites.
has anyone tried to export the site and found the animations and interaction continue to work?
@@asiag.8324 yes they continue to work
does it upload videos as well?
I have not tried having a video file in the website, but It should work similar to photos, and the video would be uploaded along with your website. But I would recommend having an unlisted TH-cam video instead. Just use one of the webflow components to add it, you just need the TH-cam link
@@gregortega thanks!
why you don't use Zilla and you use this stone age methode
Has anyone exported the site and found the animations and interaction continue to work??
Yes it works fine
..
...
....
.....
Dude, add some energy in you, be more energetic :) stay happy man 🙌👍😀
Is this working if i have call scheduling built in my website?
Hey Resolve, thanks for the question. Unfortunately , I don't know how the integrations to third party APIs would work, so I would not recommend this just yet. It depends on the integration. If it is just a code snipped added to the site, it should be fine, but if the integration needs to interact some more with your web-flow account then probably no. If you can export the code already with your current account, you can always try it out before committing to it by downloading the code and trying it locally.
@@gregortega Thank you very much i will definitely look more into it. Great videos by the way keep up the good work💪