Greg Knapp

Site Building

The information below was kindly written and shared by Katie Gedeon (UO Math PhD) before shared with me by Elisa Bellah (UO Math PhD).  As a result, in any text after the "Shortcuts" header below, the pronoun "I" does not refer to me, it refers to Katie!

I found this resource to be incredibly helpful and totally comprehensive.  I'm still in the stage of using KompoZer for my editing and have not made full use of the guide below.  Note that links that are no longer working have been struck through.

Once you've built your site, you'll probably want it linked to your name in the Math Department GE Directory.  Currently, Mary Brown is in charge of such things (by virtue of being in charge of probably everything in the UO math department).  Just drop her an email and provide her with your url.


Shortcuts:

Getting Started

The first few steps I found on it.uoregon.edu and they are somewhat explained there. It is important to note that the location of your web page will be pages.uoregon.edu/''your DuckID'', without the quotation marks. The first thing you need to do enable shell access. Log into duckid.uoregon.edu, click ''Manage Optional Account Access'' and click the ''Enable shell access'' check box. Next you can log into shell. It's different for Mac vs. Windows users (and a lengthly explanation), so just go here to figure it out.

Building Your Site:

Now you need to actually write the code for your web page. If you're new to building a web site, I suggest using a WYSIWYG (What You See Is What You Get) program. There are a lot of free WYSIWYG programs out there. When I built my first site, I used KompoZer which is available for every platform, and I got a lot of help here. I also tried SeaMonkey and that was fine, though I preferred KompoZer. By using a WYSIWYG builder, you don't actually have to know how to write html code! However, the source code for your page ends up looking like a mess and if you ever tried to come back and edit the html, you'd probably end up scraping the whole project.

Once you have the editor, you can start building. I really wanted mine to look pretty, so I tried (unsuccessfully) to use a web site template. At the time, I didn't understand CSS files and my guess is that, if you're a beginner, you won't either. I recommend spending some time looking at templates to help you decide what you want the overall feel to be. In case you're curious, you can take a look at my old page style (though note that some of the links no longer work).

It is actually extremely easy to ''steal'' the design of a site that you like. For example, consider this page. Control-click (alternatively right-click if you own a PC) and ''View Page Source.'' Congratulations! You are now viewing the guts of my page. Simply copy/paste this into your favorite html editor (but be careful here since I use a CSS file). Note that even if you're using a program like KompoZer, you can still view the html of your site and paste this code in. For an example of a site that successfully uses the department's source code, check out Tyler's page. The department has moved to the UO Blogs style, but you could, for example, use Nick Proudfoot's web site as an example of a clean, simple layout. You can also look at Jon Brundan's web site if you're curious as to what the department pages used to look like.

Make sure that whatever your home page is, it is saved as ''index.html'' as this is how the server knows that this is to be your main page. What if you want to have other internal pages (i.e. my ''Teaching'' and ''Research'' pages)? Create a new page in KompoZer, or whichever builder you are using. Suppose you name it ''teaching.html'', for your Teaching page. Then create a link from your home page (the index.html one), input your link text (''Teaching'' in this example), and put the link location as teaching.html. The code will look something like this:


<a href="teaching.html">Teaching<\a>


If you're using a WYSIWYG editor, creating a new link should be straightforward. Notice how I don't need to put the full address of the link. In KompoZer, you would make sure the box for ''URL is relative to page location'' is checked (if you can't or don't check it, then the program will check it for you later). Alternatively, you could click the file button and find the .html file that you want to link to. Suppose you want to upload a PDF of the course syllabus for your students. Simply create a link, set the link location to syllabus.pdf (or whatever you named your syllabus in your folder).

For external links, such as Canvas or WebWork, set the link location to the normal url address.

Do NOT try to ''publish'' no matter what program you are using. I tried several times in different programs unsuccessfully. Just save all of your html files, and I'd recommend saving them all into one folder.

If you're linking to a file, be careful with capitalization! Different browsers read these things differently. If I'm going to create a link for the file named ''Quiz 1_Review Solutions.pdf'' on my computer, this is how the html code would look

<a href="Quiz%201_Review%20Solutions.pdf">Quiz 1 Review - Solutions<\a>

My browser will show the link as "Quiz 1 Review - Solutions" as I have indicated. Notice how I dealt with the spaces in the name of the file, which is named ''Quiz 1_Review Solutions.pdf'' on my computer. When uploading this file, you also need to be careful about capitalization. It's usually not a problem if you use a program as I've outlined in the next section, but keep this in mind if you use Terminal.

Uploading Files

The last step is to actually upload your files to the server. I highly recommend using a program called FileZilla. You'll want to download FileZilla Client, not Server. It's free and I've found it to be extremely easy to use. Once you've downloaded FileZilla, open it. You'll see four boxes at the top of the page; Host, Username, Password and Port. For Host, enter "sftp://shell.uoregon.edu" without the quotation marks. For Username and Password use your DuckId and for Port enter 22.

On the left-hand side of your screen is the Local site. Here you will access the file on your computer that you wish to upload. For example, all of my web site files are in a folder called "Website" on my desktop. If I wanted to upload this page, I would click on the Desktop folder, and then Website. On the right-hand side, you'll see Remote site. This is the directory for your site. Open the ''public_html'' file. This is where you want to upload all of your files. Suppose I wanted to upload this page. I would locate building.html in my Website folder on the left of my screen, then drag the file to the window on the right-hand side and drop it there. FileZilla uploads it for me! Since the file already existed in my public_html file, FileZilla will ask if I want to overwrite this file. From now on, when you open FileZilla, you can select sftp://''your DuckID''@shell.uoregon.edu from the drop down menu next to the Quickconnect button.

Unless you prefer to do things a bit more by hand, I recommend using a program like FileZilla. On my Linux machine, I prefer to use Terminal. If you'd like help with Terminal, look below.

Advanced Editing

When you're ready to get serious about building a web site, come back to this section.

Ready? Good.

I wasn't satisfied with the basic (read: ugly) design of my first page and I had always intended to invest a large amount of time into developing a better one. The product is what you're looking at now. There's no shame in having a basic and functional web site, especially if you are new to building. But having a well-developed site will certainly help when you start to apply for jobs. Additionally, developing your skills in graduate school will serve you well in the future.

The first step toward creating a ''prettier'' web site is understanding how useful CSS files are. Most of you are familiar with LaTeX so I offer the following analogy. Having a CSS file is similar to having a .sty file. Instead of having a messy preamble with a bunch of packages and commands, you can tell your favorite TeX editor to use a single package. Changing a single command in your .sty file will change each document that references it. This is the same way that a CSS file works. Instead of clogging up your html, you can reference a single CSS file. Note that this also means you'll need to upload your CSS file to your public_html folder in addition to your html files.

Now just as when you first learned TeX you looked at a bunch of other people's TeX files, so too is how you learn to use CSS. Again, I recommend finding a CSS template that you like and adjusting it to suit your needs. At the bottom of this page there is a link to the site from which I got this template. If you do in fact use a template, always make sure that you follow the wishes of th developer, especially if the template is free for public use. Editing a CSS file or building an html file that uses a CSS file requires some knowledge of html. Again, play around a bit and see what works. Here is a wonderful CSS cheat sheet.

You'll also need an html editor. I currently use Geany, primarily because of the syntax highlighting (which also comes in handy for writing SageMath code). I would also recommend NetBeans, which is good for editing many different types of files, including CSS files. It is very helfpul for beginners.


Testing Your Site

If you're using a WYSIWYG editor, then your page is pretty much what you see. Even before you upload your files, you can see what your pages look like. Simply click to open them on your computer and your favorite browser will open the local file. If you're using complicated code, you need to check the look of your site on every web browser that you can find. Different browsers read code differently. Most of the time it will be fine, but you should check to be sure. Especially check Internet Explorer. To paraphrase Dan, things don't always render properly on Internet Explorer. If you're having the same problems then I can help; you can download Google Chrome or Mozilla Firefox and use a real browser.

Using Terminal

When I was first starting out, I uploaded all my files with Terminal because I didn't know any better. It worked just fine, and it forced me to learn something new, but FileZilla is much more user-friendly, particularly if you are new to coding. In general, I use Terminal. The following will be useful if either you decide to use Terminal, or if you are away from your usual computer and need to edit your website.

Getting Started with Terminal

Open Terminal in your computer. If Terminal was already open, and if you are already logged into ssh (from setting up your site) type ''exit''. If you're not sure, close Terminal and reopen it. After each of these following steps, hit the enter/return button.

Type in

sftp yourDuckId@shell.uoregon.edu

Note that you can't cut and paste in Terminal. Make sure you leave a space between sftp and the rest. Then type in your password; it won't actually show up as you type it so don't be alarmed!

Simple Method for Uploading Files

Determine the path to the file you want to upload. You can do this by control-clicking on the filed you want and selecting ''Get Info.'' Under ''Where,'' it should give you a path that looks similar to this: /Users/kgedeon/Desktop/Website (my files are in a folder named ''Website'' that I keep on my desktop). Note that it is a coincidence that my MacBook username and DuckId are the same. Since I want to upload this page, I'm going to use this full path: /Users/kgedeon/Desktop/Website/building.html

My next step in terminal is to type

put /Users/kgedeon/Desktop/Website/building.html public_html

Again, be careful to include spaces. This tells Terminal to ``put'' or upload the specified file in the specified place. Now this page is accessible at pages.uoregon.edu/kgedeon/building.html!

Alternate Method for Uploading Files

This method is a little more complex as it involves diving into files on your computer via Terminal. I think overall it is neater than the simple method and much faster. Since I keep all my files for my web site in a folder named ''Website'' on my desktop, I will present the method that works for me. Adjust your paths to suit your needs.

First let's talk about the commands we'll use to upload files.

lcd folder

This tells terminal to look in the place called ''folder.'' Here I would replace ''folder'' with ''desktop,'' ''website,'' ''teaching stuff,'' etc. We've already seen that spaces are special in Terminal. So if I actually wanted to go to the folder called ''teaching stuff'' on my desktop, I would type

lcd desktop
lcd ''teaching stuff''


hitting the Enter button after each line. ''lcd'' stands for ''local change directory.'' If we want to change the directory on the server, we use

cd public_html

Remember that we want to upload all of our files into this folder. So this should be the only time we use the ''cd'' command. Once you've used ''lcd'' to look in the correct folder on your laptop and you've in your public_html folder, then you can upload files. If I was going to upload this page, I would now type

put building.html

into Terminal and hit enter. Maybe I want to go back out to the desktop so I can upload a file there or look into a different folder. I would use the following command

lcd ..

This tells Terminal to go ''up'' one folder. If you want to see all of the files in a particular folder, Terminal can show you. For that we would use

lls

This would list all files in the local folder. We can similarly use

ls

Let's see all of these steps together. Here is what a normal sequence of commands would be if I wanted to upload this page onto my site:

lcd desktop
lcd website
cd public_html
put building.html


Again, I would hit enter after each line. Suppose I had prepared some review for my class and I wanted to post the PDF online. My Terminal commands might look something like this:

lcd desktop
lcd ''teaching stuff''
lcd ''math 243''
lcd ''quizzes and worksheets''
cd public_html
put ''Quiz 1 Review Solutions.pdf''


You can see that I used quotation marks when necessary. Suppose that I'm currently ''looking'' in my teaching stuff folder, but now I want to upload something from my website folder. My Terminal commands might look something like this:

lcd desktop
lcd ''teaching stuff''
lcd ''math 243''
lcd ''quizzes and worksheets''
cd public_html
put ''Quiz 1 Review Solutions.pdf''
lcd ..
lcd ..
lcd ..
lcd website
put building.html


Note how many times I had to use the ''lcd ..'' command! Often I'll loose track of how many times I've used the command. This is where ''lls'' comes in handy.

A plus side with this method is now that Terminal is 'looking' in the right folders, you can upload a whole bunch of files quickly. This comes in handy when updating many pages at once.

Links for More Help with Terminal

http://answers.stat.ucla.edu/groups/answers/wiki/7a848/
http://www.hosting.com/support/ftp/ftp-from-mac-osx-terminal

© copyright 2016 Katie Gedeon