Channel
I recently began to realize my dream of taking my TTRPG (TableTop Roleplaying Games) from merely at the table, as rewarding as that is, and bringing it to a wider community. My full hopes and dreams are expansive and it all starts here: YouTube!
Gaiety has expanded her persona into the brand called FaeTale; meaning Fae as in Feywild), and reminiscent of Femme Fatale, and to tell a Tale. Through this medium I'll tell tales, give players and GMs (Game Masters/Mommas/Etc) tips, review D&D (Dungeons and Dragons) content and discuss homebrew - user created non-canonical content. I hope for this to be a positive place with upbeat excited tones celebrating the game I love.
Who knows, perhaps this channel will slowly grow into streams, guest spotlights, articles, collaborations and more. For now, I'll be uploading weekly content plus perhaps some shorts as I'm inspired to do so. We're already six weeks in so watch the six videos already published on the channel!
Site
I got faetale.com pretty early so as to secure an email address for the YouTube channel. This really took away any excuses to build a site, like thinking it's too early or somehow not worth it. In fact, it was worth it just to play with some new (to me) tech.
Static, SPA, or Serverside?
I knew I'd be working with the YouTube Data API which meant static site generation, like this blog does, was likely off the table. At least that is, not without setting up some web hooks, but knowing I'd also want a Twitter Integration meant I should consider different technology, something that could be more dynamic.
So if not static site generation, my other two options are to build an SPA (Single Page Application, letting clientside Javascript handle everything) or use some serverside rendering technology. I wanted to learn something new and I have very little experience with serverside rendering so I chose that path.
Phoenix (Framework) is a skill I'd been really wanting to learn, but after scaffolding a project I realized I was fighting against the grain to achieve the simple site I wanted. Phoenix wants to help with databases, MVC (model view controller) layers, and has several ways to write templates with many of their own opinions. I feel like I'll come back to this in another more complicated project, but not today.
Nuxt - Serverside Vue
So I went with something more familiar yet something I hadn't really worked with much. I haven't build anything with [Vue]https://vuejs.org/) since v1.x.x. It's possible to set up Vue to render on the server and send the initial page view down to the client so I leveraged Nuxt which made it incredibly easy to get a proof of concept together. It was pretty straightforward to integrate TailwindCSS with TailwindUI to quickly build out a responsive and accessible site. Even pagination was pretty straightforward to set up, Nuxt and the YouTube Data API do the heavy lifting there.
I've yet to dive into any automation testing, but I think I'd like to when I have time. I'd also like to add in some not-so-scary analytics tracking just so I can learn what's working and what isn't, as well as build our a search feature and a page to watch the videos as embeds rather than redirecting to YouTube. Finally, perhaps monetizing with Coil but I doubt it'd do well compared to something like Ko-Fi haha.
Full Stack for a Change!
I'm a UI Engineer by trade, I love rolling around in the grassy hills of CSS and never thinking about a backend data layer. But because this was rendered serverside that meant that I'd need... well, a server! Most of my projects I just host as a Digital Ocean App (point to repo, specify command to build, point to build folder, you're done) but this would need more.
Since most of the internet is run on Amazon, Microsoft or Google servers I opted to stick with Digital Ocean and make my first Droplet. A Droplet is basically a provisioned server complete with its own IP address that doesn't do much by itself besides run linux and await your command. They had a specialized Droplet that would automatically provision with Node (necessary for Vue/Nuxt) and a Node user that had privileges to configure pm2 (a process manager) that knew how to speak Node essentially to do things like automatically run a node process - like serving up the Nuxt app!
So I made this Droplet, I saved the dummy app it shipped with so I could refer to it later if I got stuck. I then ensured it was easy for me to ssh into this droplet as my own user and as the node user via ssh keys with ssh-copy-id.
I then pointed my faetale.com domain name servers and A records to my Digital Ocean droplet following several guides I found online. Nginx was already configured and listening to the dummy app on an expected port which I made note of to either change or reuse later. It worked! Well, on HTTP without SSL at least... I knew certbot was the solution here but I had such trouble with it in the past. This time around, certbot was incredibly easy to use and it just worked. Suddenly I had faetale.com SSL secured pointing to the dummy app!
Lastly I swapped out the dummy app with a directory that checked out my git repository with the Nuxt app. For now I manually pull changes, install npm modules, and manually run my build scripts. Then as the Node user I tell pm2 to serve the site, I check that the ports are the same as what Nginx is expecting. And now... https://faetale.com/ is alive!
I'm skipping all kinds of steps here but, I'm just proud that I knew what to web search the steps for at each step of the process. Then fumbling my way through each guide to make it all work in the end was incredibly rewarding.
I think I'll stick to UI Engineering, but it sure does feel great to have built a full stack app that's running my latest passion project! It's really rewarding to publish a new YouTube video or Tweet and see the site automatically update with the latest content.
Back