Personal Portfolio Site Overview

Introduction

#

This article is the first article in a series covering the thought process, design, challenges, and final product of creating my personal portfolio site. Click the dropdown at the top or bottom of the article to explore the other entries in this series.

In this article I give a general overview of the technologies used and the workflow behind the website. Explore the other articles to learn more about the design requirements and build process of the website.

While the end product provides great value in promoting my personal brand and providing a platform to showcase my skills, this project was also valuable as an opportunity to practice the engineering design process.

Technologies used

#

The main technology used in this site is a static site generator called HUGO. The biggest advantage of a static site generator compared to a dynamic site generator is speed. Each time my site is served to a client the web server only needs to provide the stored html and css files. Written in Go, HUGO is also incredibly fast at rebuilding the website when making changes to the content or the template. Unlike dynamic sites, static sites remove the need for a database which subsequently increases security by reducing the attack surface.

My development environment of choice for creating the website was Visual Studio Code. The ecosystem of plugins and git integration for version control made it really easy to keep track of progress during development. I could also keep my development environment organized by using the integrated terminal to run the HUGO test.

I used GitHub as my remote repository of choice. The main reason for this choice was to increase my familiarity with a tool that is industry standard for any process that requires collaboration when writing code.

My service provider of choice for web hosting was Cloudflare. Out of the options I evaluated I found that the Cloudflare Workers free plan was more than enough for the traffic that I expect on my website. Cloudflare Workers is convenient as I can automate the build process of my site and configure a worker to automatically rebuild the site when a change is detected in the GitHub repository of the website.

I chose Cloudflare as my registrar as I found their pricing to be the most transparent and cost-effective in the long term. While purchasing my domain from Cloudflare limits my choice of nameserver to Cloudflare’s nameservers, this is not an issue as Cloudflare supports all the features that I would want such as DNSSEC. In addition, having Cloudflare as my registrar and web host made setup very convenient as the DNS records were automatically generated by Cloudflare as I was configuring the web hosting.

Workflow

#

One of the key ideas behind the portfolio website was to easily write or edit articles on my website without having to manage the hosting configuration or the code of the website.

This led me to develop a custom workflow that integrated into the static site generation.

Articles on the website are written in Obsidian, this provides me with a nice user experience as I can have a “what you see is what you get” experience while writing with Markdown, similar to a word processor such as Microsoft Word. Obsidian is the ideal editor choice due to its “file over app” philosophy, allowing me to open the content directory from the folder tree of my website as an Obsidian vault.

Once articles are written, I create a commit to my local git repository. Before publishing and while writing I can also preview how my articles will look on my website using the HUGO development server.

After I am ready to publish my changes to the production site, I push my changes to the remote repository hosted on GitHub. The changes are then automatically detected by the Cloudflare Worker that I set up. The Cloudflare worker runs the HUGO site generation, converting all the markdown articles into beautiful markup, and the updated site is published live at gabrielbaltazart.ca