Documentation

Introduction

The documentation of this website is divided into two parts: hardware and software. The website serves as a showcase of my personal work and displays my activities during my free time. To easily navigate the site, you can use the navigation bar, which provides access to all the site's features. By creating a personalized account, accessible through the navigation bar, you can explore the Node.js tab. With an account, you can view the creation date, username, and associated email of your profile. The footer of the site contains links to explore my professional presence on GitHub and LinkedIn, as well as a direct contact option via email. Below is a description of each tab in the navigation bar:

  • The Projects tab is an extensive showcase of my personal and school projects, offering a glimpse into the diverse range of work I have undertaken in recent years. It features a user-friendly dropdown menu for easy navigation through the various completed projects. Clicking on a specific project directs visitors to the project's dedicated page, which includes a detailed description of the project's purpose, objectives, critiques, and notable features.
  • The Documentation tab is the current page you are on. It provides information on the hardware components used, as well as the required software and frameworks to complete the site. I also explain how I connected the domain and obtained a free SSL. The goal of this page is to provide sufficient information for someone to recreate these projects without having to spend hours searching the internet for specific application connections.
  • The Miami Server tab offers easy access to the Miami Linux server, which hosts individual HTML pages for each student. These pages serve as repositories for a wide range of website-specific projects and assignments completed during my time at Miami. The server serves as a central hub, showcasing the diverse array of skills and accomplishments acquired through various courses and projects at school. Navigating this tab provides insight into innovative and creative projects spanning various web development and design endeavors.
  • The Resume tab provides a direct link to my current resume.
  • The Profile icon is used to create an account on the site. Having an account allows you to access the Node.js tab, as well as view the creation date, username, and associated email of your profile.
  • The Node.js page primarily serves to demonstrate the possibility of running a JavaScript runtime environment within the Apache server's limitations.

Hardware

The server consists of a Raspberry Pi, a cooling component, and a case. The Raspberry Pi used is a Raspberry Pi 4 Model B with 8GB of RAM and 32GB of storage. To ensure a faster and more stable connection, the computer is connected to the internet through an ethernet cable. The Raspberry Pi has a maximum operating temperature of 85ºC. To maintain proper cooling, I have installed a large heatsink with a fan on top, which provides plenty of cool air. Currently, the computer's operating temperature is 39ºC, which is cool enough for it to function properly without any concern. Below is a rendered image of the complete case, including all the necessary components.

render of case

The case design was created using Fusion 360 and then 3D printed in PLA. After appropriate sanding and painting, the components are installed and held together securely with screws and spacers. The top part of the case is made of polycarbonate plastic, which I sanded down the edges to achieve a smooth, matte surface that aligns perfectly with the case. To prevent any slipping on smooth surfaces, adhesive pads have been added underneath the case to minimize fan vibrations and ensure stability.

Software

The Raspberry Pi serves as the foundation for this project, running smoothly on Ubuntu 22.04.2 LTS with a comfortable 8GB of RAM and 32GB of storage. This setup provides enough resources for the intended tasks and ensures a stable environment for the various software components.

The website's front end is constructed using a combination of Php, HTML, CSS, and JavaScript. To facilitate easier development and achieve a consistent look and feel across the site, I decided to use the Bootstrap 5 framework. Bootstrap brings the added benefit of making the website fully responsive and mobile-friendly, which caters to users accessing the site from different devices.

To manage incoming HTTP requests from Internet users and deliver the appropriate information within the project directory, the website relies on Apache2 software. Apache2 is a widely-used web server software known for its stability and performance. I followed this tutorial from DigitalOcean which provides a step-by-step guide on how to install a LAMP stack (Linux, Apache, MySQL, PHP) on Ubuntu. The LAMP stack is a popular web development environment that allows users to run dynamic websites and web applications.

For handling account data, a MySQL server is utilized. This database stores all the relevant user information securely. To safeguard user passwords, I made use of the Argon2 cryptographic hashing algorithm. This hashing mechanism ensures that the passwords remain protected and cannot be accessed by unauthorized parties outside the system. The implementation of the secure login system using this algorithm was guided by this tutorial.

Additionally, I added Node.js on the Raspberry Pi, showcasing it as a proof of concept. Combining Node.js with the Apache server allows users to access Node.js applications through the same website. The process of integrating Node.js with Apache was made possible by following the instructions provided in this tutorial.

I purchased a domain through GoDaddy and connected it to the current server's IP address. To ensure that the domain always points to the correct address, a script runs on the Raspberry Pi every ten minutes, updating the domain's IP address as needed. This dynamic DNS setup was created with the guidance of the tutorial available here. Below is the recurring script:

#!/bin/bash

mydomain=“example.com”
myhostname="gateway"
gdapikey="api_key:key_secret"
logdest="local7.info"

myip=`curl -s "https://api.ipify.org"`
nsdata=`curl -s -X GET -H "Authorization: sso-key ${gdapikey}" "https://api.godaddy.com/v1/domains/${mydomain}/records/A/${myhostname}"`
gdip=`echo $dnsdata | cut -d ',' -f 1 | tr -d '"' | cut -d ":" -f 2`
echo "`date '+%Y-%m-%d %H:%M:%S'` - Current External IP is $myip, GoDaddy DNS IP is $gdip"

if [ "$gdip" != "$myip" -a "$myip" != "" ]; then
    echo "IP has changed!! Updating on GoDaddy"
    curl -s -X PUT "https://api.godaddy.com/v1/domains/${mydomain}/records/A/${myhostname}" -H "Authorization: sso-key ${gdapikey}" -H "Content-Type: application/json" -d "[{\"data\": \"${myip}\"}]"
    logger -p $logdest "Changed IP on ${hostname}.${mydomain} from ${gdip} to ${myip}"
fi

I obtained a free SSL certificate using CertBot. CertBot is a client that interfaces with a nonprofit Certificate Authority responsible for providing TLS certificates to a massive number of websites worldwide. The process of securing Apache with Let's Encrypt using CertBot was documented in the tutorial here, enabling the website to offer encrypted and secure communication for free.

Lastly, I utilized GitHub to keep the project organized. Allowing for collaborative development, tracking changes, and ensuring a well-maintained code repository.