How to build your own academic website at Oakland University
Tags: oaklanduniversity, html, css
Published: 2020-10-20 20:46:18

### **Preface**

Are you an engineering student or faculty member at Oakland University? Then, read on. This post is for you!

It took me a while to discover the ability to create a website under the secs.oakland.edu domain. After multiple days of trial and error, I was able to set up a personal website: http://secs.oakland.edu/~jalukar. I'm writing this post to make it easy for students and staff within Oakland University's School of Engineering & Computer Science to easily create their own websites!

You might be asking - why make your own website?

1. It's a great way to showcase your work to employers.
2. You can represent yourself in a professional way. Having a website on a .edu domain is a universally trustworthy sign.
3. Building/coding a website is a great way to prepare yourself for the modern workforce, especially if you are in the engineering field. You'll undoubtedly learn some HTML, CSS, JavaScript and you'll learn how to work with some network engineering tools.

### **Part 1: Requirements**

First and foremost, you must have an Oakland University SECS account to get started. If you're new to the university, you may need to request it at this link: 

https://oakland.edu/secs/technology-office/

![SECS Technology Office Website](https://dev-to-uploads.s3.amazonaws.com/i/ycnr8fkicfuatc6deza1.png)

In addition, you should have the following software utilities downloaded:
* [Visual Studio Code](https://code.visualstudio.com/) (or any text editor of your choice)
* SonicWall Connect Tunnel (scroll down on [this page](https://www.sonicwall.com/products/remote-access/vpn-clients/) to download)
* Download a FTP Client ([Cyberduck](https://cyberduck.io/) or [Filezilla](https://filezilla-project.org/) are great free options). I personally have had a great experience using Cyberduck.

### **Part 2: Building your website!**

This is the fun part -- you can now build a website! You will be using HTML, CSS, and potentially some JavaScript to get your website working. If you don't know what that means:
* Watch [this video](https://www.youtube.com/watch?v=mudOTSUumXg) for an introduction to HTTP, HTML and CSS. You can fast-forward to ~30 minutes if you just want to learn how to make a website). 
* Reference [this presentation](https://docs.google.com/presentation/d/1MnPu0XXm7itpIy8bX377IXSULCkzV7zzFO-GA6gO4O0/), which I created a few years ago to teach beginners how to make websites.

If you've worked with these languages before, there are plenty of templates to get started with! If you need inspiration, check out the links below for some free starter templates (just be sure to [give credit where it's due](https://tldrlegal.com/) if you end up using something).

* [Plain Academic Template by Vasilios Mavroudis](https://github.com/mavroudisv/plain-academic) 
* [Academic Responsive Template by Demetris Zeinalipour](https://github.com/dmsl/academic-responsive-template)
* [HTML5UP Templates under the Creative Commons License](https://html5up.net/)

You can open up these templates in any text editor ([Visual Studio Code](https://code.visualstudio.com/) is a great one to get started with), and customize the design/content to fit your own needs.

### **Part 3: Connect to the Oakland University VPN**

*NOTE: If you're connected to a WiFi network on campus, you can skip this step. Otherwise, assuming you're off-campus, you'll need to be connected to a VPN for this to work!*

Before you use an FTP Client to put your website's code on Oakland University's server, you are required to connect to the OU VPN! The easiest route would be to use Connect Tunnel (the program mentioned above). 

Simply follow the instructions [here](https://www.secs.oakland.edu/docs/pdf/vpn.pdf) for an overview.

1. After selecting "add configuration," enter `remote.secs.oakland.edu` as the server URL
2. Select `SECS` as the login group on the next page
3. Enter your `username` and `password` on the next prompt

{% youtube 8NWcUzgmp1A %}

<div style="position: relative; padding-bottom: 64.53900709219857%; height: 0;"><iframe src="https://www.loom.com/embed/e60959c5254245fd84303c6b56498953" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe></div>

Congrats, you're connected to the VPN! If you have issues with this, double-check the spelling for everything you typed, as everything is case-sensitive. If you are still having issues, use the link on [this page](https://oakland.edu/secs/technology-office/) to reset your SECS password.

### **Part 4: Time to put it on the web**

Now that you are connected to the Oakland University VPN, it's time to open Cyberduck (or the FTP Client you prefer). You can follow the steps below 

1. Click "Open Connection" or the "+" button to configure a new connection
2. Select "SFTP (SSH File Transfer Protocol) from the dropdown
3. For the server, enter `login.secs.oakland.edu`
4. Enter your SECS `username` and `password`
5. Press "connect" or double click on the connection on the main dashboard to connect with this configuration

{% youtube 4huCPop7y4A %}

If you have trouble connecting, first make sure you're connected to the OU VPN or connected to a campus network. Then, double-check all of your settings. If that doesn't help, you'll need to go to the [technology office](https://oakland.edu/secs/technology-office/) for assistance. 

Once you're successfully authenticated, create a folder called `public_html` in the directory you are in. From here, simply drag/drop or upload the HTML/CSS/JavaScript files for your website to this directory and view your website at `http://secs.oakland.edu/~username`.


{% collapsible [Optional] If you would like to connect via SSH from your terminal, you can use the steps below. %} 
1. Open `terminal` or `command prompt` on your computer.
2. Type `ssh username@login.secs.oakland.edu`
3. Enter your password

That's it - you're connected! Now you can use `git` and other linux commands, and clone projects right into to your working directory. 

{% endcollapsible %}



### **Closing Notes**

Congratulations, you now have a fully functioning website on an oakland.edu subdomain! 

If you want to go further, you can upload your resume to the `public_html` folder (you can then link to it like [this](https://www.secs.oakland.edu/~jalukar/resume.pdf)). According to [documentation](https://www.secs.oakland.edu/docs/pdf/personalWebSites.pdf), the SECS web server allows you to add PHP, Perl, and Python files and also connect with a MySQL database.

Have fun coding!

_Note: If you have a suggestion for how to improve this article, or if you were confused anywhere, [shoot me a message](https://twitter.com/shriyashjalukar). My goal is to make this as beginner-friendly as possible!_