Introduction

In my two-unit "Intro to grad school" course at UC Santa Cruz, one of the required projects was to create our own personal web page. It seemed like a good idea, and I figured it would be easy to do since I already knew how to code, so how hard could it be? I was (mostly) wrong. It turns out to be relatively easy create a very basic website using pure HTML to display text and images, but I didn't feel artistic enough to create something that actually looked nice, and learning CSS felt like too much of a hurdle at the time since I'd already satisfied the minimum requirements of the course project.

Fast forward to today, and I was starting to feel like having a nice looking personal website could have it's benefits:

1. I had recently written some code for my mom to schedule round robin pickleball tournaments. It was written in Matlab, and I had sent my mom an online Matlab interpreter she could use to run the code. It worked, but it felt a bit clunky. Then, she mentioned that she had sent it to some of her friends, and they were all using it and raving about how good it was. I felt like a personal website could be a good spot to host this project.
2. I was wanting have a place to host my personal accomplishments that wasn't LinkedIn. LinkedIn is really my only form of social media, and I had it because I thought it was good for my career. But in my many years of using it, I hadn't really gotten much out of it other than an inbox full of junk mail from them.
3. Having a personal website can be used for anything and evolve if my needs change. For example, if I want to one day start an engineering consulting side gig, I could post my services on this site.
4. I have been getting into open source tools, privacy, and self-hosting lately, so I figured that hosting my own website would be a great experience to learn some new skills with.

Building the site

I decided to start brushing up on my HTML and CSS, and I remembered how much I disliked looking at HTML. To me, it just looks much more clunky and hard to read compared to the coding languages I normally like to work in (Matlab, C, and python). So I started researching other methods of building a website, and I stumbled across the concept of static site generators, or SSGs. Their value proposition seemed great: you only needed to know how to write in markdown, and the SSG would take care of generating all the HTML and CSS for you to make the content look pretty. Plus, since the site was static (no Javascript of need to communicate with a server, just pure HTML and CSS), the websites that get generated would load very quickly. This spoke to me because I have been getting a bit fed up with most modern websites taking a ton of compute resources and still loading slowly anyways. Because of these factors, I decided to go with the SSG route.

I settled on using Zola (I don't think it's affiliated with the popular wedding website creator, but I could be wrong about that). I didn't choose Zola because it had the most users, or the most prebuilt themes to choose from, but I chose it because it was written in Rust, and as mentioned above, I have an obsession with high performance, and I have been wanting to learn Rust.

After installing it via the command line, I read the "getting started" guide in the docs and followed along. I was pleased with how quick Zola was at generating the website and detecting changes automatically when a source file changed. I was also pleased with how easy it was to get a basic website up and running. Still, after the getting started guide, I had something that just looked similar to what I had previously made in college. I decided to style it up a bit by installing one of the community-built themes, and I found out the real power of the tool lie in its easy to install themes. After adding the terminus theme as a git submodule to my website's repository, my dinky project started looking like a real website with a navigation bar up top, and some nice color and font options that spoke to my desire to be a cool hacker that only used dark themes, even during the daylight hours.

Now all that was left was to fill out the content of the website and find out how to host it!

Hosting the website

I started researching how to host a website on my home server, and I quickly became dissuaded. Many people who claimed to know a thing or two about computer networking said that I would need to essentially take a whole course series in networking security in order to safely host a website on my home network. Not wanting to open up my home network to any malicious actors, I instead opted for using Netlify to host my site. They seemed to be well regarded for static sites, boasting fast load times and ease of setup. Plus they had a free tier that would allow me to host my website without even inputting any credit card details. Their free tier allows for magnitudes more site visitors than I'd expect my little personal page to get, so I figured I'd be safe for a while at that level. I built the website, and uploading it was as simple as dragging and dropping the folder containing the html and css files onto Netlify's web UI. And it was live! I was able to actually access my website online and others could too. This was very cool, but I felt like I was still missing something, namely a short and memorable URL instead of the clunky one that Netlify gave me for free.

Setting up the custom domain

I started searching for domain registrars, and I settled on Njalla. It wasn't one of the big popular ones, but I liked it because of the level of privacy it offered. Obviouly I won't be fully utilizing the privacy features since my name and contact information is right on the front page of the site, but I like supporting organizations that offer more privacy nonetheless.

I started searching domain names, and, to my delight, I found that zacharypotter.com was available for a mere 15 euros per year. I figured one of the many other Zachary Potter's out in the world would also realize this soon, so I quickly bought the domain before any of those other Zach's could beat me to it. Setting it up to point to my website turned out to be quite simple; I just needed to copy some of Netlify's server names and paste it to the ANAME and CNAME records on my domain managemnt page on the Njalla dashboard, thus telling any requests for zacharypotter.com to be pointed to the my website hosted on Netlify's servers. I just had to rebuild the website one more time with the config.toml updated to use my shiny new domain name, and voilà, I had my personal website accessible via my custom domain name!

Bonus: using my custom domain for email

I now figured that the icing on the cake would now be to have an email address that ends in @zacharypotter.com. Since I already was a Proton Mail premium member, this turned out to be quite easy since it's aleady a feature included in my plan. I simply had to do a bit more copying and pasting of credentials to my Njalla DNS dashboard. After making the appropriate records updates so that Njalla would point emails to the Proton Mail servers, and waiting a few hours for the changes to propogate throughout the web's name servers, I was able to use email addresses with my custom domain!

Conclusion

Overall, this project was pretty fun and much easier than I expected. I am excited to continue to fill out the oages of this site with more content and projects that I come up with. And now that I know how easy it is to build and host a simple static website, I won't be afraid to do so if the need arises.