 What is up team welcome back? It's your biggest fan the real Casadero and in this session We are going to be deploying a website to the internet using Netlify We will be able to deploy this website for free to the internet and Be able to completely automate a deployment pipeline and you will see how easy it is to update a website It is ridiculous tune super ridiculous. So let's get to it All right team if you're on a Windows machine and you want to follow along you're gonna want to open up your favorite web browser I'm gonna open up Chrome. It's not my favorite, but it's all my computer and I use it and it works I also have Firefox Firefox developer edition and Edge Edge is my favorite actually But what we're gonna do is we're gonna go out to the internet. You're gonna type code that the visual studio Com and you're gonna grab yourself a copy of visual studio code and that's how you can follow along I'm gonna be using that code editor in this demo and if you are on a non Windows machine You're gonna want to go out to the internet and grab yourself a copy of PowerShell core And you can do that by going to github.com PowerShell PowerShell and you just scroll down here to the instructions read through those instructions real quick and grab your particular operating system You get x64 x86. This is the 32-bit version. So this is for like Windows 8 and Earlier or if you have four gigs of RAM or less Windows x64 you can use if you have More than four gigs of RAM and the only way you can have more than four gigs of RAM is to have a 64-bit system team So there's some some information about computers and then you've got your Linux versions and all that stuff and if you have Windows and you want to use what What it cuts the the version of PowerShell that comes with Windows is not I Don't know how the update life cycle is gonna go But I think I don't know you can get a copy of PowerShell core Which is just it's the same version that's available on all the other operating systems So you have all the same commands Across all operating systems on the actual Windows version of PowerShell You have more commands because those commands are specific to Windows So I use I use PowerShell core myself with their PowerShell and PowerShell core They're identical if you and if you're on a Windows system You just have a choice of which one you want to use team So that is that if you want to follow along also You could grab a copy of Git and you're gonna go to git-sdm.com And this is a version control system and this is going to be an integral part in our Super easy to deploy website team when you see how easy this is you're gonna go like Wow. All right, so Grab yourself a copy to get installed that and then come back team now What you're gonna do is you're going to go over to GitHub And if you don't have an account already, you're just gonna create yourself a free GitHub account and I'm logged in right now I don't let's see if I can see if we do a control Shift in I think I can open a private browser window so we can go with it Get hub.com and you can just create your account here for absolutely free Going there create your account and what we're gonna be doing is I'm gonna be showing you how to I'll show you how to fork a repository So you'll have so you can follow along and do the exact same thing I'm doing here And you will also have a website template that you can use to expand and build on whatever Project you want to build on team or you can just completely Destroy everything that's in there and build something completely different and use the same deployment pipeline I'm gonna be showing you here team, but if you want to follow along I'm gonna show you how to grab the code so you can actually follow along and replicate exactly what I'm doing So you can internalize this information and be able to go out and use it on your own in the future to build your own stuff Lif y com and sign up for an account on Netlify again It's completely free. They may ask you to enter a credit card But unless you have crazy amounts of traffic to whatever website you put on here You will not be billed anything and if we go and we take a look at the pricing This is what you get for zero dollars. You get a custom you get custom domains HTTPS instant get integration continues deployment Deployment previews access to add-ons. I mean you get a ton of stuff for absolutely free It is crazy. And then you go over here and you get into the pro Concurrent bills. This is like when you have when you when you have multiple websites and You're in there constantly being hit with traffic and they're just being updated constantly And then up here you got like the big business plan, right? So I mean This is gonna be this is this is this is wild that you can even do this But then even when you start to like getting a significant traffic The cost is super is super cheap. It's crazy But anyway team you head over to Netlify get yourself a plan on Netlify And this is gonna round out just about everything you need the next thing We're gonna be doing is I have a bunch of domain names on Namecheap And one of the domain names that I have is the real Casadero, which is interesting enough because The real Casadero.com does not work like if we go over here to www.TheRealCasadero.com There's nothing there because I never set it up. I never built it so I have this YouTube channel where I'm talking to people about code and and Motivating them and inspiring them people are out there learning people out there getting jobs from this channel I'm saying hey go build this website and build that website And you can do this and you can make money with that, but I don't have my own website set up So that's what we're gonna be doing team I'm gonna be showing you how to set this up and as time goes on I'll be walking you through the process of how I'm adding new features to the website And we're actually going to go through that process today So you can see what a deployment looks like using the system that I'm about to show you to is super fantastic So what I have a I have a domain name here in Namecheap that I've purchased called the real Casadero Obviously and what we're gonna be doing is we're gonna be setting this thing up from scratch So we're going from no website on the internet to deploying it to the internet setting up the domain name So when you type in the real Casadero.com You see the actual web page that we built now also if you would like to build this website Just head over to youtube.com and look for build build the supreme Website and this this is the tutorial where I show you how to build the exact website We're gonna be deploying today, and you can also just search for it. So like if you just go on and you say Build the supreme website control C and you go right up into the youtube home search bar Right there and paste it in so we got build the supreme website It'll be the first it'll be the first course that comes up theme. So I'm gonna close all that out I'm gonna hit the windows key, and I'm gonna type pwsh to open up PowerShell core And I'm gonna hold the control key and scroll up to zoom in and we're gonna be going into CD of the superior Project is what I named the project folder with the dir so in here. We got index html javascript files You know all the stuff for the website. So what I'm gonna do is I'm gonna launch this directory in visual studio code and I'm going to I'm gonna show you what the website looks like But then we're gonna commit it and we're going to create a repository on get in and at that point You will be able to go and clone this code and I'm gonna show you exactly how to do this team So so you'll see exactly what I'm talking about. So we're gonna do is we're gonna type code dot This will open up this current folder inside of visual studio code I'm gonna close all this out and these are our these are our actual application files right here So we've got our index and this is our JavaScript folder so on and so forth And if we go and we start our live server, which you guys can't see is down here by my head Let me move this over So if you go down here and start and hit go live, it'll bring up the live server and Bam right. This is the website that we're gonna be deploying now What we're gonna do is we're gonna I'm gonna I'm gonna show you how to deploy it and then I'm going to delete the local repository and I'm gonna show you how to clone a repo and at that point You will be able to grab of this repository yourself and follow along for the rest of this tutorial team. All right, and so For the website what we're gonna do is we are going to we're gonna save everything everything saved already We're going to deploy to get and then we're going to go out and we're gonna point the domain name to it And then we're gonna make an update this clock right here right now. It doesn't work So we're gonna go in and we're gonna learn some new JavaScript for those of you who've never used JavaScript before This is gonna be a crash course on JavaScript as well So we're gonna go in and we're gonna set this clock up. So it works The way we want it to work like it updates the date and the time and then we are going to redeploy the website But you'll see like when we do it is just gonna be one command and the website's gonna be live on the internet We can do this over and over and over again Before we get into that, I'm gonna tell you a little more about Netlify. Netlify is what's called. It's a static Hosting service so it only hosts static web pages But what we can do is we can use static site generators Meaning we can build programmatically complex websites and then we can use a static site generator to process to preprocess all of that data So just think of it is like if you're working on like a big application, you would compile it into like a single file This is like that in reverse so Every every possible page on our website is gonna be generated Prior to that website being placed on the internet and what this does is it makes the website Extremely fast because any page that the user acts for it doesn't have to be generated by any code It's just sitting on the server Ready to go already So this system that I'm showing you is designed so you build your site on a local machine and then you The you you save it as a git repository and you push this repository to get and Netlify sees when this repository has been updated and it then runs whatever build command you set So if something so for a single page web application What it would it would run the build command and it would process all of your HTML files However, you have it set up to to to mash all of this stuff down into single web pages And then it'll deploy those on this CDN and it'll be distributed across the internet And then when people come to your site your pages will load Significantly faster than everybody else is because the web page is already Made it's just made in sitting there, and we don't have to do anything. So once we get everything set up on our system That's it and we can we can literally Deploy our code to GitHub and delete the repository from our local machine and not even have to worry about it And when we need to make an update we can go grab the repository Set up all the the framework that we need for our local development make our updates and then go on our way And we can even go and we can take it a step further than that and we can build a custom back end And we can use Netlify functions to execute any kind of code that we would need to execute So we have these so we can have a static back end That is powered with these functions that enables us to do things like make updates So we can build a back end for a blog and go in and be able to make updates to it Or be able to add new features or or make updates to the website And so we can build like build out like a whole type of template system And eventually we have our own product that we built that we can use To scale up and down whichever way we want So but that's like getting way out there and it gets a bit complicated team So what we're going to do now is we are just going to uh, we're just going to put this off to the side We're going to go over here. We're going to close out this main.js actually We're going to go back into PowerShell team and we are going to clear the screen and we're going to do a git Status and it says your branch is behind origin master by two commits and can and can be fast for it It's saying this because it doesn't it doesn't know that um It does it doesn't know Because I previously deployed this to git but I went and I deleted it from git So there's nothing there. So like if we do like a git push It should fail because that repository doesn't exist So what we're going to do is we're going to go and we're going to create the repository And this is why you create your github account. So if we go back to our browser and we go over to github.com team We're going to go right here to new repository and i'm going to name this repository the real cassadero landing page And we don't need a description. I'll just leave it at public and we're going to go Create repository And so now we have This repository is online and it gives us the commands we need to run in order to set it up and git So we'll just grab all of this information we'll copy. We'll go back into PowerShell and just paste it in Hit enter All right, and it told us that that repository wasn't found So what we're going to do is we're going to go back over here and we'll just grab this part right here Control c we should be able to go back and paste this in and hit enter fatal remote origin already exists all right, so Now we should be able to get push you Control c and it may not work. I'm gonna have to go in here and Fix something team a remote repository not found. All right, so something is wrong. Let me double check this All right team. So after reading some stack overflow, right? It seems we just have to remove that old origin So we should be able to use a git remote remove origin. So we'll just grab this right here Copy it control c go back over to PowerShell paste it in control c And it seems to have executed with no problem So now what we can do is if we hit our windows v key, we've got all of this saved Information in here. So we can grab this git remote add origin. So we'll grab that And hit enter and now we've added that new origin and now we can do a git push So we'll do a windows v we can go back and we see this git push Hit enter and now this is gonna push everything up to github. So now If we go back to github, but we'll just close out this stack overflow window And we go to the real cassadero landing page You will see the javascript image in css file Now what we're gonna do is i'm gonna go back over to power shell and i'm gonna do a cd dot dot and i'm going to do a dbl of the superior project Enter and yes And it is it's probably giving me all these errors because it's open inside a visual studio to look close that Let's do a dir And let's do a dir dot s u p e r and that is going to bring up just superior So let's try to delete this again. We'll do a dbl And we'll just double click Right click right click and we'll do a dash force to see if we can force delete this and we'll do a Eight for all And now it should be gone. So if we go back and we run this command again, there is no more superior project holder So now team let's close everything out and we are we are on the same page We we both are just starting from scratch. So this is what we do We'd go and open up our favorite browser And that's what i'm gonna do and we would go into microsoft And so i'm in microsoft edge. We just go over to github Dot com ford slash the real casadero And we're gonna go uh-oh. Uh-oh. Uh-oh. W. W. W dot get Hub dot com ford slash the real casadero Enter this should do it. All right. So now we're on my page. We hit the repositories And let's see. All right. We got the landing page And so i'll probably change the name of this repository or something else And so we can do that right now so we can go edit and we can name this We don't want to change the description. So let's go up here to settings and see If we can do this right so right here. We can rename this So we're gonna go in here and we're just gonna name this Supreme Actually, we're gonna name this Superior superior right or And so we'll rename that boom boom. All right. And so and So it's renamed team. All you got to do is go over to github dot com The real casadero four slash superior and you can grab all this code. So what you do Is you go to clone or download and you just copy this we click this link right here And it's gonna copy this link and you would go back into Whatever terminal program you use I use power shell and i'm gonna zoom in so you guys can see And we are just gonna do a we're just gonna paste it in And actually we'll go home and we're gonna do a git clone We'll hit enter and this is gonna clone this and now we have this directory and the directory should be named superior I think so we'll do it dir and what i'm gonna do is so we can do a dir And then we can sort Descending and we can do it by last Right time. So what that should do. So right now we have this directory superior So we do a cd s up superior And R and now we're in the directory so we can do a code dot enter And this is gonna open it inside of visual studio code And right here we click go live and our website is back Right, so now we can do we can make whatever edits or anything we want So now We've got this on github, but we want to deploy it to the internet and there's a way we can do this with github too I'm just more familiar with netlify Um, mainly because netlify gave access When I found out about it to Serverless functions, which means like you can build these full web applications And not have to have a dedicated server any kind of logic you need to execute You can execute using a serverless function and like the way they work is pretty phenomenal You can actually go in and you can have a function set up a whole virtual machine Do everything it has to do and then when it's done tear it all down and it like happens in seconds But it depends on like for building just websites like everything is super quick If you want to build like something like massive in scale, then maybe this isn't the route to go But if you're building like stuff that works across the internet, then this is this is the route to take team All right, so we'll go back over to netlify. So just go netlify dot com And so now we're in netlify and we're gonna log in team And so we're logged in and what you're gonna do is you're gonna say new site from git You're gonna go to github and if you don't have your github set up It's gonna walk you through the entire process And what you do is you just set it up for your main github account And then you can see all of your github repose and we can go in here. We can type superior But actually we'll just type super and we hit enter and it'll bring up superior right here So we click on it and then it'll ask us some questions and right is who's the domain owner right? We can say right and you can have different teams in netlify and I just have one team And then you can have what branches branches you want to deploy And I haven't really gone into setting this up But what you can do is you can deploy a master branch And then you can have another branch that you deploy as a secondary and you can set them up to be ab split tested And so then like when if if if you find if you determine that your b Is performing better than your a all you have to do is merge your b into master And now Like your your new website is deployed like you don't have to go through A whole bunch of different stuff So once you have it all figured out and you get your pipeline set up It's just super easy to administer So like down here we got our build settings and then if you're using a static site generator or build tool We'll need these settings to build your site right so they read your read your code And then it just needs to know what Commands I need to run in order to produce Your website on the other end So if you're like using like babel or webpack or something to like compress your code and generate files and stuff like that It'll run all of those commands But it talks about static site generators because all it serves up is these web pages So when you run your commands, you got to spit out all your web pages To html with all the links set up and everything and that's what a static site generator does team But as you can see you don't have to generate anything if you're building your site from scratch And as time goes on and you understand the stuff more you can build your own static site generator because all you're doing Is outputting to regular html files and then uploading those files to the internet That's what's going on at the core of all of this. So you would set everything up. We're just going to be Deploying our master branch. So we're going to deploy this site And when we when we deploy it netlify is going to check and see if there's any build commands There's no build commands is just going to take The files and put them on their cdn and that is it the site is online. So if we go to a vibrant dash Montalcini whatever this is dot Dot netlify.com we can see our website On the internet. So now our website is out here on the internet But what if we want to point a custom domain name to our website? So what if so right now if we go to the real casted arrow dot com the real casted arrow dot com Right, nothing does not work team. So what we're going to do is we're going to just point it right over here to netlify Right right here to this website So people can come and they can uh, they can use the real casted arrow dot com and they can buy hats and they can go uh, and they can go to To get they can see the suggested books that we have and they can check out the The random link which takes you over to the code 365 startup lab or you can support the channel It's stuff like that team. So What we'll do is we'll go back over here to netlify and and again you can follow along and do all of this Stuff we're about to do it right now team. So we're back over here on netlify And we can go into domain domain settings and we go down here to add custom domain And it's going to ask us what we want our custom domain to be and we can say we want it to be That the real Casted arrow dot com and it's going we're going to say verify Now if we don't own this domain already it's going to say hey You do you want to buy this domain and you can buy it right here and be done? And it's just and everything will be automatically set up. But because I already have this domain name or netlify um, it's going to say Already has already has an owner. Is it you and yes, I'm the owner So I'm just going to hit here and it's going to give me the instructions on what I need to do to go set this domain up So team it drops us right here in the um in our And and basically the control panel for for our particular website and so we can control everything from here and right now It put us into domain management setting and this this is where we're going to be working to get everything set up So right now what I'm going to do is we'll go here. We'll go edit site name and we can change this Right away. So we can change this to the real casted arrow and save And now we can go to the real casted arrow dot netlify dot com and we don't have to change this This is just me changing it to make it easier. So we can go to the real zero dot netlify and I could have just copied this com and now It goes to this webpage. We want the real cast there to go there, right? So the real casted arrow dot com still doesn't work team So we'll go back over here And it will give us the instructions that we need to go get everything set up So if we go down here, we take a look primary domain Right, we can see edit remove set up netlify dns And so automatically provides dns records and wild card certificates for all subdomains I don't think this is what we need to do. So we're going to go back into the settings So what we do is we click here on check dns configurations and it'll tell us the configurations that we need So it says log into your account. You have your dns provider and add a c name record for Pointing to the real casted arrow dot netlify dot com. So the c name record is going to be right Here and so we're just gonna well, well, we'll copy this and then if we go over to name cheap So we'll just close out one of these and we'll go back to the name cheap And all I have to do is log in So let's see So we're logged in team and we're going to go to our domain list And over here in search. I'm just going to type the real Casted arrow and it is right here and I'm going to go into manage And in manage it says we need to add a Where is it if we go here check dns log into your account on your dns and add a c name record for www pointing to the real casted arrow dot netlify dot com So if we go back in here into our domains, we can go over to advanced And inside of our advanced domains, we've got some records in here already, but these aren't the records we want So I'm just going to select all of these and we are going to do a bulk action of the move And all of these are going to delete one by one and sometimes it doesn't always work. So we're going to do this again And I'm going to go out and refresh this and when I come back all this will be gone So I can't get these to go away. They keep coming back, but that's fine team Because what we're going to do is we are going to set This one right here up top remember if we go back into our domain list It's going to say c name the real casted arrow dot netlify dot com so we'll copy that superior We'll go back over here to name cheap and we'll just paste that in right there Bam, and there is another one if we go back over here. Let's see Let's close this and then the real casted arrow says check dns configuration and then it says the alias So let's see there are two options for pointing a root domain to netlify recommended point Point a name or alias record to netlify.com use a dns provider that supports a name or alias records And alias the real casted arrow dot com to the real casted arrow dot netlify.com We recommend using ns1 or netlify is built in dns service for this See the real casted arrow dot com alias the real casted arrow Alternative pointing create an a record for the real casted arrow pointing to our load balance through ip address So basically what they're saying is like we can set up a pointer That will send all traffic That goes anywhere, but The real cast that goes if it goes to the real casted arrow Like if you just go to your browser like i like i've been doing if you just go up here and we type the real Casted arrow dot com it'll redirect to the root domain at That's that's what it's that's all that's saying here So you it ensures that you always get all of your traffic. So here let's close this out and we'll go back over to netlify So what we can do is we can just grab this ip address control c go back over into netlify and we can do a Do do so we can go down here we can change this to a Instead of the c name record we can go up to an a name record and we can just paste this Right there. Hold on. What's going on here team? Please provide a valid ip address So I think we got to take this dot off the end and check mark here And check mark their team and that should be it. Let's go back over to netlify All right team. So everything's set up now another thing we can do that makes this even easier is we can go back and let's go over to Netlify and we'll just delete these. Yes, we'll delete that one there I mean not netlify by name sheet and we'll delete this one here and now Right these these automatically go back to the parked pages and then this one redirects But it won't it won't go anywhere because the website doesn't Like it doesn't there's no server for it right now. So the control t control v And right now it it works, but that's because we already populated this domain information. So if we go back To netlify and we remove these domains remove And we go add custom domain and we add it back. It should show Caster.com it should show that that domain can't be Verified but it says it can be But essentially there is another button right underneath here And what I might have to do is let's let's do this team because I'm going to go back Just to just to show you guys and make sure we get it completely right as we go all the way back Out to our domain and we're just going to delete this one all together So if we go if we go in here and go to settings And scroll all the way down we can go delete this site and it's going to ask us do you want to delete it? We're going to say yep And now that site's completely gone so we can add it back. So we're going to go new site github And we're going to go in here and type in superior And now we're just going to do the same thing we did before and it's going to deploy the site again And it's going to give it a whole new name So now we've got this site is back online, but it's under a whole new name I don't know if this other domain name works anymore, right? So that's gone and then if we do The real castadero.com That's gone also All right, so if we go back here this this is This is the website we have online right now the one that we just deployed So what we're going to do is we're going to go in here into domain settings. We're going to go add custom domain and then And put www.realcastadero.com and your site you would name it whatever you want And now we're back in here and well it goes in. It says it's verified already. So let's go in here and take a look and see Edit domain all right save That may be it. Let me be it. So let's see. It should say Right here if we click here, it'll bring it up. So now when we do a control shift in Not control shift in but a control shift key this opens a private browser window and now we can go the real castadero.com And it works it redirects here, but we get this line across our lock Because we don't have our ssl certificate. So It it works everything works the way it's supposed to so if we do a control t you can go www.therealcastadero.com And we can do a tab and we can do a the real Castadero.com the real castadero.com all right team. So now That we know that this website's working. What we're gonna do is we'll close that out. We'll just drag this down or actually All right, so I figured I figured something wasn't all the way right team So we go over here and we go into edge and we open this page and boom right there is nothing there The real castadero.com isn't working. So How we can fix that team is there's no big deal We just have to go in and we have to just provide some settings that netlify tells us to right So if we go here, we click here and we go to where is it if we click on this netlify It says set up your D set up your domain to point to these servers right here. So we get ns1.net So basically there's one two three and four So what we can do is we'll just grab this one here control c and we can go back over to namecheek and we can point our Domains, I mean we can point our Yeah, we can point our domain name to the namecheek servers I mean not the namecheek to the netlify servers team So another way to set this up team is to just back out of here, right? So We can go back to just domain And then over here Down where is it right there? We can set this to Namecheek namecheek basic dns actually not namecheek basic dns but namecheek web Should be custom dns. There we go. And we can just paste this in And then we can just create all the ones we need. So we got a two And we can go another one if you added three All right, and I've added I think there was eight so if we go back over and I get all these websites Close this one and we don't need this this one doesn't work anymore if we can refresh I think it's getting from the local cache. So we'll close that We'll go back over here and oh there was only four. I don't know why I thought there was eight So anyway, we can go back one two three Four all right, so now we got everything we need we can save those teams And let's see it is going through his thing and that should be it. So now Everything should be set. So and it takes they say it takes up to 24 hours for this to work Let's go back into edge real quick and we'll refresh But sometimes it'll work like right away But typically I find like in like 15 20 minutes like everything will work the way it should so let's try And yeah, nothing is not working just yet team. So I'm gonna go back in here and double check some saying so we'll go back Into our domain. So we've got uh-oh what's going on here team Domains add or register a domain. Let's see. Let's go back in our sites real casted arrow and then we've got our domain settings We've got our domain name right here All right, so we should have everything we need to Again I don't trust it when it's coming from here because we've already been down this road before And we already had it set up on the internet once The first time we did everything. So this time We stopped everything and now we're starting everything again So it's gonna it may take it may take a little while for everything to show up Back here Yeah, so what I'm gonna do is I'll I'll end the video and when everything populates I'll come back So with video magic it is all fixed Now and actually another thing team right if we go down here It says waiting on DNS propagation. It says we'll provision your less encrypt certificate automatically once the DNS configuration for your custom domain Is pointing to our servers and the changes have propagated And so what we get is we get a free SSL certificate So that means that all the traffic between our website and whoever accesses our website is going to be encrypted team Or we can provide our own certificate Like if we bought one with our domain, we can use that one and the certificate is just a file It's two pieces one it goes Or it's for the public and one is for the private and what happens is whenever somebody connects to your site They receive a piece of information that tells them how to encrypt your website And what will happen is when they they'll send a request to the server For the actual site and the site will come encrypted and in order for The their browser to be cryptid they have to have this key that they requested Before hand So that's what that whole thing is and when when SSL is enabled you'll have a lock next to Your address bar and on some browsers like the HTTPS It'll be green So let's go down here if we can hit verify DNS says DNS verification Realcast.com does not appear to be served by netlify. We can't provision this certificate Right. So it's still going through this process, but when it gets through the process everything will be set up And we will be able to um Our certificate will be working will have the lock And everything but we can still go in and we can still make updates to our website So what we're going to do is we're going to go in and we're going to make the update to make this clockwork Um to just to show you how easy it is to to deploy the website because we can still access it like if we go to our Just right up here. Hold on. Let's go back to domain and site We go back here to the real cast of derro and Over over here. We click on it. It's still working. So let me here too. Uh, but if we go down to where is it at? Uh, it's because I have the domain set. So let's go into domain settings And then if we look at this one right here, we're just going to change the name too We'll edit the site name or we'll change it to the real cast of derro We'll here the real cast of derro CDARO.com the real cast of derro dot netlify Actually, so we just need to type the real cast of derro. That's it All right, and it's going to go to netlify. So save so now we can go to The real cast of derro That netlify.com and as you can see right, we have the lock for our certificate. So any updates or changes that we make we're going to see They're going to be reflected here on the internet where you can see this website So we're going to do is we're going to go and we're going to make this clockwork And then we're going to deploy that update to the internet and it's all going to work the way it's supposed to team So team things feel a little bit cluttered to me right now. I'm going to close out power shell Let's see close this out. I'm going to close out all these windows So we'll close those tabs and now we've just got visual studio code So we will Grab this and double click to make it full screen control w to close this And now we're in our project folder and we're going to be updating our java script So we're going to our main dot java script and we'll set this to split screen team and One of these files we will need to make an index.html. So we'll go over here And so now we've got our index.html team So let's move this over just a bit and what we're going to do is we're going to go grab this clock And now be but before we do that What we're going to do is we're going to put these two different things We're going to put we're going to put the date inside of a span and we're going to put the hours inside of a span So down here underneath why actually we'll just do it like this will go Enter enter and then we'll say span Enter and then we'll just grab This date control and actually we don't even need we don't even need to grab the date Because we're not going to be using it anymore. Anyway, so we'll give this an id of clock date so to be id clock That date and we're going to make another span. So we'll just duplicate this one And we'll give this an id of clock time Time and then outside of that span. We're just going to have this specific This PNW right And so what we're going to do is we're going to use javascript to get these spans into populate them So we'll get rid of all this space that we don't need here team So we can go home And we'll get back And then down here we've got the very end of our h2. So we'll just Put this right there and now our code looks just it looks a little bit bigger. We'll get rid of this line right here Okay Uh-oh, what did I do? All right, okay Where are you curse her control just okay. All right Okay, so when we save and we go look at our page By hitting the live server which the the button is that's behind my head And if you guys don't have live server if you click these three boxes and just type in live server here live server You can go and install it Just by installing it there. So let me close this out with a control w and a control w to get rid of that And everything went away. So we'll split screen again and then we'll go back into our files And we'll just open up rjs.main right here. It contains this index.html So we split up our clock in in again, right? So if we go back and we look at our site like now our clock is gone That's because we took everything out. So what we're going to do is we're going to go grab These elements and so We're going to have a clock a date control c and we'll go here control v And in javascript, we can't have variable names like this. So we're just going to date and then we're going to go const clock date is equal to actually and it's not going to be clock date It's going to be clock date display d is p la y And we're going to set that equal to document dot get element by id And the id we're going to use we need to parentheses here the id we're going to use is clock date So we're going to go grab this clock date and we're going to store it here inside of this variable And then we're going to use javascript to update this when we need to So we're going to duplicate this and we're going to grab the clock time also. So we'll go clock time All right clock time And just to show just to demonstrate you guys how this works is we can do something like clock Actually, and let's see it can be clock date. This will be clock time display clock time All right. And so now down here we can do something like a clock date display Is equal to well actually clock date display dot inner html is equal to Today and if we save that and we go look at our site refresh Nothing's there because we have to go update our html. So if we go to the bottom of our html right above the body We're going to put in a script And we're going to go down here and select source And we'll hit enter and our source is going to be dash We'll go down to js and select main dot js teams and save And now when we go back over here, it says today and that today is being placed inside of those brackets by Our javascript All right, so there's nothing there but we're grabbing that information here and we're storing it in there later on We're going in and we're manipulating the properties inside of that value team So now that we know we can do that with to with the date We can also do that with the time so we can do It would be clock time Display dot inner html is equal to and we can say Uh now save and if we go back Uh-oh. Oh, what is it clock time? Oh, there we go clock time. So this one'd be clock time. It would be clock Time there we go ti In e and save if we go back here now All right, so it's just today and now so now we want a working clock in here So what we're going to do Is we can go down here and we will just make a working clock and so javascript has this function we can use we could say current date Time and we could set that equal to new Date and what this is going to do is going to tell javascript that we want the date object And it's going to take that date object and it's going to put it inside of current time So after we grab after we create our new date object, what we can do is we can say clock Date display dot inner html Is equal to and we can set that to our current Date time and we could do like date. I think so we can save this and We can comment this out and save and if we go back to our website We get it undefined because it doesn't know what i'm talking about. Let's take this out control s And now we get this Time in here. So now we just have to change the format to this to something That's that's a little more readable So typically what will happen right is is me being a supercoder. I would just go back over here And I would just recode this off the top of my head, but I'm not a supercoder. I don't know how to do that So we can go out to the internet and we just type go to microsoft edgy and we'll say um how to get date in javascript And the internet will show us how to do that, right? So we got this get time method. We've got get full year We've got get months. We've got to get date, right? So there's all these methods, right? So we got these javascript date methods and so Let's see. We've got get time method returns the number of milliseconds since january blah, blah, blah Let's see So here let's Let's try this, right? Let's go back and let's see if we do a clock display document And then we can say Current date time Is equal to new date And then let's see Current time is equal to it Well, let's say new Time let's oh, hold on. Let's go back and see what these guys are saying So let's see the get time method returns the number of milliseconds so far d equals new get date document idea D dot get time. All right, so that's what I thought So I got this all jacked up in my head thing. So we go back here. We get rid of this We have our date. So what we do is we take our OZ And we can take our current date time. So we go current see you are our current date time dot date No, not dot date dot get time. All right, hold on. So we say so v dot get Date Say you can go back. Let's see Actually, let's go back and do this. We'll go because we've got so we've got current date time Clock display document. All right. So let's get rid of this. All right. So we have nothing to plan now Let's get rid of this Everything's a bit clutter. We'll get rid of that Here and let's see current date time date and There we go. All right. So we're making on it. So current date time We have our date object there and now Let's do a We don't want current date time. We're going to be current time is equal to current date time And it should be dot. So let's go down here. That's gonna get That get time Time And let's see. So let's see and then down here. We're gonna say Our clock display time Our clock time display also our clock Time display Is going to be equal to Our clock time display that inner HTML Is going to be equal to We can set that to I'm going to use what's called a template literal here And inside it. This is just a string that we can put a variable in. So inside of this variable. We're going to put our current time save And let's see what this produces for us, right? So it gives us the time in millisecond So we'd have to like split this up with like some sort of time function or something But this looks pretty cool team. All right. So we've got we've got our current date time in milliseconds from Like 1970 I think and so like if we there's a math calculation that if we perform it on this it will It will it will fix this but anyway team So i'm gonna leave this at that and you can let's see if you can go in and figure out how to make this Look like anytime you want. I've already given you the blueprint team, right? If we go back over here W3 schools, we can just look at the date method and it'll tell us how to make all of these formats and everything But i'm going to close that out now team and what we're going to do is we're going to make an update to our actual website So if you go back out here, let's check out and see if The real catheterer.com is working yet in x list of control shift p And go to The real catheterer.com. All right in this working is just the certificate isn't set up yet. So right now If we look at this page, of course We've got this old clock that doesn't do anything. So what we're going to do Is we will control b to close that side panel And we just need to be we don't even need to be done with this anymore. All of our code is done Right, we've gone in and we've made changes our clock to milliseconds. So We can close this out and make sure everything is saved and then we can go back into pwsh power shell You can go into our project directory. I'll scroll in so you guys can see And let's just make this a little smaller and we'll put it over here next to mr. Bunny rabbit So there's a little like this All right And so now what we're going to do team is we will go into our directory, which is the superior. So cd sdp Into dir. So now we're in here. We're going to get status And these are the files that we changed so we can do a clear semi colon and do a get diff The qf and this will show us the changes, right? So here's the changes we made right up here with our clock We remove that and then we've changed these into spans and if we hit the space bar Oh, it says it's it down here. Oh and then in our code, we just remove some spaces All right, so we can do a q to get rid of this. Let's do a clear semi colon get branch to see where branch we're on We're on the master branch so we can do a get add dash dash all Semi colon and then do a get commit dash m and we can say Made Made It so the clock is functional And display Time in the number of Millisecond Since I think it's since january 1st 1970. I could we uh, so since You see jan one Jan one one nine seven one nine Seven zero. All right, let's go back here make this j a capital j Go over here and in this right there And now we do enter and everything is done so we can do a get a status We can see everything's done right team. So now we can do a get Push and this is going to push everything up to the internet And we can actually go into netlify and see the status of this deploy but not from here We're gonna have to go back netlify.com So we go here log in Go find our site And it says deploy last publish 133 and up here at the bottom of my screen You can see 133 and if we go and click this It is I don't know a second so long All right, so it had some trouble loading because The all the dns information hasn't propagated yet, but we can still go to the real Casadero d a s a b a r Dot com or that mean Casadero the real Casadero that netlify Dot com All right, and now we can see it has been updated and we can update our site like this anytime we want team And in like I said, we can go as far as to we can create our own user interface with our own server setup Anything we want to imagine team we can do But that's how you can deploy a website to the internet and that is some super basic crash course introductory java script. Let's just go back And take a look at this. So let's go. Let's do a um a code j s main dot j s and take a look at what we did here team So what we're doing at the very top Right is we're going in and we're we're setting a variable in this variable We set to constant because once we get this information from the dom We don't want it to change. So like we don't want to be able to go and alter this clock date display So once we got that information is just there now We can't change we can't change. So think of this as an address, right? So we're pointing to a place in the Dom we can't change this address But we can change the properties of what's inside of it if that makes any sense team That's why when it when we come down here after we create this date object Using the new date and what we're doing is we're saying hey, right whenever we load this program. We're going to create a new Variable and actually we can this should be we can set this to cons too. So save And this isn't going to affect our application. We'll just go back over here and we can do a If we do a get status, right? It's the same thing, right? Like so we change something so we can go in here and we can do a get add all get commit and then we'll just change the commit to And then what do we change in here? So if we go back Take a look currently time. Oh, we say Set current date time object to constant, right? So we go set current date time object to constant And then we can do a save Actually and then save and then we can do a get push And this is going to push it back up to the internet and it's going to it's going to instantaneously be deployed again So what so I set this to a top to right? So what we do is we get this date and now we can't change we can't change The fact that this made a new date, but we can change the properties inside of the current date time So here we can go current date time is equal to current date time Get time and this get time is a method inside of the current date inside of the current time this Get time method is a method inside of the date object So what we're saying essentially is go run this method inside of current date time, which is Basically is just a copy of this date And when it runs that method it just looks at the current date and it does and it Counts all the seconds back to january 1st 1970 And it sets this value equal to that And then here we say hey Go grab the clock display which we set up here And we're going to change the inner html of that clock To look like current time and current time is just that number of seconds And so that's how we get those seconds so we can alt f4 to close that and we can go back out here to our page or netlify And refresh and you can see nothing's changed because we turned that into a constant team. So that's how you um That's how you deploy a website using netlify And that is some crash course introductory stuff or some javascript team if you want to to Learn how to build this website from scratch. There's another video links in the scripts in the description below Is well team and you can also support the channel by checking out the code 365 a startup lab and actually go here and we click on random Code 365 startup lab is a membership community that I am looking to grow and All the support I can get will help me do that team. I have the discord channel already I just have to get it set up so everybody can get in there and I've got more content coming right now In the lab, we've got finding our first clients and then we've got the introductory To html and we dig deep into the tags. We cover some seo stuff But the goal is to finish out html this year and it's going to be broken out into a standalone course called html genius And what html genius is going to do is going to show people like hey Look, there's a lot more to html than what you're seeing in these tutorials There's tons of more tags that you should be using and you could be using to get more traffic to your website And you should be building your own Websites you shouldn't just be learning this stuff so you can go code for somebody else and get a job You can build your own websites Over time and monetize them and turn them into an income team The biggest mistake that I made was I didn't do this and I know I've known how to do this forever We've just sat down and built the website and uploaded it to the internet and I could you could be doing this once a day I could be doing this once a day We all could be doing this once a day and searching and optimizing them In in in getting traffic to them and then putting advertisements on them and getting people to click those Advertisement and making money from these websites. So that's what the code 365 startup lab is all about teaching people and working together to build The the to to to be able to learn the code for fun and profit and build things that are going to support us in our Lifestyle so we can do the things we want to do live the way we want to live and be the people that we want to be team So that's the way to support the channel and you can also check out Rightcode drink coffee dot com where you can pick up a hat like this or a mug or a t-shirt or a sticker Whatever team a bunch of stuff there So if you want to show some support do that and also hit the subscribe button Click that notification bell so you're notified when new content comes out And I look forward to seeing you guys in the next episode and also stay tuned For the daily Show that's going to be coming here to youtube and we're also going to have a daily podcast So you can either listen or watch or watch and listen or whatever it is you want to do team So stay tuned for that. It's your biggest fan of real castadero and I will see