whitelotusinteractive.com

After bashing my head repeatedly putting this site together, I accomplished my goals. I had a neat little blog setup, figured out “self” hosting, and got the site live. All the basic needs fulfilled.

“Hey,” the world whispered, “would you like to do it again?”

As my wife (MUH WIFE) and I like to say to each other, you need a reason to do things. This time, the reason came crashing through the door with a rather extreme financial incentive involving my companies’ website. Long story short, our site’s host WIX, in their infinite wisdom, decided to increase the yearly price of service 84% and locked us into the deal, prompting the immediate decision to permanently abandon them. How convenient - for the past month I’ve been hobby website building, time to put it to the test!

Here we (Hu)go again

The WLI site is what those in the biz call a brochure site, IE just the facts, ma’am. We want to provide some info, images, and links about our (1) product, and inform potential future customers about the latest and greatest.

There is admittedly, some overlap with this blog as is - for example I wasn’t sure if I wanted to include this post on the new WLI site itself. I’ve tacitly decided to save WLI blog posts for “content”, IE things directly involved with WLI activities, and this blog for techy stuff.¹ Thus, I did make a post about the site, but it was more of an update on what features I’ve added and what to expect later.²

Hugo / static HTML continues to be a great option here, perhaps mostly due to me recently familiarizing myself with it. I had already cut my teeth on CSS / Bulma, basic template structure, markdown - even some short code stuff. I’m ready!

Asset Land

Honestly, as far as building the actual site goes, the only real trouble I ran into was images / “asset” management. This site basically has no images (as of now) but the WLI site for sure needs screenshots, youtube links, header images etc. Hugo has some pretty awesome systems for managing these but my god does it not hold your hand here.

Hugo has this system for processing images called “Hugo Pipe”… ok. Anyways, it can do automatic resizing and filtering to your images - this makes it as simple as pasting images of any type right into the page folder for whatever you are working on and Hugo will automatically process the images. I found a bunch of confusing and contradictory articles online about how to do this “the right way”, but here is the ultra simple code I ended up using:

Paste this into layouts/_default/_markup/render-image.html

{{- $caption := .Title -}}
{{- $src := .Page.Resources.GetMatch (.Destination) -}}
{{ $small := $src.Process "webp" }}

<div class="box has-text-centered">
<center>
<img src="{{ $small.RelPermalink }}" width="{{ $small.Width }}" height="{{ $small.Height }}"
  {{- with .PlainText }} alt="{{ . }}"{{ end -}}
  {{- with .Title }} title="{{ . }}"{{ end -}}
  
>
</center>
{{- with $caption -}}<p class="imgCaption" style="font-style: italic">{{ $caption | $.Page.RenderString }}</p>{{- end }}
</div>
{{- /* chomp trailing newline */ -}}

Now instead of the standard garbage markdown rendering I get a little nice box and caption. Oh, and it converts the image to .webp - kinda an annoying format for downloading but holy moley is it efficient.

You call the image the standard markdown way, like this:

![alt text](image.png "Caption text")

If you want to do the same thing on a static page it’s a bit more of a mess:

{{ $image := resources.Get $link }}
{{ $small := $image.Resize "512x lanczos webp" }}
<p class="image"><img src="{{ $small.RelPermalink }}" width="{{ $small.Width }}" height="{{ $small.Height }}" alt="{{ .Title }}"/></p>

Ugh this isn’t exactly portable either, it’s the code I wrote for a specific section (the team page). Either way, beats having to manually process every image!

Hosting / CDN

This site is hosted probably one of the more janky ways you can decide to do it these days, but for pro work I figured I should probably get with the times a bit. I have many reservations about centralization of the internet and convenience vs functionality, but, it is 2026. Sometimes we have to do the normy thing.

After research, the most prudent solution I found for “hosting”³ the WLI site was through, you guessed it, CloudFlare. I’ll probably do a write up about them at some point, but lemmie first list the process. Ooh, ooh, I can use one of those fancy markdown tables!

Compared to this site, WLI is practically corporate!

Hosting / building on CloudFlare Pages is laughably simple compared to my trudge through self-hosting land. Honestly, they safeguard just about everything, automatically figure out what workflow you are using, just give us your github bro we got this shit. It is a bit frightening, but powerful. I don’t feel the need to tutorialize this process as the CloudFlare docs are vast and, well, everyone uses them at this point.

Nameserver madness

I will, however, rant a bit about how they essentially enforced usage of their nameserver. See, Pages poops out a silly little URL (something like name.pages.dev) and your site works. They have a nice little system for setting up a custom domain and advertise as such. However, they don’t really make it clear that you can’t simply CNAME the website from an “apex” domain (https://whitelotusinteractive.com), only from a subdomain (https://www.whitelotusinteractive.com).⁴ Well, you can, but ONLY if you use their nameserver. I fucked around with domain settings for a while, almost getting it to work with redirects and whatnot, but could not quite get everything right. Since this was for work, I’ll admit, I gave in, and switched the name server to CloudFlare.

Is this a problem? No, probably not. But I don’t like being bullied. Changing nameservers is really easy, and if CloudFlare goes full garbage mode I’ll have to switch hosts anyways. The real work is in the site, and it’s under my thumb.

The Results

Version 1.0 of whitelotusinteractive.com

Hey, this is pretty neat! After wrestling with name server stuff the site went live a few days ago. Bye WIX, don’t let the fucking door hit you on the way out. The best part? I can back port all the stuff I learned into this site, and vise versa. Now you’re playing with power!