Lessons

Lesson Info

Uploading via SFTP

Hey there in this video, we are going to use V. S. Code to connect directly to our host rather than using kind of anything else or using their website. It's all done within V. S. Code. We're gonna install this plug in called S FTP. It's gonna show me everything on my site nicely and when I want to upload stuff, I just right click it and say upload and it ends up on my website, symbols. Alright, So in this video we're going to connect directly from V. S. Code, We're going to use something called S. FtP. Okay. And it's one of the extensions like we did earlier, remember we did the extensions for html hint and live server? Like the other ones there is SFTP is the most common one at the moment. It's the one that I use and it seems to work real good. It has 4.5 stars. Okay. And has a chunk of downloads. So you will check when you're doing it. You know, there's other ones in here that one's got less less stars. That's what we're going to use for the moment. I have a little read through how i...

t works. I'm going to show you how to do it. The main one for this one is usage says you need to do this thing. Okay, You need to open the command line. Sorry, the command palette and run this thing and I'll show you how to do that in a second. But basically there you go. There's a that's what we need to put in the kind of details. So let's install it first. Give it a sec. Alright. It's installed. Nothing really happens. You might have noticed there's a new little icon over here which doesn't quite work yet. We're going to set it up and that's what they're saying here. They say, do this, run the shortcut on windows or on Mac and then type this in. So we'll do that. And the long way is under view and command palette. So command palette is, you're able to tell the, you know, give kind of commands to these plug ins. It's kind of a crude way of doing. It depends you might be happy with terminal or command line. Some people aren't. So what I want to do is I want to type in S FTp, it should pre fill it in. Okay. And to configure this bit of software, this is what we need to type in. Let's go what ends up happening is let's close it all down to make I'm going to close down my html and my CSS. I'll even close down this by double clicking it. So it's nice and clean. So this little Jason file is the kind of details that you need to populate for this thing to work now, you're like, where do I get all of these details. So they are the things that came through in an email. So they either come through from an email from Blue Host or if you go to FT your blue host account, you'll find them from home. Go down to Advanced the Advanced go to FTP accounts and you'll find them at the bottom of this. So this top one here is the one that is automatically generated. Okay. And that's kind of our details in it. You click on configure FTP account and here are the basics that you need. Okay. So the user name, the server that's going to and the ports. Alternatively, if you don't want to use this plug in that we're using in V. S code you can use, if you're more familiar with files, ella or cyber dark for Mac, you can use those cool instructions of how to use it. It's just another way. So let's copy and paste them across. So what do we got the name of the server? It's called Blue Host. This doesn't matter. You can type in anything there. This next one, the host address is really important at the moment. It's local hosting. So on my machine, that's not what I want. So I'm gonna grab this one here ftp. Now, if you're using something other than Blue host, sometimes it cannot have the FTp in front of it and sometimes it does in case of using some other hosting company, you can just sometimes it's Yeah. Ftp. Sometimes it's not okay. In this case it is. Now I think in this case we're just using FTP nor Sftp. Let's check. I think you can use either in this case I put in my password. So where's my password really doesn't have it as an option. I remember this when I was setting it up first so this needs a password to get in. Okay password so you just type it in inside of the quotation marks, colon and your password goes in quotation marks as well and ends with a comma. So we've got our name, we got a house without a password. We've got FTP support number. Often it's 22 in case of blue host they are 21 they are your user name. Where's my user name there it is there a deer rez in the remote path. Okay. In this case they say my remote path is now that's not it. Okay. Generally for pretty much all hosting companies that have ever dealt with its remember when we're in let me have a little look. File manager remember public dot h t underscore html. That's the one we want. Maybe this one that's the folder because at the moment we're logging into this kind of like big, this big director of all the stuff we don't need. Okay we want to find this public underscore html to get to our website. So in here we go to public underscore html and this one is up to you. So upload on save I turn it to false just because and the problem with having it is true. It means every time I hit save remember file save all it's going to then try and push my website live to a deer restaurant dot com and if I'm messing about with it and it's all broken and half working the website is going to be half working on the site. So I said mine are false anyway. That's what that guy needs. We're going to save it and we're going to close it and we're gonna go to this option here. Okay for our SftP you can see our little host. They're gonna drop it down. This little blue bar is going to run across for a while until it connects to your server and fingers crossed. It does. Alright. There you go. So it has found my index and my style and my images and the thing is this is not on my computer. This is actually looking at this folder here on blue host which is connected to my you are a which is this. So yeah, that's what that is. If I go in here now and I click this and I right click it and I say delete, Be very careful. You see it on the bottom here says, are you sure you want to delete your index page? I'm okay with it cause I'm gonna stick it back up in a sec because I've deleted it here. This thing's going to my website is going to freak out because it doesn't have an index page. Okay I'm gonna hit refresh. Let's have a look down here as well. You see it kind of humming away thinking about it, it's checking the survey. It's never a fast process. This thing's gone. Did it delete delete? Are you sure? Delete file doesn't exist? Cool. This thing could take a little bit to update even though I clicked update, it still was listing there. There it is, it's gone. So now if I go to a deer restaurant, he goes, hey, I'm freaking out. I got no index page. That's the, that's the reason we need index dot html and it's showing me other stuff in here. I've got a CSS sheet and some images, but that's not very helpful. So how to get stuff back up. Let's say that I'm in my file Explorer. Okay, so this top one and in here I'm gonna open up index page and I'm working on it. So this is my local explorer is my local stuff. This down here is the remote, so remote considered their blue hosts hard drive. Okay. That's where your site is for other people. This is, you know, you do your work locally and then you push it live to push it live, you right click it and say upload and off it goes and it should be uploading and hopefully in a second I can go to a deer restaurant dot com and it should be back nice now that is going to work fine for like half of you and the rest of you who have got hosting other places are going to be like, man, it's not working. We're so close so how do we fix it? A couple of things is you need to open up the same thing as before. Okay. To get back in to do the settings and that's really weird because like yeah, anyway, it's just the way plug ins work in V. S. Code. I can go to 65. You gotta command palette and it's the last thing I did and I can open up this Jason file if you can't remember how to do it, you go to the extension and then you find close these out and it shows me the ones I have enabled, I can click on it and then kind of read through the documentation again on how to do it. You can see we've just done some basic stuff. There's a lot more that can go in there. You can do watch folders, which is cool. There's lots of stuff that you might need to do to make it work. Maybe your school or your university or your work. All right, so what are we doing? Oh yeah, problems. Okay, so we wanted to open up, I'm going to close all the extensions down and I want to go to view command palette and open up this again. So if it doesn't work. Okay, a couple of things you can try easily yourself is sometimes that your user name has an email address so it could be ah it might be this at a deer restaurant dot com. Okay. That sometimes can get, you know, some some hosts do that. Sometimes you don't need the public slash underscore it can just be left by itself. Okay, just leave the slash there. Okay, sometimes that works. Sometimes it needs to be sftp. Sometimes you might get your password wrong. Okay. We talked about the host, sometimes it doesn't need the FTP at the front, you can delete that. Sometimes the host name doesn't do anything. Okay, just get listed in this little folder here and if that still doesn't work, copy this. Okay, I'll actually copy and paste this into a word doc right now and stick it in your exercise files. And what you do is you contact your host city with go daddy or host skater or somebody else. Okay, just seeing the support ticket and say, hey, I've got an account with you and I can't connect it. Um can you tell me what to put in this and they might go, oh yeah, you're doing it wrong, you've got to put in poor 23 or 22 or something else or they'll tell you how to kind of change it around. Okay. And the way to test it is once you've done it, save it, that might be a thing that you've done wrong as well as go file, save, click on this and cook on blue host and hopefully this eventually will populate with the things on your site. Now, what else can you try if it's still not working? Um FTp can be blocked by your internet provider, not your internet provider, but you're say you're at a, I don't know, coffee shop or a hotel that you're trying to do this in and sometimes the, like the infrastructure there, the wifi network will block kind of weird stuff like this because you're trying to connect with a server online and they freak out sometimes. So if that's happening or at least yours is broken, try connecting to a different wife. I say you're at work, try it at home. If you're at home, try it at a friend's and try the exact same thing because sometimes it's your internet. That's wrong, it's not the details, it's not obvious code. Um I've got around it sometimes by doing a hotspot on my phone, okay? Like what do you call it? Tethering on an iphone or mobile hotspot on my android phone and I connect my laptop to that and go and try it and it works fine. And if it's still not working, contact your host that they're the real quick blue host are really good at getting back to you and helping you out. Same thing. I'll put this in a word, doc now try and remember, come on, then I'll put it in your exercise files in the second and it will be under project one and I'll call it FTp code and that's it. We've connected it, it's online. It's exciting. People can see it, we can update it and if we need to make any means well uploaded to our site is we need to do now is click on it, you can actually grab a chunk of stuff. Okay? You can say I want images in all of this. Right, click all of them and say upload and it will upload to your host. Alright. That is it for project one. We're done Okay. And that's as far as we're going to get with this one, we are going to move into another project project to even Okay, this bike repair shop, we're gonna add loads more details to it. We're gonna add forms. It's going to be exciting. It's gonna be lions, take a break, shake it off. I'm going to and we'll prepare ourselves for the next project. You in a sec