DayKnight 30 Day Project

A long-time supporter of putting your nose to the grindstone and getting things done, Sean Plott, aka Day[9], has started hosting a regular event where his supporters start and complete individual projects in 30 days. Whether its going to the gym twice a week, committing to a daily job search, or building a website - if you make progress towards your goal for 30 days, you've succeeded.

My project? You're looking at it!

This is my first time participating in the DK30. I've spent the last year working my first job as a web developer, letting personal projects fall to the wayside. I took this opportunity to get back into the swing of working on my own stuff. I wanted a personal website for hosting my games and a blog for a long time, and I've recently learned a lot about Nuxt and Storyblok, so I made building this site my first project.

Nuxt? Storyblok? What?

Modern web development has moved towards three major, competing Javascript frameworks: Angular, React, and Vue. These frameworks allow a developer to build the powerful, modular, super-interactive web applications you see on today's internet. This is why a website like Twitter looks and feels different than your highschool myspace page.

Before I got hired at my company, I spent several months learning React. I loved it. I'd played around with Python and Game Maker, but I'd never considered getting into web development until I learned how fun these tools are to work with. I devoured all the React content I could find, built a portfolio page and some mock projects (like a simple Reddit clone), and started looking for work. After a few weeks of searching - I landed a job! Using Vue!

What does this have to do with Nuxt and Storyblok?

Nuxt is a framework built on top of Vue. If you care about being indexed by Google, neat-o Twitter cards, and proper routing, Nuxt is what you are looking for. It turns your Vue app into a Universal application instead of a Single-Page Application, which has all the neat stuff I mentioned. I played around with it a little bit before now, but this is the first serious project I've used it for.

Storyblok is my new hotness. I'm using it right now to write this article. It's a fully modular Content Management System that is built for developers and publishers working together. Developers define a system of "bloks", or modular chunks of content with pre-defined schemas. Publishers build their content with these bloks, and developers fetch that content from their API. The developers can then define how that content is rendered in whatever framework they want. Super powerful, fun to use, and all the features I just talked about are FREE!

Week One: Code

My first week of the DK30 focused on code. I built out the basic bloks I needed to build my site in Storyblok. I learned a lot about how to structure my content from this process, going back and tweaking my components as I went along. There are some great articles on their website - if you are interested in Storyblok or headless CMS patterns I definitely recommend giving them a read.

The Nuxt project came next. Each blok got its own component, and I used those bloks to build all of the pages I want on my site. I used vue-meta, built into Nuxt, to define all of the meta information for my site. I pull this information from Storyblok, so I can just define it from there and you'll see it in the page header.

A big part of this week was making sure my game renders and runs properly on the site. The main purpose of croak.io is to host my games, and getting Phaser and my game assets to work properly with Nuxt required some research and trial/error. However, I was eventually able to find a setup I was happy with, and everything loads/runs great!

Week Two: Vacation

I spent week two in California visiting my mom and sister. I went to Sonoma and drank some wine, tried some fancy whiskeys, and visited the famous Winchester Mystery House. I didn't get a lot done during this week, but I snuck in some formatting fixes before getting back to start week three.

Week Three: Style

Week three sort of became week three and half of week four. My CSS is really rusty - I've been doing a lot of backend Java and Python at work, and I didn't realize how long it had been since I really sat down and styled a whole site. But I got it done! I pulled a neat NES-themed CSS library from Hacker News, built out a minimalist layout for all of my pages, threw some features onto my main page, and spent a lot of my time making sure my game resized properly.

Week Four: Wrap Up

I left some time at the end of the 30 days for writing this article and polishing up any bumps left in my layout. I didn't get a lot of time to polish up those bumps, but that's alright! When I look back at all I accomplished over the last month, I'm super impressed. I didn't just throw this site together - I used super cool, modern technologies I had personally researched and wanted to try for a long time. I learned a ton about Nuxt and Storyblok, and I will use these technologies and others like them for many projects to come.

I can also start building games again, now that they have a place to live! That's the most exciting thing for me, I've really missed gamedev the last 30 days. Come back soon to see new content!

Completed!

Which brings us to here! You're looking at a website with a home page, blog and game list pages, individual blog posts, individual game pages, social media links, responsive css, and metatags, all built with Nuxt and Storyblok. Thanks for getting to the end of my article! If you have any questions about how I built my site, please don't hesitant to contact me from the contact page!