A collage of phones display screenshots of this website.

I rebuilt my site using Hugo

I rebuilt my personal portfolio site using the Hugo static website generator. This is how I did it.

October 29, 2018

You’ve hopefully noticed that the layout of this site seems pretty new. I’ve been working for the past couple of weeks on an updated site that’s a lot easier to work with. Let’s dig in.

Requirements

My first “requirement” was that it should be easy for me to manage content. Before now, if I wanted to add any new content, I had to create a brand new page from scratch (well, partially from scratch…I did have a boilerplate template on hand to help me set up the basics).

Secondly, it needed to be easy to theme. Again, before now if I wanted to update the layout of the site…yep you guessed it. Editing every page by hand isn’t very fun. 🙁

With these in mind, I started looking for some new website system.

Choosing Hugo

I originally was meaning to go to a managed CMS like WordPress or Squarespace, I didn’t mind spending a few $$ a month to have simplicity (and peace of mind/customer support). But a few people had also recommended static site generators—notably Hugo.

So here we are.

With Hugo, you write posts in Markdown and then these posts are converted into static HTML pages. You can still intertwine raw HTML into these Markdown posts—it’s how I get the images to work properly (I use a custom system that loads optimized WebP images when a browser supports it). Hugo will then put all your pages together into a single site that can be published, in my case I use GitHub to host the site.

Hugo is free and open-source, which is a big bonus!

Making it mine

Front matter is used to generate metadata, and more! You can create variables that are then used inside the site. For example, I have options I flag true in the event I want there to be a hero image or if I want to remove the Recent Projects/Recent Posts sidebar.

And then there’s theming. I’ve ported over most of the site’s original style and layout—the font, navbar, footer, etc.—and it was pretty easy. You write core HTML templates and then “partials” that may or may not be injected when the pages are compiled.

Moving over old content

You’ll notice there’s more actual hosted content here than on the old site. That’s because of Hugo’s more blog-oriented way of working. I could write barebones pages that act as redirects to the Medium published content, but I decided it’s a good idea to bring everything together–especially as it’s important to have a backup location for my work.

The file sizes of the images on posts marked as Published on Medium are larger than for content that was originally published at michaelwe.st. I apologize for this. When originally publishing on Medium, I let their CDN handle compression and distribution. I’ve tried to compress the images down, and if you use Chrome (or any other browser that supports WebP images), you’ll have more manageable image sizes.

I may re-export content in the future in lower resolution formats better suited for the web.

What’s next?

I want to expand this site. You’re already here, so you can see that I am looking to blog more—though I will continue to use Medium for larger pieces and will direct users there. The blog here is for more rambly topics…I keep meaning to review tech, perhaps I should do that.

In the meantime, let me know what’s broken or missing here, so I can fix it.

Related

Device Manager

Microsoft Store editorial content

Your Phone redesign