This blog post is about how you can use git and vscode to send files from your local environment to your server. If you are already using git, this will be a quick read, but if not, it’s worth learning a little bit about it.
For the purposes of this blog post, I am assuming that you have installed git on your local machine and have access to an Ubuntu server. I also assume that you have added ssh keys to the server so that you can log in without having to enter a password via the command line.
Git is a version control tool that lets you keep track of your code as it changes over time. It does this by allowing you to create “snapshots” of the code at different points in time, which you can then revert back to if something goes wrong or if there is an error in one of the snapshots. I find this particularly useful when trying out new things as I don’t want things breaking my site!
Before we get started, make sure that your repository is set up and ready to go. You will need to create a remote repository on GitHub (or another service such as GitLab or Bitbucket). Once done, clone it on your local machine by running
There are many ways to send files from your local environment to your server, but I’ve always used git. I have a lot of experience with github and git in general, so it was a natural choice for me. While I still use git to send files to my server, I recently started using vs code and it has made my life so much easier.
I’m not going to go into how to use git because there are many good resources out there for that. But I will walk you through using vscode and how it can help you send files to your server.
To connect from vscode, open the command palette (cmd + shift + p) and search for “remote ssh” then choose “Remote-SSH: Open Configuration File…”.
When I’m working on a project like this blog, I find myself bouncing between my local environment and my remote server often. To add new posts to the blog, I need to get files from my local machine to the server. If a post is successful, I’ll want to edit the post and update it.
During the last few months of building this blog, I’ve had to upload hundreds of files to my server. There are a handful of ways you could go about sending your files to your server:
Uploading files manually with ftp
Copying and pasting your code into an online IDE like c9.io or nitrous.io
Using git to send your files
I highly recommend using git for managing your code across multiple servers or across multiple environments on a single server. GitHub is a great tool for storing and sharing your code, but if you’re not comfortable with git yet, it can be hard to navigate through all of the features GitHub offers. For example, GitHub has an integrated IDE which allows you to edit files in your repository directly from GitHub’s website. This can be great once you’re comfortable with git, but it can be confusing if you’re not familiar with how git works yet.
In this article I want to show
I am a big fan of VS Code. One of my favorite things about working with it is the ability to work remotely with it using SSH. It allows you to work with your local environment and have your files sent up to a remote server easily.
I’ve written an article on this topic before, but I wanted to revisit it again to explain how I use Git and VS Code together to send files from my local machine to a remote server.
The biggest change from the previous way I was doing this was adding the .gitignore file that prevented me from sending the .vscode folder up to my server. This folder contains the settings for Remote – SSH and the private key used for connecting to the server.
My goal for this process is that I want only one place where my credentials are saved and that is locally on my machine, not on any remote servers.
If your typical workflow includes writing code on your local machine and then using a FTP client like FileZilla to upload the files to your server, this blog post will help you streamline that process so you can go from writing code to viewing it on your server in just one step.
The best part about this method is that it doesn’t involve any extra tools or plugins. If you have Visual Studio Code and Git installed, you’re ready to get started!
If you don’t have these tools installed yet, check out the links below for installation instructions:
Visual Studio Code: https://code.visualstudio.com/download
Git: https://git-scm.com/book/en/v2/Getting-Started-Installing-Git
A few months ago I was working on a project where I had a lot of files that needed to be uploaded from my local machine to the server. Normally I would have used FTP, but this time I decided to use ssh and vscode and I have never looked back.
After a few months of working in VS Code I have really grown to love it. One of my favorite things about using it is that you can use the terminal inside of VS Code. This has a ton of benefits, but one of my favorites is that I can make changes locally and then send them to my server with Git. This means I can create and update files without logging into my droplet via SSH or FTP.
So, how do we get started? The first thing you’ll need is a code-server installation on your server. Code Server is a Visual Studio Code instance running on a remote server and accessible through the browser. You can learn more about it here.
If you don’t already have an instance running, you can follow this tutorial from Digital Ocean to set one up. Once that is complete, open your browser and navigate to your server’s IP Address, followed by port 8080 (like so: http://123.45.67:8080). If all goes well, you should be greeted with a login prompt for your code-server session.
Now that we’re all set up, let’s go ahead and create our first project!