Setting up my website

The why

A number of years ago I took a professional development course as part of my training fellowship (Genetics and Genomics Scholars) and was recommended to set up a personal website. Intrigued, I looked into the matter, and promptly shelved it as less important at my current stage as a first-year Ph.D. student than getting data and learning how to do analyses.

Last fall, I took another professional development class as part of the Wheat Coordinated Agricultural Project and, again, they recommended that we set up personal websites. Now that I am an Nth year Ph.D. candidate and am beginning to look for jobs I finally took the advice and began looking into the different ways to do this.

After looking into the usual commercial recommendations (wix, squarespace, etc.), I decided that a lot of them offered way more than I needed (a basic static site with a small handful of pages). As I am a tinkerer (and perhaps a bit of a luddite) at heart and love a good project, I decided the perfect thing to occupy my spare time while trying to write my dissertation was to code my own website in HTML and self-host it on and old desktop I bought to fix a car (perhaps that will be a future post).

Several minutes of reading guides–and the brief reflection that not only am I writing a dissertation, but my partner and I welcomed our new baby in December–and I decided perhaps doing everything myself was a bit much. During a 2 AM feeding I looked around for a compromise solution–5 minutes on a selfhosting forum on lemmy (a free and open-source discussion forum compatible with the ActivityPub protocol) told me that if I was willing to have a static webpage (I wanted one anyway) then Hugo would do most of the backend structure and legwork for me to produce a static HTML webpage that I could host on my GitHub page for free, and even point a custom domain to–perfect!

The How

After that preamble, I am documenting the actual how–mostly as an exercise in writing to help me get into the flow of things for my thesis, but also so that in six months when I forget what I did to make my resume page I can refer to something.

Installing Hugo and setting up the website

First of all I had to install the application. I run Fedora on my personal laptop, so I first grabbed the version from dnf–which is outdated and can’t install the themes to complete the tutorial. No problem, I said–I recently learned how to build from source, so I decided to try that. Half a frustrating hour later, I had installed Go, installed Hugo, and discovered that I could run Hugo only by calling the complete /path/through/the/system/to/go/bin/hugo. Not ideal! I decided to call it a night, and had a lucky breakthrough while brushing my teeth–hadn’t I heard of something called aliasing in bash that could help?

The next time I worked on the project I tried alias hugo="/path/to/go/bin/hugo" and voila! hugo works as it should.

I followed the rest of Hugo’s tutorial, then perused the available themes. After quickly becoming overwhelmed, I chose the first that jumped out at me (paperesque), then followed that theme’s tutorial (side note, though Fedora seems to include git subtree, I couldn’t access it. The easiest way to fix the path I found was simply installing it again). I also found downstream that I had to edit the base templates (found at theme/paperesque/layouts/_default/baseof.html when an update invariably breaks this) for the paperesque theme to allow block rendering, which was not included by default. This was simply adding the line {{ block "main" . }}{{ end }} to the body class statement.

I now had a functional but unpopulated website; now to fill it!

Content

After reviewing my notes from my professional development sessions and looking at a couple of online guides, I decided on a few things to prioritize:

An about me homepage
An online resume for quick reference, to be added as a QR code to a business card
When presenting, a page with my poster/presentation for others to reference afterwards
A blog, partly as a creative writing exercise and for practice before writing journal articles or my dissertation, and partly to showcase some of the work I do that would not otherwise make it into my resume.

Of the above four items, the about page and a blog are built into the paperesque theme. It seems easy enough to upload an HTML or image of a poster, so I will cross that bridge when I next make it to a conference, so that leaves me with a resume page. I easily set up a markdown document with a list of items and accomplishments, but it wasn’t as polished or clean looking as my real resume (crafted in google sheets of all things, because it let me play with margins and formatting best). After googling briefly, I came across an intriguing post detailing how to make a database populated resume that I decided to implement. After an hour or so of frustrating tinkering and exploring of templates, I found out my theme didn’t support layouts–after adding the line I mentioned above I was off to the races! I have very little experience with HTML or CSS, which is what templates in Hugo use as far as I can tell, so everything I did happened through trial and error, googling, and not an insignificant amount of asking AI to write me HTML code to do ‘X’. I quickly grew familiar with the basics, however, resulting in the product you see on my ‘resume’ page–it is still a work in progress, but I am excited about the possibilities of using a basic template for each section and having content files for each work experience, rather than updating an unwieldy Word/Apple Pages/Google Sheets/etc. doc, and having to migrate it to a new proprietary platform every few years when the format hack I was using to get my margins right inevitably breaks in an update.

Breaking and updating

I grew increasingly frustrated with paperesque, and also had technical debt in my directories from not knowing what I was doing and trying a bunch of things, so I eventually found a new theme and started over from scratch. I switched to not-much, a similarly lightweight theme that didn’t need to be tinkered with to allow block rendering and should be easier to tweak colors/styles with downstream. The site is still a work in progress but the bones are in place and live!