WinSCP Basics for Website Work

What is WinSCP?

WinSCP is a file transfer tool for Windows. It is commonly used to connect to a web server with SFTP or SCP. Once connected, you can upload files, download files, rename files, replace files, create folders, and compare what is on your own computer with what is on the server.

If PuTTY is useful for command-line access, WinSCP is useful for visual file control. For many website owners, that makes it easier to understand what they are doing.

Why WinSCP matters for website work

• You can upload HTML, CSS, JavaScript, and images.
• You can see exactly where your files live on the server.
• You can keep local copies of your site.
• You can replace outdated files with newer ones.
• You can organize folders more safely than typing file moves from memory.
• You can become less dependent on other people for simple site updates.

The basic idea: left side and right side

In WinSCP, you usually see two main panels:

The core lesson is simple:

Left side = your working copy. Right side = your published copy.

What you need before connecting

To log in with WinSCP, you usually need these details:

Field	What it means	Typical example
File protocol	How WinSCP connects	SFTP
Host name	Your server address	example.com or a server IP
Port number	Connection port	22 for SFTP
User name	Your server account name	youruser
Password	Your server password	Provided by host or admin

How to connect with WinSCP

1. Open WinSCP.
2. Choose SFTP as the file protocol.
3. Enter the host name.
4. Enter port 22, unless your server uses something different.
5. Enter your user name and password.
6. Click Login.

The first time, WinSCP may ask you to confirm the server key or fingerprint. That is part of checking that you are connecting to the expected server.

Your first goal after login

Do not start dragging files immediately. First, take a minute to understand where you are.

Typical folders you may see on the server

• public_html
• www
• htdocs
• logs
• other account-level folders

For many shared hosting accounts, your live website files are inside public_html.

Local website folder example

A clean local working folder might look like this:

C:\website\
├── site.css
├── site.js
├── index.html
├── en\
│   ├── index.html
│   └── tools\
│       ├── index.html
│       ├── putty-basics.html
│       ├── winscp-basics.html
│       └── vi-basics.html
├── ja\
│   ├── index.html
│   └── tools\
│       ├── index.html
│       ├── putty-basics.html
│       ├── winscp-basics.html
│       └── vi-basics.html
└── images\
    ├── webbie-icon-square.jpg
    ├── website-winscp-files.jpg
    └── website-putty-terminal.jpg

If your local structure is clean, WinSCP becomes much easier to use correctly.

What kinds of files you will upload

File type	What it is for	Example
HTML	The page structure and content	winscp-basics.html
CSS	Shared visual styling	site.css
JavaScript	Shared interaction and behavior	site.js
Images	Hero images, Webbie art, diagrams	website-winscp-files.jpg
XML or TXT	Site utility files	sitemap.xml, robots.txt

How to upload a file

There are two common ways:

• drag from the left panel to the right panel
• select the file and use the upload button

Example: upload one HTML page

1. On the left, go to your local en/tools/ folder.
2. On the right, go to the server folder /public_html/en/tools/.
3. Select winscp-basics.html on the left.
4. Drag it to the right or click Upload.

If the file already exists on the server, WinSCP will usually ask whether you want to overwrite it.

How to upload images

This is especially important for your website workflow. A common pattern is:

Why this image workflow matters

Uploading images first and then using the final URLs is one of the best ways to keep ChatGPT from drifting. It gives the work a stable foundation.

• fewer broken image paths
• less placeholder junk
• more consistent HTML output
• better control over naming and reuse

Example: upload an image and use it in HTML

Suppose you upload this file into your server image folder:

website-putty-terminal.jpg

And now its live URL is:

https://website.co.jp/images/website-putty-terminal.jpg

You can use it in HTML like this:

<img src="https://website.co.jp/images/website-putty-terminal.jpg"
     alt="Laptop showing a terminal connection for website work">

Replacing an existing file

One of WinSCP’s most useful features is replacing old files with new versions.

Example: update site.css

1. Finish editing the local version of site.css.
2. In WinSCP, go to the local folder on the left.
3. Go to the matching server folder on the right.
4. Upload the local site.css.
5. Approve overwrite if prompted.
6. Refresh the browser and test the site.

Good habits before replacing files

• Know what file you are replacing.
• Know what pages depend on it.
• Keep a local backup copy of the older file.
• Upload during a calm moment, not in a rush.
• Refresh and verify after upload.

How to create folders in WinSCP

If your section does not exist yet, you may need to create a new directory.

Example

Let us say you are starting a tools section and the server does not yet have:

/public_html/en/tools/

In WinSCP, you can:

1. navigate on the right side to /public_html/en/
2. create a new folder named tools
3. then upload your tool pages into it

This is much easier when your filename and folder plan is already settled.

How to think about local vs live work

One of the strongest beginner workflows is:

Build locally. Review locally. Upload only when the file is ready.

That approach reduces panic and helps you learn without paying for hosting too early.

What WinSCP is especially good for

• publishing finished files from your computer to a server
• replacing old images with new ones
• keeping a visual sense of the site folder structure
• downloading server files for backup or inspection
• checking whether a file really exists where you think it does

What WinSCP is not best for

• writing large new pages from scratch
• complex code editing compared with a full local editor
• understanding server logic by itself
• fixing broken architecture after a messy workflow

It is best when used as part of a disciplined process.

Real website example: upload one new training step page

Suppose you just created this local file:

C:\website\en\training\step-07-save-image-urls.html

And you want to publish it to:

/public_html/en/training/step-07-save-image-urls.html

A careful workflow:

1. Open WinSCP.
2. Navigate on the left to C:\website\en\training\.
3. Navigate on the right to /public_html/en/training/.
4. Confirm the file is named exactly step-07-save-image-urls.html.
5. Upload it.
6. Visit the live URL in your browser and confirm it loads correctly.

Real website example: upload a shared mascot image

Suppose you have this local file:

C:\website\images\webbie-review.jpg

You upload it to:

/public_html/images/webbie-review.jpg

Then the live image URL becomes:

https://website.co.jp/images/webbie-review.jpg

Now your page HTML can safely use:

<img src="https://website.co.jp/images/webbie-review.jpg" alt="Webbie reviewing a website">

How to avoid common WinSCP mistakes

1. Uploading to the wrong folder

This is one of the most common mistakes. Always look at the server path before uploading.

2. Replacing the wrong file

Be especially careful with files like:

• index.html
• site.css
• site.js
• shared images used across many pages

3. Dragging too much at once

Beginners often try to upload a whole messy folder tree at once. It is safer to upload with intention.

4. Using inconsistent filenames

Hero.jpg, hero.jpg, and hero-final-new.jpg create confusion fast. Decide filenames early and stick to them.

5. Editing live files first when local work would be safer

Use WinSCP to publish and organize. Use local editing and browser review when you can.

A smart beginner workflow for WinSCP

WinSCP vs PuTTY vs vi

Tool	Best for	Beginner comfort level
WinSCP	Uploading, downloading, organizing files visually	High
PuTTY	SSH command-line access to the server	Medium
vi	Quick text edits directly on the server	Lower at first, then very useful

These tools work well together:

• WinSCP for file movement
• PuTTY for command-line access
• vi for quick edits when needed

Mini publishing example for website.co.jp

Here is a clean, realistic sequence:

1. Create /en/tools/winscp-basics.html locally
2. Save /site.css locally
3. Save /site.js locally
4. Save image files locally in /images/
5. Open WinSCP
6. Upload the page to /public_html/en/tools/
7. Upload shared files to /public_html/
8. Upload images to /public_html/images/
9. Visit the live page in a browser
10. Fix small issues and re-upload as needed

Mini cheat sheet

Left side   = your local computer
Right side  = your remote server
SFTP        = safer file transfer over SSH
Upload      = send local file to server
Download    = copy server file back to local machine
Overwrite   = replace old server file with new local file
Best habit  = check the path before you transfer