How to build your own academic website at Oakland University

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/

In addition, you should have the following software utilities downloaded:

• Visual Studio Code (or any text editor of your choice)
• SonicWall Connect Tunnel (scroll down on this page to download)
• Download a FTP Client (Cyberduck or Filezilla 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 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, 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 if you end up using something).

• Plain Academic Template by Vasilios Mavroudis
• Academic Responsive Template by Demetris Zeinalipour
• HTML5UP Templates under the Creative Commons License

You can open up these templates in any text editor (Visual Studio Code 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 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

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 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

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 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.

[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 [e-mail]
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.

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). According to documentation, 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. My goal is to make this as beginner-friendly as possible!