Intro/Goals
The most obvious (and pressing) function for this website was to serve as a portfolio website for myself in my higher education and career pursuits as of late. It was also a great opportunity to revisit my React and general web-development skills in anticipation of a role that may require said skills again. As such I went in search of the relevant tools that would allow me to spin up the site as quickly as possible.
Static vs Dynamic Sites
One paradigm that I had heard lots about but hadn’t given any sort of substantial research or thought to until planning out this project was static sites and static site generators. Dynamic sites are what people generally think of when it comes to websites in that they generate content on the fly based on user requests and data from a database. Static sites on the other hand exclusively serve up pre-built HTML, CSS, and JavaScript files that the developer defines and configures explicitly. Static sites are simpler and faster, but generally lack a number of features, personalization, and flexibility that dynamic sites can provide. Seemingly though, for something as simple as a portfolio website that doesn’t require logins, user tracking, or really any user interaction a static site would be more than good enough.
Quartz
Coincidentally around the time I was doing research for what tech stacks I could employ for this site a docker container for a project called Quartz popped up in my “Recently Added” feed in Unraid Plugins so I began poking around. Quartz is what is described as a “static site generator” in that it provides a template that developers can customize and feed content to in order to generate consistent and simple interconnected websites. For me, the most appealing and unique part of Quartz was that it transforms Markdown into fully functional websites. This was particularly appealing to me as most of my school and personal notes were already in Markdown and stored in Obsidian which is one of the recommended ways to edit content for Quartz. I think Quartz is a phenomenally simple to use tool, and because it’s an open-source project maintained by a passionate community, it is abundantly easy to extend and add functionality as users need it. I myself performed a number of customizations to the color scheme, general formatting, graph view (view depth), and header and footer formatting alike. This all allowed me to customize the site to my liking (even being able to include a light and dark mode!) without requiring an overhaul of the latest React framework and fighting dependencies each time I wanted to make any sort of change. Quartz is an amazing project that I would absolutely recommend to any developers that want to quickly spin up a static site where the time dedicated to the site is better spent on the content than the construction itself.
CI/CD
Another benefit of using Quartz is that all that one needs to do is edit the content for the site and then serve the site in an appropriate fashion to providers or on a local machine. For instance npx quartz-build —serve is great for checking edits locally before pushing them to the respective deployment. For me this consists of two distinct pipelines, one of which is currently inactive. The first pipeline (the active one you are using right now) runs through GitHub Pages for deployment. All that I need to do is commit and push all the changes upstream and allow the GitHub YAML file to appropriately deploy it. This video was extraordinarily helpful for me, and I recommend it for a quick run through alongside Quartz’s own docs to quickly spin up a Quartz site. From there, it is accessible via it’s specially generated GitHub address, but I wanted to make the site more refined with an appropriate domain. As such, I purchased and then provisioned migsaenz.com from Cloudflare and generated the appropriate A records to allow my site to be routed through the relevant address. And that’s all it takes to deploy the code that is running the site you’re on right this very moment. The second (inactive) pipeline leveraged my server as the agent that serves the site and handles routing. Here a local version of git would serve as the version control with its relevant deployment structure as well, and a manually configured reverse proxy (NGINX) for handling requests. However, after further research and at the recommendation of a mentor I took this version of the pipeline down as the potential security risks that arise with handling all of the security of connections myself is perhaps a tall order and not worth exposing the underbelly of my network for when GitHub Pages is a perfectly functional alternative.
Conclusion
This site started out with just showcasing my skills for relevant viewers, but I’m planning to evolve the site further in the future for my own use cases. I want to expand to a blog section as well as a notes host/vault so that I can access my notes (privately) from anywhere. Overall, I think this site was a great medium sized project that forced me to reflect on my education and experience up until this point and deliver a small but impactful product for my own benefit.