Creating Your Department Website

Video

Overview

Today we are going to focus less on a skill and more on a specific task: Creating a department website that matches the overall style of the department page, including all the navigation links.

Behind the Scenes

Content on the web is rarely written by hand, and the Purdue Math Dept website is no different. A collection of automatically-compiled static websites, it uses a system of "templates" and "configurations" to create the pages.

Faculty have access to a place to put their desired bio pages, and have the header, footer and formatting added - as well as some exciting automatic content, such as up to date publication data from MathSciNet.

As grad students - currently - we have to improvise somewhat. We are going to start by making our own "template" - albeit a less specific one - by taking all the content we don't want to make ourselves from another document.

In this case, what we want is something that feels like a child of the grad students list, so we will take our formatting from there.

For those of you outside of the department, please identify your analogous webpage system, and look for an example page - such as a bio page that fits in well - to copy from.

Modifying The Page

Use the Element Picker to select the "main content" area where everyone is listed. We want to delete all the contents but leave the div tag - so the "edit as HTML" option is useful.

Paste your bio that you created into this space, and let's change some other parts of the document while we're here. Don't refresh - you'll lose the changes so far.

Before continuing, let's make one more change. See the navigation People >> Graduate Students at the top of the page, below the navigation links?

Let's change that to People >> Graduate Students >> {your name} by adding a <li> element to this list.

Let's also make the Graduate Students a link.

Links

We have danced around links, but now we must get explicit. In HTML, a link is called an "Anchor". Links can link you within the page - scrolling to a particular point, like a section on Wikipedia - or to another page on the same website or a different one.

We want the "Graduate Students" link to take us back to the "Graduate Students" page, so we wrap it in an <a> tag with the "href" attribute:

<a href="https://www.math.purdue.edu/people/gradstudents">Graduate Students</a>

We're going to need more of this later to link the CV!

Saving

Right click the "html" tag, and click "Edit as HTML". Copy all the text into a file and save it in a directory as index.html, the default page name. Open it in your web browser.

This doesn't look right.

Referencing Files

Let's investigate what's wrong. Open up the inspector and you'll see a bunch of broken links, looking for local files like bootstrap.min.js.

Search the HTML for that file name, and you will find the reference:

<script src="../javascript/bootstrap.min.js" type="text/javascript"></script>

This is what is known as a relative reference; it navigates based on the current file. The department's content processor constructs these automatically based on where it is creating the file.

We don't have access to that processor, so we are going to change it to an absolute reference.

In this case,

https://www.math.purdue.edu/javascript/bootstrap.min.js

This is now a reference that will work from everywhere.

We can make the change for all the files by doing a find-replace on ../ - a relative reference - with https://www.math.purdue.edu/.

There are a third kind of references - absolute references without URL. These start /, and refer to a file "at this URL", but otherwise an absolute path.

They'll work fine once we upload to the department server, but if you want the page to look the same locally, you can also change them by replacing "/ with "/https://www.math.purdue.edu/.

While we're here, let's also delete all of the analytics scripts, so we don't do anything weird to their statistics (and to protect ourselves from tracking.)

We also don't need the people_search.js file, since we're not people-searching.

When we are referencing files on our own page, we can use local references. We just need to make sure to upload any files we reference to the webpage.

Changing the Sidebar

If you look at the faculty pages, they have a sidebar which links to parts of their pages - their "Home", their "Publications", and any other pages they have set up.

Let's imitate this by deleting the sidebar content. You can do this using the inspector, but we can also search for it in the text of the HTML.

Replace it with just a single "list item" <li> link to your department home page, https://math.purdue.edu/~{your name}.

This is also a great place to put some links! Let's link to our CV and/or Resume, from the same directory, in another <li>:

<li>
<a href="resume.pdf">Resume</a>
</li>
<li>
<a href="CV.pdf">CV</a>
</li>

This is a great panel for putting any navigational links if you want to have other pages, such as for courses or for specific research, or other resources you want to share.

Save the file and refresh.

Finishing Up The First Draft

Two more changes are necessary for the page to be complete: the HTML title still says Graduate Students, and your image isn't linked. These tasks are left as exercises.

You can also copy the basic data about you from your bio page, so that people can find all that information - your title, office, etc - at one place.

Copying to Math

The department is running a fairly standard web server configuration - using the devtools, you can see in the "response headers" in the network tab they are running Apache.

Aside from a few specially configured routes, this server is hosting documents as they exist in its filesystem. We each have control of one subdirectory of that, linked in your home directory - referred to by ~/WWW/.

Once you have an index.html file in that directory, Apache will recognize the directory and host any files you put in there for the world.

Assuming you have configured ssh according to this course, we can copy the file over, from a bash session running in the current directory, with:

scp index.html math:~/WWW/

To copy index.html to the ~/WWW/ folder on the math servers.

Using this same syntax, copy over your resume/CV, and your linked profile image.

Navigate to the math grad student directory. If you see [website] by your name, in addition to [bio], congratulations! You have successfully uploaded a website.

Check over it and make sure it looks how you like. Check that your resume/CV are linked, and everything is correct.

Enhancements

We don't have to limit ourselves to simply copying what's already there. We can import scripts to give ourselves extra functionality.

One very popular script is MathJaX. MathJaX is the premier way to render (most) $\LaTeX$ on the internet - including on this very page!

We are going to load MathJaX from a CDN:

<script id="MathJax-script" async="" src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>

This allows for browsers to cache it, so they don't have to load it separately for everyone's pages.

By default - to allow people to discuss money on the internet - it doesn't use $ as math delimiters.

As mathematicians, we talk about math far more than money, so we can change that with a simple config:

<script type="text/javascript">
  window.MathJax = {tex: {inlineMath: [['$','$'], ['\\(','\\)']]}};
</script>

Assignment

Today's assignment is to create and upload a department website you are satisfied with.

Include:

• The department style - outside of the main portion of the page, preserve the heading and footer of the page with all the links.
• the navigation depth field with your username, and with the "Graduate Students" as a link to the graduate students page.
• A link to your CV, your Resume, or both
• A picture of you, or a picture that represents you in some way
• Basic department info, such as your office and email
• A brief bio of you