Introducing HeroBound - zimmed.io

It's been an arduous road, full of twelve to sixteen-hour working days, but I'm happy to say that what was just a tech demo with months of work behind it has finally been given the breath of life, entering its alpha stage as a real, tangible video game. After setting up the business side of things, as well as designing, implementing, and deploying two new websites, it's finally time to officially announce the project -- and get right back to work on the actual game development!

• • •

So, without further ado, please give a warm welcome to HeroBound: The Epic Web-Based MMORPG

• • •

Although this really only marks the beginning of the journey, I can't help but feel the weight of a major milestone lifted from my shoulders, just getting this far. I'm sure this has a lot to do with regularly burning the midnight oil and getting very little sleep in the past two weeks, but it is still important, nonetheless. But enough dilly-dallying; let's get to the development talk!

Since the new landing page is full of preliminary information pertaining to what the game is, I'm going to, instead, use today's blog post to talk about the tools and methods I used getting the new websites up. This will mostly be of interest to inexperienced developers and designers, so my apologies to those outside those categories. The next post will be about game-related development, I promise!

So let's start with the website designs. The first site I built was this one, for the LLC, which didn't even have a landing page previous, and was mostly used for its subdomains that hosted web applications, both personal and for clients. Originally, I only intended to create a landing page, but then I decided to migrate my blog here, so I could cancel my subscription to Ghost. This ended up being quite the prudent move, but I'll get to that in a bit.

I started this site by first settling on a logo design. Since I am definitively not an artist, I have taken to using AI image generators to try to get a sense or a rough draft of the image I'm seeking, before sending it to a designer as a reference point. So after playing around with a few different generators, and contracting the work to an independent artist, I had a logo for zimmed.io that I was satisfied with. (I also used this process for the HeroBound logo, which, in my opinion, is far superior).

Once the logo was finished, I began designing the landing page around it. And let me tell you: it was hideous. Although, technically UI and UX were the specialization I studied as a Computer Science undergrad, my college days were probably the last time I was actually keeping up with modern web designs and techniques. My job rarely requires me to create landing pages, which usually go to design shops or marketing teams, and when building most complex web applications, we're just using google's Material-UI framework for everything, so we don't have to think about the design. Thus, my site looked pretty good, for 2007. Fortunately, a friend of mine who runs a design consulting agency did a quick and seemingly effortless redesign that brought the site into the current decade. I still don't understand how he was able to put it together so quickly; it's all magic to me.

Once I finished implementing his designs (which, if it interests you, was using TypeScript and React -- eventually being refactored into a Next.js pages app, so I wouldn't have to tool my own static deployment), I decided to add a blog page and migrate over from Ghost. This took a decent amount of work (though the [react-markdown] package made the UI-side quite painless), but it was well worth it to have more control over the pages, as well as a huge boon in speed, largely due to its architecture. The way the blogging is designed on this site is fairly simple:

1. Make a new folder for the post in src/posts using the post title.
2. Create a post.md (markdown) file in that folder.
3. Add images (including one called primary) and optional markdown files with the same names for image descriptions.
4. Create optional metadata using inline comments (e.g., post tags, author, etc.)
5. Build the site.

The unique part here is the build-time script which compiles every post (as well as author and tag pages) into static pages and generates the metadata to be included on other pages, like the landing page. Static web pages not only load much faster than dynamic ones, but they also make SEO a lot simpler. So now, when I want to add a post, I just follow those steps, and everything else is automatic. The page is created. Author and tag pages are created/updated, and even the landing page updates to have the most recent posts available in the News section.

Finally, it was time for a proper deployment (instead of just hosting on one of my Raspberry Pis), for which I decided to use Cloudflare Pages.

Setting this up was super easy, although a shortcut was used. I host my own private git repository using OneDev which works really well, but is much less popular than GitHub or GitLab and so integrating with other tools takes a lot more effort. For this setup I decided to cut the Gordian Knot and just create a repository mirror on GitHub, so I would be able to use the automatic integration with Cloudflare. It was as simple as git remote add deploy [email protected]/zimmed/zimmed-site, and a git push deploy <env-branch> when it's time to kick off a build. It's not the ideal scenario to have an extra step like this for deployments, and I'm sure something like a git hook would remove it, but for now, I'll live with it. If this was for a client, it would be another story. But once I had the GitHub mirror, setting up the CI/CD with Cloudflare Pages was incredibly simple.

As a side note for Bun users -- there is an issue with using Bun in the automated deployments that requires re-creating and committing the lock-file before each deployment. Hopefully this bug is eventually fixed, but it's not the end of the world, certainly, when doing a full installation using Bun is done before NPM would have even determined which action you're running.

As simple as the Pages deployment was, it was disappointing that they require fully transferring a domain over to use the top-level for your Cloudflare pages app. I'm very happy with my current DNS provider, Netim, but in the end, the transfer is for the best, as Cloudflare has the fastest DNS lookup times, a robust CDN network, and unbeatable security measures -- many of which are included for free. But after migrating my Zone records and moving re-setting up my email addresses, everything was working perfectly.

Additionally, when going through the same process for HeroBoundGame.com, Cloudflare having built-in storage solution (R2) that uses the AWS S3 API, made handling my large media assets super simple. It was much faster than setting up an environment to use Google or AWS, and already comes with Cloudflare's proxies which makes distributing content a lot faster. You could say I'm pretty happy with Cloudflare's services.

• • •

Anyway, that about covers the process. I tried to err on the side of brevity for most of the details, so I may have unintentionally skipped a few important details. If that's the case, feel free to reach out, and I'll be happy to update the post with more information or address your questions in future posts. A comment section will be implemented in the near future, but in the meantime, feel free to use the contact details provided here or join the HeroBound discussion, which is pretty much a ghost town in these early stages. Hopefully that changes soon!

Until next time,

zimmed