How I Created a Web Presence as a Web Developer

It was time for a refresh. My current site was several years old. In fact, I lost the Hugo config to be able to add new content. So, with some help from Ashley - a fantastic front-end designer and developer - we created a site that has whimsy and shows who I am and my skills.

Announcing hirozed.com!

Why hirozed.com? I’ve been using the hirozed handle for as long as I remember. “Hiro” originated from Hiro Protagonist, the (ahem) protagonist of Neil Stephenson’s Snow Crash. My memory of Hiro Protagonist was of a genius hacker, who in the metaverse was a sword-wielding protector of the domain.

“Zed” is in honor of Zeddicus Zu'l Zorander, aka “Zedd”, from Terry Goodkind’s Sword of Truth series. Zedd is a wizard of the first order, and mentor to the main character.

I loved these two books, so when I was thinking of a handle that wasn’t just my first initial/last name, these two characters stood out. They spoke to what I aspired to be in my life. Maybe not a genius hacker, but quite good in my profession, as well as a mentor to those around me. I was in my 20’s when I invented my username, but I think I might have gotten close to the spirit of my online handle 20-plus years later.

So, the answer to the above question I posed to myself is: hirozed is me online.

Now, as for what runs the site. It is a static site, using Jigsaw as the framework. Jigsaw uses Laravel’s blade templating. Since one of my goals this year is to learn Laravel, it was the perfect fit for my site. GitHub is where I've decided to store my repos, and Netlify watches for changes to my main branch and rebuilds my site.

I have a bigger ambition than a single page site -- I want to start blogging. However, all attempts at headless CMSs seemed to complicate what I wanted for a straightforward low-maintenance environment. Since I was going to publish on both Hashnode and Dev.to, I decided to make Hashnode my primary blog site. They allow for a custom domain (hello blog.hirozed.com) and I can take the same markdown content and create a post on Dev.to, referencing the original post there.

I decided that I still could use a CMS for maintaining content. Using Netlify CMS, I can keep my content on my own repo and will give me a bare-bones environment view a preview of my post. There are several templates using different static site generators. I chose the Nuxt.js template, which turned out to be easy to configure and stayed out of my way.

What I genuinely enjoy about Netlify CMS is there is a built-in editorial workflow. The workflow will create a branch for a new post and assign it to Draft status. When a post is ready for a once-over, set the status to "In review". Finally, when the post is complete, assign it to "Ready" and the CMS will merge the post into the main branch. During this entire process, a preview of the posts' branch will be available to view and share using Netlify's deploy preview feature. It will create a staging site for the specific branch.

The final piece of my blogging infrastructure is an NPM utility called cross-post. This will take the content from the main blog (in this case, the url for my CMS environment) and post to Hashnode and Dev.to. This post is my first attempt at this, so I’m crossing fingers.

I’ve also added links to Polywork and read.cv. These are two services that show what I’ve done and where I’ve been in different formats.

How I VSCode is a service which allows you to share the extensions and themes I use on my editor of choice. VSCode will be a blog post for a future time, but basically, the large ecosystem and wide adoption are definite benefits.

The widgets at the bottom of the site are based on a library called GitHub readme stats. It is a set of scripts hosted on Vercel that generates stats based on your GitHub info. It is meant for custom Readme files that you show on your GitHub page, but it works just as well on my site. The second widget is also from the same repo but pulls the information from Wakatime. Wakatime silently watches your code editors, in a non-creepy way, and gathers statistics on what language you are working in, how long you have spent on a project, and other metrics. I've been using it for years, and I find it a great metric on what other languages I've interacted with beyond PHP.

The final piece I want to talk about is the hirozed “brand”. I pestered my sweet, patient partner Ashley to come up with an avatar that I could use. I have an affinity for red pandas, so I wanted something based off of that. Once she finally relented, she invented the perfect embodiment of hirozed. My avatar is that of a nerdy red panda in the shape of a keycap, The banners she created, take that one step further and spell out my online persona also in keycaps. I now have brand colors, which I have attempted to incorporate wherever I can. Overall, I now have a sense of identity online.

I hope that my ramblings about my new online center of the web was interesting. If you have any questions, please let me know and I’ll try to answer as best as I can.