Website Tutorial for SUNY Oswego Students

Summary

This is a tutorial to show students at SUNY Oswego how to set up a website on the CS servers. The only thing you will need in order to follow along is an account to get on the CS machines. If you do not already have an account, ask one of the professors to make one for you.

This tutorial assumes no prior experience with computer science or making websites. If you do have experience, and it seems like I am telling you things you already know, I apologize in advance. :)

A few notes about formatting:

1. New jargon will be italicised. If you don't know what something means, Google is your friend.
2. New commands will be in purple.
3. Blue text signifies that it is a command line interaction.
4. Anything indented with a line on the left side is an example or side-note.

Many of the CSA members hang out in Shineman 442 and 446. Bother them if you have any questions.

Step 1: Connecting to the CS servers

Step 1.1: Learning about the CS servers

The CS department has a number of servers, which are named Altair, Moxie, Pi, Rho, Wolf, and Lambda. Among other things, these servers host the CS faculty and student websites.

Step 1.2 Getting on the CS servers

Step 1.2.a: Connecting from the CS department's machines

1. Log into one of the CS department's computers. These include the Sun Rays in rooms 436, 442, and 446, as well as the game development computers in room 446.
2. Open up a terminal.
   Different computers will have different ways of opening terminals. A few ways to try are:
   • clicking on an icon labeled "terminal" or
   • right clicking on the desktop and selecting something like "open new terminal" or
   • holding down the three keys Control+Alt+T at the same time.

Step 1.2.b: Connecting from a unix-like laptop (including Macs)

1. Open up a terminal. If you use a Mac, there should be an application named "Terminal" under the "Utilities" folder in "Applications".
2. Use the ssh command to create a secure shell connection to the CS servers.

3. If you are using a mac, you may see a message that says tcsh: using dumb terminal settings. If so, you must change your environment a little:

Step 1.2.c: Connecting from a windows laptop

1. Install and run putty.
2. In the "Host Name" field, you should put "cs.oswego.edu"
3. The "Port" field should say "22" by default.
4. The "Connection type" should be "SSH" by default.
5. Click the "Open" button.
6. A pop-up may appear called "PuTTY Security Alert". You can accept if you are feeling trusting. This warning appears the first time you connect to a server.
7. A terminal will open, and prompt you for your username and password.

Step 1.3: The command line

You should now have a terminal open, with a welcome message similar to the one below (except with your user name rather than mine).

You can interact with the server by typing in commands after the prompt (which in this case is "altair - agraci2 - ~ >").

Step 2: Creating a space for your website

In order for the CS servers to serve your website to the people visiting your page, you will need to make a space to store your website that:

1. is in the correct location,
2. has the correct name,
3. has the correct permissions.

Step 2.1 Getting to the right place

On the CS servers, every user has a home directory. This directory's name will be the same as your username, and will be under the parent directory "home".

To make sure that you are in your home directory, you can use the pwd command, which prints the working directory.

If you get something other than "/home/" followed by your user name, you can always change the directory to your home by using the cd command.

Now if you try the pwd command again, it should show you that you are in your home directory.

Step 2.2 Making a directory for your site

In order to tell the CS servers that you want a file to be available over the web, that file must be stored in a directory called "public_html" in your home directory.

You can make a directory using the mkdir command.

To see the results of the previous command, you can list the current directory's contents using the ls command.

Step 2.2 Giving your directory the right permissions

Now that you have a place to put your website, you should make that directory available for the public to access. Since the "public_html" directory is in your home directory, you must make your home directory available to the public as well.

To accomplish this, we will use the change mode command, chmod to change some access permissions.

WARNING: The above steps can make it so that everything in your home directory can be read by other people in Oswego CS! If you have homework or personal files that you don't want other people to be able to read, follow the step 2.3 to make a private directory.

Step 2.3 Making a private space for your other files

You can make a space for your private files by using the mkdir command to create a directory, and the chmod command to make that directory readable only by you.

Step 2.4 Double-check your permissions

If you want to double-check the permissions for your files or directories, you can use the ls command with the "-l" flag to list the contents of a directory and display additional information about each item.

I am not going into a lot of detail about unix permissions. If you are interested in learning more, there are plenty of good articles out there (such as this one).

Step 3: "Hello, world!"

Now that you have created a space for your website, it's time to put something there!

Step 3.1: Get into your "public_html" directory

Earlier, you learned how to change your directory by using the cd command, and giving an absolute path to your destination. You can employ this same technique again to get into your "public_html" directory.

Another way to navigate is by using relative paths. This means that you specify where you want to go relative to where you currently are.

Step 3.2: Making an index.html file

First, what is HTML? Simply put, HTML or "HyperText Markup Language" is a language that allows you to describe a webpage. That description can then be understood by a browser (such as Firefox, Chrome, or Safari), and displayed to users.

From inside your "public_html" directory, open a new file called "hello.html" in the Emacs text editor.

Any text you enter now will be a part of the "hello.html" file. Try entering the text below exactly as it appears.

Now you are ready to save your HTML file!

1. Hold down the "Ctrl" key and press the "x" at the same time.
2. Release both the "Crtl" and "x" keys.
3. Hold down the "Ctrl" key again and press the "s" at the same time.
4. Release both the "Crtl" and "s" keys.

A message should appear at the bottom of your screen along the lines of:
Wrote /home/agraci2/public_html/hello.html.

Once your "hello.html" file has been saved, you can exit Emacs.

1. Hold down the "Ctrl" key and press the "x" at the same time.
2. Release both the "Crtl" and "x" keys.
3. Hold down the "Ctrl" key again and press the "c" at the same time.
4. Release both the "Crtl" and "c" keys.

You should be greeted once again with a command prompt.

Step 3.3: Visit your website

Your website is now available on the web.

1. Open your browser of choice.
2. Go to your page!

Step 4: Making a better website (optional)

One good resource for learning HTML and other languages used to make websites is the w3schools. Once you make a webpage, you might want to validate it, to make sure your HTML code is well-formatted.