• Skip to main content
  • Skip to primary sidebar
  • Skip to footer

Matt Doyle | Elated Communications

Web and WordPress Development

  • About Me
  • Blog
    • Design & Multimedia
      • Photoshop
      • Paint Shop Pro
      • Video & Audio
    • Online Marketing
      • E-Commerce
      • Social Media
    • Running a Website
      • WordPress
      • Apache
      • UNIX and Linux
      • Using FTP
    • Web Development
      • HTML
      • CSS
      • JavaScript
      • PHP
      • Perl and CGI Scripting
  • Portfolio
  • Contact Me
  • Hire Me
Home / Blog / Running a Website / Using FTP / WinSCP Tutorial – How to Upload Your Site with WinSCP

WinSCP Tutorial – How to Upload Your Site with WinSCP

17 May 2010 / Leave a Comment

WinSCP Tutorial - How to Upload Your Site with WinSCP

WinSCP is a popular free FTP program for Windows. An FTP program lets you transfer files between your computer and your Web server.

In this introductory tutorial, you’ll learn how to use WinSCP to upload your website’s files to your server.

This tutorial assumes you’ve already downloaded and installed WinSCP. It also assumes you’re using WinSCP with the “Commander” interface, rather than the “Explorer” interface. (To change interfaces in WinSCP, choose Options > Preferences, then click the Interface option and select either Commander or Explorer.)

Connecting to your Web server

When you start WinSCP, You’ll see the WinSCP Login dialog box (shown below). This is where you enter information about the Web server you want to connect to.

If you’re not sure of your Web server’s FTP details, ask your hosting company.

WinSCP Login dialog screenshot
Enter your server details in the WinSCP Login dialog, then click Login to connect to the server.

Enter the following information in the dialog:

  • Your Web server’s name in the Host name box
  • Your login name in the User name box
  • Your login password in the Password box
  • Your protocol information in the Protocol boxes. For the sake of this tutorial, we’ll assume you’re using plain, simple FTP, so choose FTP and No encryption.

Once you’ve entered your Web server details, click Login to connect to your server.

You may be behind a proxy server, especially if you’re using WinSCP from work. If so, you will need to get your proxy server details from your IT support people. Then, in the WinSCP Login dialog, select the Advanced options checkbox, then click the Proxy option and enter your proxy server information.

Your home directory

Once logged in, you will be taken to your home directory on your Web server, which you’ll see in the right hand pane in WinSCP. This directory contains (amongst other things) your website directory, which is where you need to upload all your files:

Home directory
Your home directory on the server contains your website directory (shown), which is where the website’s files go.

Double-click your website directory — mysite.com in the above screenshot — to browse its contents.

Your document root

The top level folder of your website is often called the document root. This is where you will place your first website files. The document root is often named htdocs or public_html, and is usually inside your website directory.

Document root directory
Your website directory contains htdocs, your document root directory — the top level of your website.

If you like, you can double-click your document root folder — htdocs in the above screenshot — to browse its contents.

Uploading a Web page

Once you’ve found your document root, you’re now ready to upload your website. Here, you’re going to upload your first page, index.html, which should be the name of the main page of your website.

Use the left-hand pane in WinSCP to browse to your website folder on your hard disk. You can then upload your index.html file to the server by dragging it from the left-hand pane to the htdocs folder in the right-hand pane:

Uploading a file
Upload the website’s index page file by dragging it from the left-hand pane to the htdocs folder in the right-hand pane.

Once you’ve dragged your file, you may see a Copy dialog appear. Just click the Copy button in the dialog to continue. You can also check the Do not show this dialog again checkbox in the dialog, if it annoys you.

Once WinSCP has finished uploading the file, double-click your document root folder (e.g. htdocs) in the right-hand pane to view its contents. You should see a copy of your file. Congratulations — you’ve just uploaded your Web page!

Upload complete
The website’s index page is now uploaded to the Web server.

If you now open up a Web browser and go to your website’s URL, you should see your Web page on the Internet. Well done! 🙂

You can also upload files and folders by dragging them straight from Windows Explorer into the right-hand pane in WinSCP.

Other stuff

Downloading

If you need to download a Web page from your site again (for example, you lost the original on your PC), simply drag and drop your page the other way, from the right-hand pane to the left-hand pane (or to Windows Explorer).

Disconnecting

After you’ve finished uploading stuff, choose Session > Disconnect to disconnect from your Web server. Or simply close down WinSCP.

Deleting files

To delete a file that you have uploaded to your server, click on the file in the right-hand pane to select it, and press the Delete key on your keyboard.

Doing other stuff to files

Right-click on a file in the right-hand pane and you will see all sorts of things you can do to it, such as renaming it and editing it.

If you need to change permissions on a file then right-click it and choose Properties from the pop-up menu.

This basic WinSCP tutorial has shown you how to upload your website files with WinSCP. To learn more about about using WinSCP, take a look at the WinSCP Guides. Have fun!

Filed Under: Using FTP Tagged With: delete files, disconnect, document root, download, drag and drop, ftp tutorial, home directory, password, upload, username, windows, winscp tutorial

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

To include a block of code in your comment, surround it with <pre> ... </pre> tags. You can include smaller code snippets inside some normal text by surrounding them with <code> ... </code> tags.

Allowed tags in comments: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre> .

Primary Sidebar

Hire Matt!

Matt Doyle headshot

Need a little help with your website? I have over 20 years of web development experience under my belt. Let’s chat!

Matt Doyle - Codeable Expert Certificate

Hire Me Today

Call Me: +61 2 8006 0622

Stay in Touch!

Subscribe to get a quick email whenever I add new articles, free goodies, or special offers. I won’t spam you.

Subscribe

Recent Posts

  • Make a Rotatable 3D Product Boxshot with Three.js
  • Speed Up Your WordPress Website: 11 Simple Steps to a Faster Site
  • Reboot!
  • Wordfence Tutorial: How to Keep Your WordPress Site Safe from Hackers
  • How to Make Awesome-Looking Images for Your Website

Footer

Contact Matt

  • Email Me
  • Call Me: +61 2 8006 0622

Follow Matt

  • E-mail
  • Facebook
  • GitHub
  • LinkedIn
  • Twitter

Copyright © 1996-2023 Elated Communications. All rights reserved.
Affiliate Disclaimer | Privacy Policy | Terms of Use | Service T&C | Credits