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
Using a Template Engine
Let's say you want to have several pages, and you want to update them easily - changing just the content, not the links, the heading, header or footer.
Or you want to change the header or footer across the entire page - to update a broken link.
HTML is in violation of one of the central principles of modern software design - "DRY", which stands for "Don't Repeat Yourself". That doesn't mean you have to be.
Enter templating. It is a method of automating some of the things we did today - pasting data into certain portions of larger HTML documents.
In Python
, which we start on tomorrow, the dominant templating engine is called Jinja2. It is used internally, by default, in a variety of projects, in this case notably Pelican
, which this course is based upon.
You can use the file we created here to make a template which automatically inserts content.
There are a number of other helpful things you can do, and they are bundled into Pelican
- along with many things you don't need, that can be disabled. Here are just some of the useful things that Pelican
is doing:
- Turning markdown (a third markup language) into HTML document bodies for quick development/change
- Building a static document tree from source files
- Converting local file and page links into appropriate embeds
- Embedding the body and metadata into the template
This allows me to have a nice, clean file hierarchy full of nice, clean markdown documents, and still have them render properly as a personal and course website.
Here is the rough source for my website. Feel free to convert your own personal page(s) using it. However, this uses some technologies we haven't talked about - like Python
- and some we won't talk about, so this is largely on you.