How to Make a FREE website using Google's Firebase in 5 Minutes.

what's up you guys nate here from minutetech real quick i'm going to show you how to create a really simple website and then host it for free using firebase from google so the first thing we're going to do is open up firebase console and if you're not already using the google suite i highly suggest doing it get started on your firebase project we're going to call this firebase tut and allow google analytics to do its thing and we're going to let that do its thing in the background and i'll be back in just a couple minutes all right looks like it's getting finished up and our project is now ready we can continue in and see all the fun tools we have or what we can do is just get started on our html page so we're going to do is come here and go into our documents folder and we're going to make a directory called firebase cut and go into that and if you haven't already this is when you're going to want to npm install globally firebase that way you have all your tools you need to keep working with firebase since i've already done that i'm just going to go ahead and firebase and knit so that's going to create a project within our directory boom we're going to need hosting so go down space on that and a lot of these are really powerful and you will probably need them for whatever project you're doing but for now we're just creating a simple one-page html page that says welcome so just gonna need that hosting we're gonna do it on the nate minutetech and we're gonna use an existing project the one we just created earlier firebase tut all right we're going to use this directory right here [Music] we are going to do it as a single page and we're not going to use github all right so we've got that all ready to go and if you have visual studio code set up properly you just press code and period and that will open up your current directory in visual studio code just like that so we've got our public folder here with our index.html and a couple of other files here that you see so this one is a json file that's just some data about what our vibrate firebase project includes and then another looks like another json file as well as well as our get ignore which doesn't really matter since we're not using github so this is the only one that really matters we're going to edit this first of all change the title to my dope website and get rid of all this stuff don't need any of this style we're going to create our own style probably later and we're going to change all we don't need any of this don't need any of this all right there we go so we can save that that is our website right there that's what it's going to be when we load it up and to do that we're going to open the terminal again and we're going to go firebase serve and if you are on a mac like me you might want to run it on a different local host than localhost 5000. that's going to be i'm going to do only hosting on the port that you want so for me that's going to be 5002 otherwise otherwise your mac is already using port 5000 for something else so it's not going to work and here we go we got a debug log now that file was just created and we should be ready to go at our local server house so let's go ahead and open this one up see how that looks boom there it is my dope website and welcome so we got our website looking the way we want it to and it's running here in our on our computer locally but we want it to run on firebase right so what we're going to do is we're going to close out of this control c and we're going to firebase deploy and what that's going to do is it's going to put our website up on the internet live and it's going to give us a uh url to get to that website as well and here it is our url you can check that one out make sure it works boom there's our website mydope website live up on the internet just like that uh you can change the url within your firebase console you can obviously add more files more html files javascript code css files for styling but this is how you get a website up on the internet for free there you go if you got any other questions feel free to leave a comment below and thank you so much for joining

Channel: Nathan Elkind

Views: 4,669

Keywords:

Id: dGjnb5ib3h0

Length: 4min 58sec (298 seconds)

Published: Fri May 13 2022