Personal UX

Overview

For this project, I used my knowledge in HTML, CSS, PHP, SSH (Secure Shell), MariaDB (SQL Database Server), and the OpenBSD operating system to create a UX portfolio that is user-friendly on both desktop and mobile, unique, and as secure for users as it can possibly be.

Problem

The UI/UX portfolio I had in the past was a WYSIWYG (What You See Is What You Get) editor called Readymag, which claims to provide a way to “create outstanding websites without coding.” While this service may provide a great experience for some designers, I found that none of them provide the exact specifications I was looking for in a portfolio site. The key pain points users reported with the Readymag site were that:

1. An inability for users to copy-and-paste text on the site to a word-processing document or note for future reference (this is due to how Readymag renders their websites)
2. Irregular alignment of both text and images across the entire site because text boxes and images can only be dragged positioned with a WYSIWYG interface
3. Mobile experience being completely dissimilar from the desktop experience

In addition to these main complaints from users above, the Readymag portfolio for me as a creator was not scalable for including future technologies and was difficult to change quickly in order to market to different organizations. Additionally, not being able to more quickly customize the site using HTML and CSS made updating all three versions of the site for desktop, tablet, and mobile an unnecessary chore. Pages on the Readymag site included multiple spelling and grammatical errors also due to the rigidity of Readymag’s WYSIWYG. This rendered the portfolio site both unprofessional and lacking attention to detail.

Solution

For this portfolio site, I laid out the following project requirements:

1. Have entries to the website be easy to set up, customize, and edit without spending hours using a WYSIWYG editor
2. Select an existing platform that includes the ability to customize the website using CSS, HTML, and PHP
3. Make the security of the site robust and difficult to crack
4. Power the site with a self-updating backend that doesn’t require me, the admin, to keep logging in to keep the system up to date

Assumptions

1. The site will be running within a Virtual Private Server (VPS) that allows more creative control than other providers
   • A Virtual Private Server (VPS) is a virtual machine on a physical server that provide dedicated space
2. WordPress will be the Content Management System (CMS) running the site for its ease of use

Tradeoffs

1. A VPS requires advanced knowledge of how a web server works
2. A VPS provider, unlike a shared-hosting provider, is not responsible for any mistakes made to the VPS

Operating System of Choice: OpenBSD

OpenBSD is a free and open source operating system based on the Berkeley Software Distribution (BSD) and has a strong focus on portability, standardization, code correctness, proactive security, and integrated cryptography. I chose to create a VPS on Vultr and have OpenBSD installed on it for it’s small size, low footprint, and security features activated by default including separate read-only partitions for each system folder and firewall. OpenBSD also has its own HTTP server installed by default in the form of the Httpd daemon (OpenBSD man page)  A daemon is a computer program that runs a specific task in the background with no interaction from the user. The inclusion of this Httpd daemon was the main driver that lead me to choosing OpenBSD over other operating systems. The other OS choices I considered and ruled out include:

• FreeBSD: FreeBSD has many advantages to OpenBSD for large-scale web servers, including the open source OpenZFS file system and volume manager built into the core of the OS; as well as the ability to isolate a web application from other services by putting it in a Jail (FreeBSD handbook). Since my VPS would only be running Httpd, PHP, MySQL, and WordPress, I decided against FreeBSD for its large-scale features and built-in functionality not necessary for my use case.
• Any Linux Distribution: Linux has become the popular choice for web servers due to its familiarity in the IT industry for its extensive customization, flexibility, and compatibility with older hardware for some use cases compared to FreeBSD. However, the extensive hardware compatibility comes at the cost of size. The Linux kernel, due to its extensive compatibility, has a huge file size as a result and therefore a larger attack surface. Again, since these considerations do not apply to my use case, I also ruled out this option.

Another advantage to OpenBSD is its permissive licensing model (learn more). All components of the projects strive to be licensed under BSD, ISC, and other permissive licenses which allow for code to be freely edited and released under a different license. This is in stark contrast to copyleft licenses like the GPL.

Resources I used

DIY WordPress on OpenBSD’s httpd, paranoid.life – This is the video tutorial I followed to get myself started. It goes over a general setup of installing MariaDB, PHP packages, and WordPress in OpenBSD.

Httpd & Relayd Mastery by Michael W Lucas (Amazon) – This is the book mentioned in the paranoid.life tutorial as the basis for his basic setup. This book, in addition to the video instructions above, were instrumental in helping me get this whole setup running. Although I am a UX Designer, I also have experience in the past installing FreeBSD, Debian Linux, and Gentoo Linux in the past as a hobby. However, I have never gotten a web server like this setup on my own before so having this book was a great addition.

Paul Gorman’s OpenBSD Virtual Server on Vultr Runbook – I referred back to this tutorial when I was struggling to get the Let’s Encrypt Secure Sockets Layer (SSL) certification up and running on the VPS. An SSL certificate is essential to validate the security of a connection between a device and a website.

How to Run WordPress on OpenBSD 7.0 with HTTPD, Vultr – As I went through the DIY video tutorial I noticed there were some steps that didn’t work on my end with what the latest version of OpenBSD was back in 2022 when I started this server setup. During those moments, this article was extremely helpful.

Top Challenges

1. Since all of these tutorials use a domain like example.com instead of a real domain and exclude the extra step to add an SSL certificate, getting the OpenBSD setup working with my real domain for production was quite the challenge. I tried multiple edits of /etc/httpd.conf until I found this configuration that finally worked. The httpd.conf (OpenBSD man page) file contains all the preferences for the Httpd daemon. Here is a snippet of my configuration below:

   • server "[domain]" {
     listen on * port 80
     listen on * tls port 443
     tls {
     certificate "/etc/ssl/[domain].pem"
     key "/etc/ssl/private/[domain].key"
     }
     directory index index.php
     location "*.php" {
     fastcgi socket "/run/php-fpm.sock"
     }
     location "/.well-known/acme-challenge/*" {
     root "/acme"
     request strip 2
     }

   • Then to remove the upload limit on my server, I then added this line to the config file to allow for file uploads up to 5 MB

     • connection max request body 5000000000

2. To keep the system updated without manual login, I set up a crontab (OpenBSD man page) to run pkg_add -iu every day at 8 a.m to make the server update by itself. I used crontab.guru to help me generate this automated task.
3. I then followed this video tutorial from Tony Teaches Tech to login to my SSH server with only a strong key (no password) and with a port other than the dreaded port 22 (every hacker knows how to hijack servers with this default port). I also disabled logging in through Vultr’s VNC window via the account portal so that loophole is closed in the event my Vultr account is hacked.

WordPress themes and plugins being used on this site

Perfect Portfolio Pro by Rara Themes – During my tests, Semplice refused to load within this WordPress instance. This is due to the Httpd server not being as compatible with more complex web technologies as other HTTP servers like Apache and Nginx. This Perfect Portfolio Pro theme is not only compatible but can also be customized more for my use case.

Classic Editor – This plugin from the WordPress team restores the older editor that I personally prefer over the current one.

Next Steps & Future Enhancements

The plan is to continue to use this setup for my UX portfolio well into the future as long as OpenBSD remains active. It is also my hope that this documentation inspires other users to try creating similar sites like this one for their portfolio or blog. After being frustrated with the restrictions of Readymag and other providers, I finally have a solid and secure VPS that is entirely my own. I also upgrade to the newest OpenBSD release when available so all the packages installed are the latest stable versions.