To help document graduate student knowledge, I have prepared the following guide for how to set up a website on the CU Math Department’s server. When executed correctly, you should have a website available to you at https://math.colorado.edu/~identikey. For example, if your identikey were “ralp1234”, it would be available at https://math.colorado.edu/~ralp1234.
Ssh into the mathematics server euclid.colorado.edu by executing the following command.1 On Mac systems, you can enter a terminal by pressing Cmd+Space and searching for “Terminal”. On Windows systems you can ssh via powershell (and you can find those programs by searching for it in the main menu area).
By the way, ssh stands for “secure shell”. It is a way for you to (securely) enter a shell (a place where you can write commands) on the connected machine. You’ll be asked for your identikey password, and perhaps something about adding to a ‘known hosts’ file. Say yes, and enter your password.
You should now be able to execute commands on the euclid server. Write the following command:
which $SHELL
If all goes properly, it should return /bin/bash. If it returns something else (like /bin/zsh), then you’ve changed it already and likely know what you’re doing, or the default shell has been changed since the time of writing.
Next, let’s check which folders (also known as directories) we currently have.
ls -l
If you see one labeled public_html, great! If not, let’s go ahead and make that directory using the mkdir command.
mkdir public_html
This is the directory that will store the html files for our website. Next, we’ll need to ensure that the permissions are set correctly. For that, we use the following command:
chmod 755 public_html
Now, we can test to see if our website is working! For that, let’s enter into our public_html directory and create a file called index.html.
cd public_html
nano index.html
You should see a little screen appear in which you can edit the file. In it, paste the following.
<html>
<body>
<p>Hi there! This is a test website.</p>
</body>
</html>
From there, save the file by pressing Ctrl+X. You’ll be prompted to save the file. Press y for yes, and then press enter to save the file as index.html. Now go to your new website (again, at https://math.colorado.edu/~identikey) to verify that your website is live.
Now, it’s time to think about what we want from our website, and our website maintenance experience. I have two suggestions.
For many, I recommend google sites. It’s easy to maintain, and it is also independent from the university. Meaning when you graduate, you don’t need to worry about saving your website files. Based on very quick sampling, approximately half of the current CU professors in the math department with a website use google sites. If that’s the route you choose, then simply change that index.html file inside of your public_html to point to your google sites url. Here’s a sample file that you can use, just replace the url in both lines 8 and 16 to reflect your website URL.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- This is the core redirection tag. It waits 0 seconds and then goes to the URL. -->
<meta http-equiv="refresh" content="0; url=https://www.example.com">
<title>Redirecting...</title>
</head>
<body>
<div class="container">
<p>Redirecting you to example.com...</p>
<p>If you are not redirected automatically, <a href="https://www.example.com/">click here</a>.</p>
</div>
</body>
</html>
Static website generators provide a nice option that sits between writing a website with raw html and a google site.
The benefits of a static site generator over raw html are many, but what I’ll emphasize here is that it separates the task of writing content and styling. You choose a theme (or create a CSS file) to design your site, and then separate from that you write content, typically in the form of markdown files. That’s it.
The benefits of a static site generator over a google site is that you have more granular control, are not further locked in to google’s ecosystem, and that you have all the source files.
While there are many static site generators, I recommend hugo. It is fast, under active development, and relatively simple. If you want to try it out, follow the rest of this guide, and then tweak as your heart desires. If you chose the google sites option and completed the above link redirect, you’re almost done! If you choose to write raw html, more power to you and good luck. In either case, head to the conclusion of this guide to see the final step.
To be clear, what is to follow will not be a comprehensive guide on how to get everything that hugo has to offer. Such a task is best left to various youtube videos, and more realistically, some experimentation and reading the documentation. With that out of the way, here is an incomplete quickstart guide:
First, we need to get hugo installed. Make a directory and move into that directory:
mkdir -p ~/apps/hugo
cd ~/apps/hugo
Then clone a recent binary version of hugo, and unpack it:
wget https://github.com/gohugoio/hugo/releases/download/v0.148.2/hugo_extended_0.148.2_Linux-64bit.tar.gz
tar -xvf hugo_extended_0.148.2_Linux-64bit.tar.gz
Note: of writing this article, 0.148.2 is the latest version of hugo which is compatible with the software on the euclid server.
Then, add that directory to your path. This ensures that you can execute the hugo command.
echo 'PATH="$HOME/apps/hugo:$PATH"' >> ~/.bashrc
source ~/.bashrc
Then, move back to the home directory and create a basic website:
cd ~
hugo new site mySite
Find a theme you like here, and use a similar command to download it:
cd mySite
git init
git submodule add https://github.com/yihui/hugo-xmin.git themes/xmin
Then, tell hugo in your hugo.toml file that you want to use this theme:
echo "theme = 'xmin'" >> hugo.toml
And finally, write some content. All hugo content sits in content/.
nano content/_index.md
The _index.md file is special, and different from index.md, so don’t forget the underscore character. Now, you’re ready to generate your website. Run:
hugo
Notice that you now have a new folder in your hugo folder, called public. We want to move the contents of that folder into the public_html directory that gets served.
mv public/* ~/public_html
Now, go to https://math.colorado.edu/~identikey, and see your website live!
You should, no matter your method, now be able to see (or be redirected to) your website via the https://math.colorado.edu/~identikey. If you want this to be linked from your student info page, just email Jeff Taylor, and he’ll add the link. Best of luck!