Drew Lustro  ·  bootleg hypertext

Custom For Life

Fort Davis

Welcome to the entirely new drewlustro.com. I've written a new, lightweight architecture from scratch with the help of Vue.

Why Build a Custom Personal Site in 2016?

In the modern web landscape, few individuals choose to write code that manages the plumbing of their personal site. Third-party content platforms like Medium, Squarespace, Ghost, or Wordpress are robust enough for most people's needs. After all, if given the option to solely focus on content, why would one choose the headache of a custom site?

It's worth noting, my needs are different than the average joe. I cannot help but want full-stack control. Plus, your own site really isn't only a side project. There are plenty of remarkable benefits:

  • Ownership. Hosted service (and syndication) mean people do not retain full ownership of their content anymore, which is a damn shame. I accept the labor to ensure my site performant and well-formatted. I choose to retain ownership on principal.

  • Efficiency. Beyond the Vue API manual, I notice I need to refer to documentation less. The project structure, libraries, build system, transitions, and capabilities are all my own. I feel more flexible to experiment.

  • Expression. In the past two years, I've worked with a few emerging web standards–namely WebGL. Gametime is a WebGL visualization framework I put months of time into, and I cannot bear the idea of it being presented improperly. A custom site allows me to integrate it modularly into any endpoint. I feel challenged and inspired with a more durable canvas.

  • Learning. This site is evolving software design endeavor. Each feature addition requires careful thought. How will I best implement X? I have already leveled up my node + webpack foo significantly and hope to write about it.

  • Performance. With an SPA implementation, endpoints load lightning fast and transition elegantly.

Growing Out of Ghost

Ghost is an open source blogging platform and visually clean CMS written for Node. A few years ago I wanted to simplify my personal blog, which had been running on a custom, full-blown CMS written in Python. I was learning Node around the same time Ghost was gaining traction, so I decided to get with the times and feed the hype. What I desired was simple: a no-fuss markdown blog CMS with customizable theme, well-formed OpenGraph support, and a quality admin panel. Ghost had all these features in 2013, so I jumped right in.

tl;dr: Fast-forward three years of use, and I have my reasons to scrap Ghost.

Headaches

  • Delicate Updates / Ecosystem Issues. Full disclosure: this could have been my fault every time, but the issues resurfaced repeatedly. Perhaps I jumped too many version points between updates, but each time I would push Ghost to the newest version for fresh features and bugfixes, I would somehow break the build environment and deal with an afternoon of stack traces. This isn't entirely the Ghost team's fault. The node ecosystem saw a lot of versioning madness back then, and a lot of tools broke.

  • Toolchain Hell. I found myself in grunt "config hell" often, which was difficult to debug as I had mentally moved past to gulp and webpack. Constantly dealing with grunt stack traces made Ghost seem like a black box. Nuke node_modules? nothing. Sometimes I would feel close to a working build environment, but then realize a mild dive into Ember would be necessary to diagnose. In frustration, I would export my posts in JSON, delete the dev directory, and start over.

  • Brittle. I wanted to decorate select pages with instances of WebGL. Ghost is generally extensible with themes and plug-ins. The latter was not available for the first two years of platform use, and it would not have been an appropriate outlet for my WebGL work.

  • SSR Only. Ghost endpoints are served by express, and thus are server-side rendered. This makes each page load feel expensive to serve. Navigation between pages lack transition hooks and will never feel as premium and "instantaneous" as async front-end routing.

  • Slow Theme Iteration. My custom theme subdirectory within the Ghost install had its own gulp build system, which had to be run independently of my local processes running Ghost itself. This means no hot reloading (a hallmark feature of webpack) and longer design iteration cycles.

I want to double-underline that I would still recommend Ghost to a friend if they want a modern blog CMS. The platform has seen incredible improvement over the years, and I congratulate the team for reaching v1.0 recently. Simply put, my needs evolved and Vue addressed those needs with gusto.

Enter Vue

Vue is a curious framework. Upon first glance, Vue resembles React with a few key differences. Simplicity and speed are major virtues. The multi-syntax, single file components are easy for the brain to digest. Automatic, scoped styles prevent CSS collisions between components and help ensure maintainability. The documentation is shockingly good. Take a look at Evan You, the framework's author, and it makes sense that a framework written by a designer/engineer hybrid would have these conveniences.

Vue satisfied all my complaints with Ghost. It is central to powering this site, our studio site, and honestly any site I code in the future provided that someone doesn't force me to use React. My first milestone was to reach 1:1 client-facing feature parity with Ghost, and I believe I've achieved that today.

Engine Features

  • Vue 1.x under the hood
  • Client-side, asynchronous routing
  • Smooth transitions throughout
  • Markdown
  • Code syntax highlighting
  • OpenGraph, per-post
  • SEO optimization w/ prerender-spa-plugin
  • Comments

The modest feature set is intentional. I want to write code and write about code often again. It is satisfying to reflect on and articulate sprints as they are pushed live. There are plenty of topics I want to write about as this engine evolves.

Future Writing

  • Vue 2.x framework upgrade experience
  • Webpack 2.x impressions
  • Performance profiling through upgrades
  • ES6
  • Career project anthology (Makeshift Online, Epic Pet Wars, Lookmark, Maxrelax)
  • WebGL module (Gametime)

Needlesss to say, I am quite happy with Vue. The framework fits the type of software engineer I am. Its design is elegant, well-considered, and I look forward to writing more about it.

Here's to another 10 years of delicious, inefficient, "full stack" engineering.