Lab 1 - SSH and Editors

Welcome to Lab 1! The main purpose of this lab is to begin to get you familiar with the command-line environment that we’ll be using for this course (and that you’ll likely be using many more times in the future). For most of the course, you will be connecting to a remote machine (portal) to compile and run your code.

The lab is broken down into four components:

  1. Installing (or accessing) an SSH tool for connecting to remote machines
  2. Experiment with the BASH command-line shell (through interactive games!)
  3. Log into the UVA CS department’s portal
  4. Begin using a command-line text editor (nano or vim)

Lab Goals

After this lab, you should be able to:

  1. Navigate in a shell, into and out of directories, listing what is in a directory and seeing its contents
  2. Edit files from the shell
    • we don’t care which CLI editor you use: nano, vim, emacs, any is fine.
  3. Access portal.cs.virginia.edu via ssh
  4. recognize
    • . as meaning “the current directory”
    • .. as meaning “the directory containing the current directory”
    • ~ as meaning “my home directory” – i.e., /u/mst3k

SSH

SSH (Secure SHell) is a ubiquitous tool for running arbitrary programs on remote machines. We will use it extensively this semester. It comes bundled with a few related tools, like SCP (Secure CoPy), that we will also use.

Accessing the SSH tool

You’ll need to know how to run SSH:

If you are running Then you should use
Linux open a terminal and use the built-in ssh command
MacOS open the Terminal app, then use the built-in ssh command
Windows 10 / 11 install OpenSSH Client (following the “from the Settings UI” directions) once; then open the PowerShell app and use the ssh command (alternatively install Windows Subsystem for Linux and use the built-in ssh command)
Haiku open a terminal and use the built-in ssh command
FreeBSD open a terminal and use the built-in ssh command
OpenBSD open a terminal and use the built-in ssh command
Irix open a terminal and use the built-in ssh command

Learn basic shell online with a tutorial/game

SSH gives you a shell; shells have long been ubiquitous tools in all systems except Windows, and they are increasingly used in Windows too. The shell is sometimes also called the “command line” or the “console”. It is a program that gives you a text interface to interact with the system. In the UVA CS department, the default shell provided is the BASH shell.

The shell provides a LOT of power. You are also able to interact with the system in a way that you can’t with a graphical interface. There is typically a learning curve when beginning to use a shell, but once you are familiar, you may find you’ll be using it more and more often.

To overcome this learning curve, many have created games and tutorials to become familiar with this new way of interacting with the system. Visit http://web.mit.edu/mprat/Public/web/Terminus/Web/main.html, a somewhat cheesy introduction to the basics of the command line. Explore it until you:

  • feel comfortable with the use of ls, pwd, cd (including cd ..), and less
  • have learned about mv and man

There is a lot more you can do (creating a magic locker, explore a hidden tunnel, learn about grep and rm, etc.), but those are the most important basics.

Avoiding excessive typing

While in a shell, there are several keys to make you life easier; the most important are

Up and Down
The up and down arrow keys navigate through a history of previously-typed commands. On some systems, page-up and page-down also navigate in large chunks.
Tab
Pressing the tab key when the cursor is preceded by an incomplete word that can only be completed in one way will fill in the rest of the word.

Pressing tab twice when the cursor is preceded by an incomplete word that can be completed in several ways lists all of the completions the command line knows about.

Learning SSH with games/tutorials

Another shell-learning game requires the use of the terminal (or command line) and SSH. This will begin to get you familiar with connecting to the CS portal, which we’ll do next. To begin, visit http://overthewire.org/wargames/ and read the instructions for “Bandit”. Many of the pages also list web resources to help you learn more.

If you don’t like reading, you can skip ahead to

$ ssh bandit0@bandit.labs.overthewire.org -p 2220

and consult http://overthewire.org/wargames/bandit/bandit0.html to get started.

If you are on Mac and get zsh: command not found after trying to use ssh, try using the command bash first. On Mac, the command ssh may not be in your shell zsh by default. Switching shells to bash fixes this issue because it has the command ssh in its PATH.

For lab, we will ask that you complete level 0 and 1 of Bandit, which includes connecting with SSH and looking for files. However, since there is no homework this week, we suggest getting to level 4 of Bandit on your own (either during or after lab), though you might find other levels and games there interesting. The more time you put into learning the shell, the more familiar you will be when we start using it more often this semester.

Connecting to the UVA CS portal

At some point you should have received an email from the CS department with a CS login. You should be able to use that to SSH into mst3k@portal.cs.virginia.edu, an account we will use many times this semester.

Try to connect to the CS department portal using SSH. Note: unlike the bandit example above, you will not need the “-p 2220”.

$ ssh mst3k@portal.cs.virginia.edu

Once connected, you should first run our course set-up script. You will only need to run this command once, but it will set up all the tools we will be using throughout the semester. You can do this by running /p/cso1/cs2130-setup.sh and following the prompts:

mst3k@portal01$ /p/cso1/cs2130-setup.sh

Afterwards, test out some of the commands you’ve learned in the games and tutorials above. You will initially be placed in your home directory, which will be empty. Next, we will create our first text file using a command-line text editor.

Password Reset

If you are unable to log into the portal, you may need to reset your password. To reset your password, use the password reset tool at https://www.cs.virginia.edu/PasswordReset/. This tool will not work unless your account was setup at some point, a task that typically happens 3-5 days after you add the class.

Editors

One of the most popular editors is VSCode. After working with it, I hope that you will also learn to love it. Let’s get started. Download Visual Studio Code from https://code.visualstudio.com/download. Once you have installed and opened Visual Studio, you should see a screen that looks like this:

Visual Studio window

In this class, you will use the local VSCode editor to edit files that are stored remotely in your home directory on the CS department’s machines. Don’t worry; this is really easy with Visual Studio Code. Look at the activity panel (shown as panel A) in the diagram above. You should see an option called “Extensions” (about five buttons from the top).

Search for and install the Remote-SSH plugin. This will allow you to remotely edit your files on the CS server :). You can install the extension by visiting the Visual Studio Marketplace https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-ssh.

Now that you have installed the extension, let’s connect to the CS department machines.

In VS Code, select “Remote-SSH: Connect to Host…” from the Command Palette (F1, ⇧⌘P) and type ssh YourUserName@portal.cs.virginia.edu -A. When prompted, enter your password. The gif below shows a walkthrough of the process:

Demo of accessing remote environment

You can also access the terminal directly in Visual Studio Code. Click on the terminal tab in panel D. Try typing some commands; notice that these commands are executed over the SSH tunnel. Use this terminal to create a folder called “CSO-1” in your home directory by typing:

cd ~ (This navigates to your home directory)

mkdir CSO-1 (This creates the directory)

cd CSO-1 (This navigates to the created directory)

You can also explore files in the remote environment. Click on the explore button in panel A on the top left-hand side. Then click “OK” when the command window pops up. You should now see all the files in your home directory listed next to panel A.

Potential Issues with VSCode

If after attempting to connect to the UVA CS Portal via remote SSH, you get a error with “could not resolve hostname” or “could not connect to host” but you could connect via SSH with terminal, try the following steps:

  1. Double-check the command you used: Did you type in ssh YourComputingID@portal.cs.virginia.edu -A?
  2. Try instead ssh YourComputingID@portal10.cs.virginia.edu -A. This will connect you to a specific server on the portal.
  3. Are you on the UVA Wifi? The CS Portal with only accept IPs from the UVA network
  4. Restart VSCode, reinstall the remote SSH plugin, and try again

If none of that works, your machine has a bug that we have not yet resolved. Luckily, the rest of the lab is possible to complete using a terminal connected to the portal and a CLI editor.

CLI Editors

You can also edit files via command-line interface (CLI). Though you rarely develop from CLI, you’ll still want to get familar with them as they great way make quick changes. These CLI editors mainly used as text editors.

A text editor is a tool designed for editing text, only. They typically provide programming language syntax highlighting (i.e., strings show up in a different color from integers) and sometimes other customizable features, but typically they do no have error checking, compiling, executing, and other features of an IDE.

There are three main CLI editors in common use today; you should pick one to learn. We recommend GNU nano if you want your learning to be over quickly or VIM if you want to have a lot of power after you learn.

VI (VIM)
VI (released 1979), or more commonly the updated version VIM, is probably the most widely used CLI editor today. It has a large set of features and an idiosyncratic set of commands involving two modes: “normal” mode where virtually every letter and number key has a special meaning and often a special meaning in a sequence and “insert” mode where those same keys instead type.

To begin learning VI, go to https://www.openvim.com/ and follow along. Then open a shell (or the equivalent on your own machine if you’ve installed VI), type vim, and try it out. You’ll probably need a cheat-sheet to remember all the keys: https://vim.rtorr.com/.

You can also try running vimtutor from a shell for a different approach to learning VI. There is also a game-based tutorial, VIM Adventures: https://vim-adventures.com/.

VI comes with Linux and MacOS, and can be downloaded for Windows: https://www.vim.org/download.php

You will likely see Prof Hott use VIM extensively. However, the learning curve is steeper with VIM than with nano.

GNU nano
GNU nano (released 2000) is a much simpler (i.e. both easier to learn and less powerful) editor than the other two, with more traditional key commands and an on-screen summary of the most-used commands.

To learn nano, open a shell (or the equivalent on your own machine if you’ve installed nano), type nano, and follow the on-screen instructions. Nano lists the available commands at the bottom of the terminal window.

Note that in the instructions ^X means Ctrl+X and M-X means Alt+X (or Esc+X if you are on MacOS and Alt does not work for you).

Nano comes with Linux and an old version comes with MacOS; it can be downloaded for Windows (via the chocolatey package manager) by typing the following two lines into the PowerShell app:

  1. Set-ExecutionPolicy Bypass -Scope Process -Force; iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))
  2. choco install nano
EMACS
EMACS was one of the first widely-used powerful CLI editors (released 1976). It has a large set of features and an idiosyncratic set of commands, many of which involve pressing Ctrl+X followed by another Ctrl+something command.

As EMACS has lost popularity in the past decade, more and more servers choose not to install it.

EMACS comes with Linux, and can be downloaded for Windows and obtained via homebrew for MacOS: https://www.gnu.org/software/emacs/download.html

Become sufficiently familiar with at least one of these editors that you can open, modify, and save files.

What to Submit

Now let’s apply the new skills you’ve just learned. Every student and faculty accounts CS servers are associated with their own webpage. For example you can find Professor Graham (dgg6b) site here: https://www.cs.virginia.edu/~dgg6b/. Anything you store in the public_html directory in your home directory will served from https://www.cs.virginia.edu/~YourComputingID/. Now we create your own home page. Edit the following HTML and save it as file called index.html in your home directory.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My CS Home Page</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
    }
    
    header {
      background-color: #333;
      color: #fff;
      padding: 20px;
      text-align: center;
    }
    
    main {
      max-width: 800px;
      margin: 20px auto;
      padding: 20px;
    }
    
    footer {
      background-color: #333;
      color: #fff;
      padding: 10px;
      text-align: center;
      position: fixed;
      bottom: 0;
      width: 100%;
    }
  </style>
</head>
<body>
  <header>
    <h1>Welcome to My CS Home Page</h1>
  </header>
  
  <main>
    <h2>About Me</h2>
    <p>
      Insert your introduction and information about yourself here.
    </p>
    
    <h2>Education</h2>
    <p>
      Insert your educational background and relevant courses here.
    </p>
    
    <h2>Projects</h2>
    <ul>
      <li>Project 1</li>
      <li>Project 2</li>
      <li>Project 3</li>
    </ul>
    
    <h2>Contact Information</h2>
    <p>
      Insert your contact information here, such as email address or social media profiles.
    </p>
  </main>
  
  <footer>
    &copy; 2023 My CS Home Page. All rights reserved.
  </footer>
</body>
</html>


If when visiting your website you see “Forbidden” and “You don’t have permission to access ~/YourComputingID/index.html on this server”, update the permissions on your home directory with:

chmod 755 ~/public_html
chmod 644 ~/public_html/index.html

chmod 755 ~/public_html sets read, write, and execute permissions for the owner, and read and execute permissions for the group and others on the directory. chmod 644 ~/public_html/index.html sets read and write permissions for the owner, and read permissions for the group and others on the file.

Check-off with a TA

Upload the following to gradescope:

  • A text file lab1.txt containing a single line with a link to your newly created webpage example https://www.cs.virginia.edu/~YourComputingID/. The autograder will open the file and read URL from line. It will then check your page to ensure that your page contains the <header> and <footer> tags. Note for Mac users: The text editor for Mac may save your file as a “Rich Text File” (with extension .rtf). Ensure that the file is a plain text file (with extension .txt).

To check-off this lab, show a TA:

  • Once you submitted your files check in with a TA so that they can give you attendence credit.

Remember that just showing up and working with someone else is 70% of your grade.


Copyright © 2023 Daniel Graham, John Hott and Luther Tychonievich.
Released under the CC-BY-NC-SA 4.0 license.
Creative Commons License