How to connect Visual Studio VS Code via sftp to host bluehost

Hey there, in this video we are going to use VS code to connect directly to our host, rather than using kind of anything else, or using their website. They're all done within VS code. We're going to install this plugin called SFTP. It's going to 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, simples.

So in this video we're going to connect directly from VS code. We're going to use something called SFTP. 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-- so 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, and has a chunk of downloads. So you will check when you are doing it. There's other ones in here, that one's got less stars, that's the one we're going to use for the moment. Have a little read through how it works, I'm going to show you how to do it. 

The main one for this one is Usage, it says, you need to do this thing. 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, that's what we need to put in, that kind of details. So let's install it first, give it a sec. 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've got to set it up. And that's what they say in here, they say, do this, run the shortcut on Windows or on Mac, and then type this in, so we'll do that. 

The long way is under View and Command Palette. So Command Palette is, you're able to tell-- give kind of commands to these plugins. 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 SFTP, it should pre-fill it in, 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 JSON 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 Bluehost, or if you go to your Bluehost account you'll find them from 'Home', go down to 'Advanced', go to 'FTP Accounts', and you'll find them at the bottom of this. This top one here is the one that is automatically generated, and that's got all of our details in it, you click on 'Configure FTP Account', in here are the basics that you need. So the User Name, the server that it's going to, and the port. Alternatively, if you don't want to use this plugin, that we're using in VS code you can use, if you're more familiar with FileZilla or Cyberduck 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 have we got? The name of the server, it's called Bluehost. 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 it's not what I want. So I'm going to grab this one here, 'FTP'. Now if you're using something other than Bluehost, sometimes it cannot have the FTP in front of it, and sometimes it does. So if you're using some other hosting company you can just--

Sometimes it's FTP, sometimes it's not. In this case it is, now I think in this case, we're just using FTP, not SFTP, let's check. So you can use either in this case. I put in my password, so where's my password? Weirdly it 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. So you just type it in inside of the quotation marks, colon. Your password goes in quotation marks as well and ends with a comma. So we've got our name, we've got our host, we got a password, we've got FTP. The port number, often it's 22, in case of Bluehost, they are 21. Your user name, where is my user name, there it is there, adareres, and the Remote Path. 

In this case they say my Remote Path is, now that's not it. Generally, for pretty much all hosting companies that I've ever dealt with it's-- remember, when we were in-- let me have a little look. File Manager, remember, public_html, that's the one we want. Remember this one, that's the folder. At the moment we're logging into this kind of like, this big directory with all the stuff we don't need. We want to find this public_html to get to our website. So in here we go to public_html. And this one is up to you. Upload on Save, I turn it to False just because. The problem with having it as True, it means, every time I hit Save, remember, File, Save All, it's going to then try and push my website live to adarerestaurant.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 set mine as False. Anyway that's what that guy needs. 

We're going to save it and we're going to close it, and we're going to go to this option here, for our SFTP. You can see our little host there, you got to 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. There you go, so it has found my Index, my Style, and my Images. The thing is, this is not on my computer, this is actually looking at this folder here on Bluehost, which is connected to my URL, which is this. So, 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 down the bottom here, it says, "Are you sure you want to delete your Index Page?" I'm okay with it, because I'm going to stick it back up in a sec. but because I've deleted it here, my website's going to freak out, because it doesn't have an Index Page. 

I'm going to hit 'Refresh', let's have a little look. Down here as well you can see it kind of humming away. It's thinking about it, it's checking the server, it's never a fast process. This thing's gone. Do the 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 it, there it is, it's gone. So now if I go to adarerestaurant, goes "Hey, you're freaking out, got no Index Page." That's the reason we need index.html, and it's showing me other stuff in here, I've got a CSS sheet, and some images, but it's not very helpful. 

So how to get stuff back up? Let's say that I'm in my File Explorer, so this top one, and in here I'm going to open up Index Page, and I'm working on it. This is my local, Explorer is my local stuff, this down here is the Remote. So Remote's considered Bluehost's hard drive. That's where your site is, for other people this is you. So 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 adarerestaurant.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 at 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-- same thing as before, to get back in to do the settings, and that's really weird because like, anyway it's just the way plugins work in VS code. I can go to 'View', go to 'Command Palette', and it's the last thing I did, and I can open up this JSON file. You can't remember how to do it, you go to the Extension, and then you find-- I'm going to 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 is lots of stuff that you might need to do to make it work, maybe your school, your University, or your work. So what are we doing? Oh yeah, problems. So we wanted to open up-- I'm going to close all the extensions down. I want to go to 'View', 'Command Palette' and open up this again. So if it doesn't work, a couple of things you can try easily yourself, is sometimes, that your user name has an email address, so it could be [email protected], that sometimes can get, you know, some hosts do that. Sometimes you don't need the public slash underscore, 'public/_', can just be left by itself,  just leave the slash, '/' there. Sometimes that works, sometimes it needs to be SFTP. Sometimes you might have got your password wrong. 

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, just what gets listed in this little folder here, and if that still doesn't work, copy this. 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, say you're with GoDaddy, or HostGator, or somebody else, just send the support ticket and say, "Hey, I've got an account with you, and I can't connect it, 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 port 23 or 22, or something else", or they'll tell you how to kind of change it around, and the way to test it, is once you've done it, save it. There might be a thing that you've done wrong as well, let's go 'File', 'Save', click on this, and click on 'Bluehost', and hopefully this eventually will populate with the things on your site. 

Now what else can you try if it's still not working? FTP can be blocked by your internet provider, not interpret 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, sometimes the infrastructure there, the Wi-Fi 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 Wi-Fi. 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 the VS code. 
I've got around it sometimes by doing a hotspot on my phone, what do you call it, tethering on an iPhone, or mobile hotspot on my Android phone. I connect my laptop to that and go and try it, and it works fine, and if it still is not working contact your host. They're real quick, Bluehost 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, Dan. I'll put it in your Exercise Files in a second, and it will be under Project1, and I'll call it FTP code. And that's it, I've connected it, it's online. It's exciting, people can see it, we can update it, and if we need to make any amends, or upload it to our site, is all we need to do now, is click on it, you can actually grab a chunk of stuff, you can say, I want images and all of this, right click all of them and say Upload, and it will upload to your host. 
That is it for Project1, we're done. That's as far as we're going to get with this one. We are going to move into another project, Project2, even. This Bike Repair Shop, we're going to add loads more details to it. We're going to add Forms, it's going to be exciting, it's going to be Lions. Take a break, shake it off. I'm going to, and we'll prepare ourselves for the next project, see you in a sec.