Creating a Personal Website

One perk of having a CS account is that it gives you access to free website hosting. This page will guide you through the process of setting up a basic static website. We will write a few simple html files and add some CSS to them.

With a static website, visitors access simple html files via their browser. There is no backend code to dynamically display information or interface with a database. In fact, we do provide a way to run scripts on your website via the CGI system, but that will be the topic of a later guide.

In our hosting setup, all your website files live in your CS home folder on mimi. You can log in to mimi to set up your site, then it will be served by a seperate web server. Your website lives in a subfolder called public_html. This folder must exist at the root of your home folder and be readable by everyone. You also have to make your home directory executable.

$ chmod 701 ~ $ mkdir ~/public_html $ chmod 755 -R ~/public_html $ cat ~/public_html/index.html <h1>My Awesome Website</h1>

I used the cat command to show the contents of the index.html file but you will have to write the file yourself.

Note that all files and directories under ~/public_html must have the permissions 755, or -rwxr-xr-x. This means that you can do whatever you want, but everyone else can only read and execute. In this context, the execute bit allows people to enter directories.

Now go to cs.mcgill.ca/~username to view this file, where username is your CS username. When you visit cs.mcgill.ca/~username it will show the ~/public_html/index.html file. This is how we've configured the web server and is for convenience. To access any other files, you must specify the file name in the url.

Let's modify our index.html to add a link to a new file.

$ cat ~/public_html/index.html <h1>My Awesome Website</h1> <a href='/~username/new.html'>New file</a>

Note the use of /~username/ there. You can think of the links of a website in the same way as file paths on mimi. When you link to a file on your website, you should use the same path as on mimi. Just substitute the ~/public_html on mimi with /~username on your website. This tells the browser to look in your ~/public_html for the file.

Clicking the link you just added in your browser will show a "Not Found" error. So let's create that file.

$ cat ~/public_html/new.html <h1>My Rad New File</h1>

And now the link from your index.html will work!

You can also put files in subdirectories.

$ mkdir ~/public_html/cool $ cat ~/public_html/cool/stuff.html <h1>Cool Stuff</h1> <a href="/~username/index.html">Take me home!</a> $ cat ~/public_html/new.html <h1>My New File</h1> <a href="/~username/cool/stuff.html">Cool stuff!</a>

Now lets add a little style to our site. We can serve css and Javascript files in the exact same way as html.

$ mkdir ~/public_html/static cat ~/public_html/static/style.css html { font-family: "Comic Sans MS"; } a { color: magenta; }

We now have to tell our visitors web browsers to load up the styles. To do that we will add the following bit of code to the top of each one of our html files. Make sure to replace "username" with your CS username.

<head> <link rel="stylesheet" href="/~username/static/style.css"> </head>

I have great taste, thanks for noticing.

If you would like to use javascript in the browser, you can do so in the exact same way. I won't cover javascript here as it's a pretty big topic (and i don't understand it.) You will be able to run any client side javascript you like. So you could make a pretty cool page with just the static html and a javascript UI library like React or Vue.