Easy, 100% FREE Webflow Site Hosting with Firebase

Easy, 100% FREE Webflow Site Hosting with Firebase


Do you want to learn how to host your Webflow sites completely for free? Coming up, I’m going to let you in on how I’ve saved loads of money by hosting my Webflow sites with Google’s Firebase. It’s really simple, you’re going to get step by step instructions and save loads of money too, so stick around! So why use Firebase Hosting, and how free is free really? Surely this costs money, right? Well yes Firebase Hosting can cost money, but it has a free tier that’s so generous that in my books, it’s as good as free. I mean you have to be hitting 10GB of bandwidth a month before you even need to pay, and even if your site grows to the point where do you end up having to pay, just look at this pricing, it’s ridiculously cheap anyway. Something else I really like about Firebase is that SSL is enabled by default, and you don’t even have to think about SSL certificates – Firebase sets these up for you automatically. It’s also free to connect your own domain, and your website is delivered using Google’s Content Delivery Networks, so you never need to worry about load times. In fact, I struggle to find anything to complain about with Firebase Hosting at all, it really is a well polished service. So, let’s get started! To get started I’m going to Google Firebase Hosting and then find the “Get Started” page. Here I can see instructions on how to get things running. I’m going to need Node.js and NPM installed on my machine. The links here will take you to those websites where you’ll find instructions for your operating system. I already have Node.js and NPM installed on my machine, so I’m good to go. In case you’re having issues getting these installed for yourself, check this video’s description where I’ve linked to instructions on how to do this. Note that I’m using Ubuntu 16.04 in this video, so the commands you see me type may differ slightly on Mac and Windows. On my computer I’m going to make a new empty folder. I’m going to open this up in my code editor, and open the integrated terminal. I’m using VS Code and the shortcut to open this up is control + back tick. You could also use a separate terminal window, just make sure that you’re in the right directory. Next I’m going to install the Firebase Tools package using NPM. To do this, I’m going to enter “npm install -g firebase-tools”. Now that’s installed, I’m going to log into Firebase from the terminal. To do this, I’m going to type “firebase login”. This opens up a browser window and asks me to authenticate with my Google account. Now the Firebase CLI is installed and ready to go, I need to go to the Firebase Console and make a new project. To get to the Firebase Console, I’m going to Google it and open this up. I’m already logged into my Google account, so I’m straight in. You can give your project any name you like, then just select your country and accept the terms. Once my project’s ready, I’m going to head back to VS Code and connect to my project locally. To do this, I’m going to type “firebase init hosting”. Now I can see a list of my projects, so I’m going to use the arrow key to select the project I just made, then hit enter. You can accept all the defaults that come up, just keep hitting enter. Now that’s ready, let’s take a quick look at the Firebase Hosting project folder structure. This folder called “public” is where you would put any files that you want to be hosted. We can see the default index.html and 404.html files that Firebase created. You can put files directly in here like this, or you can use nested folders too. I’ve used Firebase Hosting to serve up HTML, JavaScript, CSS, JSON, and even XML files. This file, firebase.json, is a config file that Firebase creates by default. While we’re here, let’s add the “cleanUrls” value and set this to be true. This will stop any ugly .html file extensions from being visible in our URL bar later. Now we’re ready to give this a test and make sure that everything is working as intended. In my terminal, I’m going to type “firebase serve”. This spins up a web server locally so I can test before deploying anything live. I’m going to click the link that I’m given in the terminal and open it up. Here we can see the default index.html file that Firebase created. So we can see that this is working fine. Now let’s kill the local web server by hitting control + c. I’m going to deploy this site live by entering “firebase deploy”. Once that’s finished running, I’m going to click the URL in the terminal. This takes me to my live site where I can see the same default index page. Don’t worry about the URL for now, this is just the default URL that Firebase gave me. We can set up a custom one later. So now we have everything tested and ready to go. All that’s left is to swap out these default Firebase files for my own Webflow site. Here’s a Webflow site that I built for my previous video series on setting up Firebase User Authentication. There’s a link to go check that out on your screen, and if you’re finding this video useful, you’re definitely going to like that video series too. I’m going to grab my code the recommended way by going to the export code feature in the menu and downloading it. Once downloaded, I’m going to unzip this, open the folder, and copy everything in here. Next I’m going to go to the Firebase Hosting folder I made earlier, remove the default index.html file, and place everything in here. Make sure to remove the default index.html file – you can only have one. Also I’m going to leave the default 404 page because I didn’t make one for my Webflow site. Now I’m going to go to my terminal and enter “firebase deploy”. Once that’s finished running, I’m going to go to my browser and reload my site. We can see here that everything has been pulled through, so it’s all working perfectly. So we just set up Firebase Hosting for our Webflow site, but there’s something I think we can improve. It’s really annoying to have to go and export our code from Webflow each time. I’m not sure if Webflow plans to give us an easier way in future, but in the mean time, let me show you a quicker way to automate this using a script. First let me show you the manual process that we’re going to automate. Here’s a multi page site template that I just cloned. I’m going to publish this and view the page source code. I’m going to copy all of this, then head back to VS Code. I’ll remove everything bar the index and 404 files from my hosting folder. Next I’ll remove everything in the index file and replace it with the source code I just copied. Let’s run “firebase serve” from the terminal and go check out our site running locally. We can see that our home page is working perfectly. We could also go on to repeat this process for every single page in our site – viewing its source code, making a new HTML file for it, etc, but this would take ages. So we can just write a script instead. I’m going to go back to VS Code and make a new file called “deploy.sh”. In here, I’m going to paste the bash script I wrote that goes to my site’s URL, grabs all the pages in my site, puts them into my Firebase Hosting public folder, then deploys my site. There’s a link to this script in the description of the video, but note that this is specific to Linux. If you copy it, then the main things to be aware of are changing the URL value and the hosting folder path. I’m going to make this file executable by typing “chmod +x deploy.sh” in my terminal. Next I’m going to clear everything in my hosting folder bar the 404 page, and run “bash deploy.sh” from here. Once that’s finished, we can see that my hosting folder is now populated with all the pages from my site. So let’s go check out the live site. Browsing through the site we can see that everything’s working fine. It’s worth noting that you don’t need to use this script method to host your site – this is just a faster way. There’s nothing wrong with exporting your site from Webflow and manually putting it into your hosting folder. The last thing to do, is to go to our Firebase project’s page, select hosting, then connect a custom domain. You can just click the button to get started. It’s the same process that you use to set up DNS with Webflow or any other provider. Just note that it can take an hour or two after you set your domain up for your SSL certificate to finish setting up. So don’t be alarmed if you initially see a privacy error. Well that’s it guys, you learnt how to host your Webflow sites 100% for free – and it’s pretty simple too. There are some situation where hosting your site yourself is preferable, so hopefully this video has helped you out. However what I would say is that if you’re in a financial position to do so, you should vote with your wallet and host your sites with Webflow. After all they’re a business and need to make money to keep their amazing platform alive for us to use. As always, let me know in the comments what you’d like to see next, there’s just so much cool stuff we could cover and keep pushing Webflow to the limit. Also don’t forget to subscribe to make sure that you don’t miss out on any more videos like these. You could also consider supporting me on Patreon to make these videos, details are in the description, along with all the relevant links for this video. Thanks so much for watching, and I’ll see you next time!

Comments

  1. Post
    Author
    Quentin Plomteux

    Hi, I like how you are pushing the boundaries of Weblfow. Any plans on showing how to deal with website that have CSM components? Or how to integrate with firebase user data to generate dynamic web pages? 🙂

    Great Job!

  2. Post
    Author
  3. Post
    Author
    Daley Maasz

    If like me you are a Designer that doesn't have your MacBook setup for any kind of Development this tutorial 100% works BUT you will need to do a couple things beforehand:

    1. Install Visual Studio Code – https://code.visualstudio.com/

    2. Open Visual Studio Code, start a new terminal from top menu and then install Homebrew – https://brew.sh/

    3. Once Homebrew is finished installing use it to install wget – same url as no.2

    4. Follow Jason's tutorial and revel in the fact that you just automatically deployed a website, that you designed and built in Webflow, to your own hosting environment courtesy of Firebase.

    Love you Mr Dark – Keep Pushing.

  4. Post
    Author
  5. Post
    Author
    Bryan Fullen

    I haven't quite figured out how to deploy the script properly. It might be because I'm on windows? Thanks for the video lesson, its helped me out a lot in getting set up.
    Here is my error in vs terminal

    $ bash deploy.sh
    deploy.sh: line 7: cd:/Projects/FullenEnterprises/public: No such file or directory
    deploy.sh: line 9: wget: command not found
    Any help would be appreciated 🙂 Subscribed!

  6. Post
    Author
    Thinkrs Agency

    Hi thanks for this great and help full tuto !
    but 🙂 When i'm the step for > bash deploy.sh: line 8: wget: command not found

  7. Post
    Author
  8. Post
    Author
  9. Post
    Author
  10. Post
    Author
    Christopher Neil

    As a noob I figured this out… you must install NVM in order for this to work if permissions are denied or you get an Error saying you don't have 'permission' to the folder. Hope this helps! You can always copy paste the error the code editor spits out and follow instructions from github, etc.

  11. Post
    Author
  12. Post
    Author
  13. Post
    Author
    Max Magna

    what if 'npm run deploy' fails? ie it gets the .html files but no .js, images or other assets?

    For eg am on OSX Mojave and follow your github instructions but get these errors (ps edited out my real url with brackets [ ] but in the version i run it's correct:

    20 error code ELIFECYCLE
    21 error errno 8
    22 error [email protected] deploy: `cd public && wget https://[testURL].io –recursive –page-requisites –html-extension –convert-links -xnH -e robots=off && firebase deploy`
    22 error Exit status 8
    23 error Failed at the [email protected] deploy script.
    23 error This is probably not a problem with npm. There is likely additional logging output above.
    24 verbose exit [ 8, true ]

  14. Post
    Author
  15. Post
    Author
    Dorian Thériez

    Hey Jason ! Awesome work right here ! I was wondering if copy-pasting the source code of your website like that is breaking the terms of service of Webflow ?

  16. Post
    Author
  17. Post
    Author
  18. Post
    Author
  19. Post
    Author
  20. Post
    Author
    Rinaldo Ugrina

    I can't get rid of the webflow badge. I inspect the website on webflow.io to find the class name that styles the badge in the bottom right. It's class="w-webflow-badge" and I can't find that class in the migrated files on firebase. Obviously, the code is stacked and not easily readable, but I ctrl + f and still can't find that class. Not sure if I'm not looking good enough or is it somehow hidden?

    Great video and tutorial. Thanks!!

  21. Post
    Author
  22. Post
    Author
    Paul Harrison

    is anyone having issues with this??? keeps just saying 'npm WARN [email protected] requires a peer of [email protected]^0.4.0 || ^0.5.0 || ^0.6.0 but none is installed. You must install peer dependencies yourself' then when i try firebase login it doesnt work. anyone had this issue

  23. Post
    Author
  24. Post
    Author
  25. Post
    Author
    Germán Martínez

    Can you explain us how to keep using cms content on firebase when exporting your site? like a normal site plus a blog on it. is it possible to do this? thanks.

Leave a Reply

Your email address will not be published. Required fields are marked *