Blog Entries

Wow, it's been about five years since I first made the switch to static sites and made the switch to having all of mine built with Hugo. The upsides were so good, the lack of need to keep on top of them updates wise for them to continue to live (worry free) on the internet that once I wasn't regularly writing new articles to them I was able to forget about them until the next time I needed to make changes. With significant shifts in my career since that time I'd spent much less time updating the sites, just keeping in mind a long-term idea to maybe add some nice front-end functionality via Vue.js—mostly an excuse to keep my skills sharp.

Fast forward to last year and I had found a nice Vue framework, Gridsome that I had begun to use for a more complex internal project and was gradually tinkering with it. Around that time it finally reached the point where I needed to make some changes to the live Hugo sites, and as part of that process also update Hugo to the latest version. Unfortunately the updates had made some changes to template language and other areas that were silently failing in the build, and after a few days of frustration there I decided that I may as well try Gridsome with at least one and see how it goes. I was particularly drawn to the GraphQL based queries that it used to make the Vue templates work, which I thought would make creating a nice, non-Google based, site search work beautifully. Plus, keeping my learning-orientation going I saw that Gridsome gave you more control over the site, because in creating Vue templates you also had the ability to write the front-end logic and share data between components as you would with any front-end application, and of course I would be working in Javascript (and Vue) instead of just a template-only use of Go.

The downside? It taking more work. I still strongly recommend Hugo as it works well without significant setup, and is probably still able to build large sites faster. Hugo just had a lot of developer effort, even in the early stages, for creating internal tools like pagination, various media embeds (Youtube, Instagram, etc.), and metadata handling that you didn't need to do as much work up front, sure, if you were like me it still required writing the HTML templates, configure the toolchain for postCSS to handle styling, and then write the necessary CSS code, but beyond that you put markdown files in directories with some basic metadata and it generally just worked. Which isn't to say Gridsome doesn't mind you, it does just require initial configuration, unless you pick a starter project you like and just use that without modification, in which case it also just works.

In my case I started from scratch. Getting a basic blog setup with a list of posts and individual entries to view is simple on its own. The combination of being able to use GraphQL to handle the specific queries, and much of the metadata, and still use markdown files as the source means structurally it's similar: make a markdown folder for the specific content type, add things there, and have a corresponding template for it to work with. I do really really like Vue's use of single-file components however, I love having the template's layout, scripts, style, and in this specific case GraphQL query visible in one place as it's wonderful for understanding what each component is doing at a glance.

The upside of more configuration required up front is overall more flexibilty, especially as there is already a solid Gridsome plugin ecosystem, which itself can rely on the larger library of Vue plugins for additional functionality. Plus in having to handle the configuration plus writing the code for template logic and behavior I'm more aware of and in control of what the site can do. The practical example here is the per article navigation. There is already a built in paginator component for handling the list, which I'm using, but for individual pages there wasn't a built-in way to do it. To make it work I wrote (with liberal borrowing of another site's working implementation) a few computed functions that used the GraphQL query to determine the next and previous blog post paths. That same method could be used to create more situation specific setups like post series links, related content based on tags, or for more commercially oriented sites having calls-to-action for specific products. For a server-side app this wouldn't be that special, but keep in mind this is a 100% static site, which has the ability to display dynamic data (see the search comment above).

Okay, I'll leave it there for now, I don't want to write-up anything exceptionally technical about it for the moment. I have two of my three main sites done to a basic level with this build now, and made a starter project from it which sped the second design up significantly. The third will likely take a similar amount of time, though I'll get to test a non-blog style page layout for handling a content portfolio which I haven't done for either of these (here or seanedevane.com).

And most importantly, now that these are done and I don't feel that I need to fix fundamental build issues with old sites I have the one big roadblock to writing and publishing new posts out of the way, not to mention other major projects I've been thinking about. This has been a very important first step.

Cleaning up some hacked Wordpress sites recently reminded me of why I had shifted my own sites away from it and onto simpler tools which create static sites—in other words, just pure HTML/CSS/JS loaded directly in the browser, no server side processing required.

The original impetus for my own move was to remove the headaches and hassles around securing and maintaining Wordpress sites; note though that you could substitute Wordpress here for any other popular framework, particularly a CMS (Content Management System), Wordpress just happens to be a big target due to it's popularity. It isn't that Wordpress is bad, full-stop, but instead that I wasn't using any of the features that would have made the costs of maintaining it worthwhile.

[Sidebar: Amusingly none of the features that I would find useful enough to choose Wordpress were what Wordpress was originally built for, namely blogging. It's evolved far away from it's original purpose as a blogging tool; one of the reasons why this blog began on Ghost.]

How will someone use your site?

Will they be reading articles, watching videos, listening to podcasts, or more broadly consuming what you create? Or will they (also) be interacting with either your content or each other?

Only the latter justifies a dynamic site, because it requires a form of user authentication and user accounts to make it work.

[There's a third case here, around eCommerce, but that's far more dependent upon the project's size and type of products being sold. There are solid 3rd party services that can handle transactions without needing to manage a store directly on your site.]

Well, that took longer to complete than expected (as always). After experimenting with Docpad for a while I stumbled onto a number of other static site generators, finally selecting Hugo. Hugo's speed—it regenerates the whole site (all 140 pages) within ~1.5 seconds—combined with the flexible structure convinced me to give it a go.

Hugo's speediness is undoubtedly due in part to Go, as in Golang, a newer language originally developed at Google. The beauty of Hugo has been that I've not had to become a master of Golang to understand it. Hugo's templating resembles AngularJS or Handlebars in its love of double curly braces {{ .Title }} and similar setups. Fairly intuitive, although I'm definitely still learning.

For screenshots of the site, head over here or the live site here. Update: all sites I maintain, including this one are currently using Hugo + Netlify.

Design Details

The switch from Wordpress to Hugo is a forward-looking attempt to minimize the amount of maintenance I have to do on the site, and to enable faster changes. While finishing the site took several months—working typically at most an hour a day on it—the process of iterating on the design and testing features was super quick.

Almost all of the testing took place locally, on my computer, and with Hugo's speedy page regeneration I was able to make changes very quickly, without having to debug strange bits of PHP or Javascript code in the process.

Otherwise I went straight from a super simple hand-drawn mockup of the site structure to building out a prototype HTML version within Hugo.

For a while I had the silly idea of coding all the CSS by hand, but that created resistance and getting started on that part of the project was delayed weeks because of it...then I used Skeleton as a base and everything went a billion times faster.

The bulk of designing was getting the initial layout working within the CSS, done through Stylus, and then tweaking it as needed. All done mobile-first, of course.

The one major pivot was with the grid system. Originally I used Skeleton's built-in grids, but I wasn't happy with the way it was working across the entire site, so I switched back to using Jeet, which integrates nicely with Stylus.

Deploying

What I'm particularly enjoying now is how I can push new posts and changes to the site. I still do all my writing and code locally, testing it without even necessarily needing an internet connection. Once I've finalized the new changes all I have to do is use Git to push the newest changes to the server, and a script will automatically run Hugo to regenerate the folder. Fantastic.

Future Plans

The one major downside to a static site is the lack of a search function. Right now using a Google custom search is a good work around...but Hugo now supports data files (JSON specifically), which should in theory allow for an intuitive site search that still doesn't require a database. We'll see soon(ish) enough.

All in all, while there's certainly a learning curve, I highly recommend Hugo for building a CMS-free site. While I'm enjoying Ghost for this blog, there's a distinct possibility of transitioning this to Hugo as well in the future. Futzing with logins and updates just gets in the way of writing when you're doing this solo.

Update

Yup, decided to transition this site onto Hugo as well, with a new design! In some ways less fancy than the original theme (no jQuery animation tricks added as of yet) but I like it. There's plenty of work to be done around making pagination prettier, adding some CSS animations, and gradual tweaks to typography and styling, but it's a good start.

Larger update (2019 edition)

Much has changed in terms of the plumbing of this site and my others. While all of them are still built using Hugo, since writing this I've transitioned all of my hosting to Netlify, and as part of that transition changed the build process to be based on their Victor Hugo boilerplate. As part of that transition the two major changes have been to my CSS pre-processor, from Stylus to PostCSS (I love the modularity, though sometimes getting specific plugins to function can be finnicky) and my task runner and builder from Gulp to Webpack. Overall I'm happy with the new setup, as now I can simply push changes to my git repo staged, in this case, on Bitbucket and Netlify automatically rebuilds the site each time it detects a change, plus gives me logs of errors if anything in the build process fails. So far so good, with the only significant challenge I'm finding with this method is cleanly updating the Victor Hugo boilerplate files (package.json and sometimes the webpack config) without losing my own changes to the tooling. Doesn't happen often but it does add a few hours of tinkering when it does cause issues, but that's the life of anything that relies on Node packages for functionality.

I won't usually put in video editing stuff, as it tends to be straightforward. However today was a bit of playing around with fonts for the intro along with some subtle music syncing to a short clip.

...or is it? I've been busier with After Effects now that I've officially begun helping with the VFX side of the film I referenced in the last post. For that I've signed an NDA so the actual projects and experiments I'm working on right now for it I'm not sharing here.

What I can share are some of tutorials I'm working through to learn my way around certain effects which I've been modifying to suit the desired style—currently working on titles.

With that, here's project 5, following on Video Co-pilot disintegration tutorial.

Project 5

Time to complete: ~2 hours

(Note: in this case the above demo is for a simplified version of the final tutorial effect. There were a bunch of further steps to add particles, smoke, and green screen compositing that I didn't wrap up).

The escalating complexity of a project like this is amazing. The final composition for the video there had approximately 12 layers, with many of those containing pre-compositions with even more layers inside them. For the effect I'm actually creating for titles right now there are around 20 layers at least, and that's without creating a title fade effect yet, which will likely double that.

I'm gaining massive respect for professional visual effects artists through all of this, and I've barely scratched the surface of what's possible with After Effects...let alone programs like Cinema 4D or Nuke.

In a couple months I'll be able to show the real results of the team's collective efforts on the film. ;)

This project drifts away from motion graphics towards visual effects. I've been participating and helping with an indie film over the past several months, including editing. We're working our way through that but there's also a huge amount of VFX work to be done with it being a sci-fi film.

So this project of learning motion graphics and After Effects coincides nicely with that, and presents a fantastic challenge to apply the skills to something more real.

With that, I worked on creating a shockwave effect, based on this tutorial. I doubt I'll use it specifically for the movie, but the techniques have potential applications for sci-fi effects.

Project 4

Time to Complete: 2:30 hours over two days.

 

After Effects, from a learning perspective, is an odd tool/skillset. In many other programs learning the fundamentals of the interface and how to create an efficient workflow is often much of the actual challenge. All the extra tools, effects, filters, and such are just bonuses to be learned over time.

But with After Effects it seems that a critical piece of being good at it is understanding the bevy of effects you have to work with, how to manipulate them to achieve a desired effect, and how to combine effects together to create compositions with greatly magnified complexity.

This project is a perfect example. The entire thing is built around one effect, Fractal Noise (anyone who's used Photoshop a bit would recognize them as Render Clouds). Animating the fractal and then applying a Polar Coordinates effect to transform a linear effect into a radial one...

...and then continuing to stack on effects, duplicate versions of the shockwave; layering on more and more complexity with each pass.

There's a unexpectedly large room for creativity here even in the subtle modifications on what are basically generative algorithms. I'm quite curious to see how I'll be able to push creative boundries within this frame as time goes on.

What an odd week. Ended up away from my computer (unexpected, in a good way, road-trip to D.C.) or otherwise without real time to commit to opening up After Effects and thus am a bit behind on new projects.

But before that happened I ran across an awesome new resource for tutorials, where I found this Polygon animation tutorial: http://youtu.be/uuaBg1agd70

It looks slick, but is far less complicated to create than what the end product would suggest.

Project 3

Time to Complete: ~2 hours.

Decided to do this whole tutorial in one-go and make my own customizations to it on the fly. The end result is this:

  Not too bad. I can tell I'll be re-using the principles and effects used for this animation—and potentially doing more of these with similar shapes—for future projects.

Things to learn & improve:

  • Adding sound effects.
  • Better use of time remapping. Even after a few tweaks the slow down around ~2s in isn't great.
  • Experimenting with different shapes. The method covered allows for any vector shape to have the effect applied to it.
  • Better use of textures. There is a subtle grain to the background (I used a rice paper texture), which could be improved with a more distinctive texture.

And with less fan fare here's the second project! Like the first it ended up taking three days (sessions as it were) of work.

Unlike the first this was following along with a specific tutorial on creating trailer titles. The original source tutorial examples had a metalic and gunmetal vibe, so I went looking for a short quote that might work.

The Book of Five Rings is always a good source for philosophical quotes on fighting, and thus this one felt perfect.

You can only fight the way you practice.

In spirit of the quote, and of the endeavor, the final product has similar contours to the tutorial's subject matter, but in the details I went my own way. With creative projects you learn far more from following with the technique while exploring new directions with the substance of the work.

The changes in this case were by chance. I didn't like the lens flare effect that was originally called for, and substituted a paper texture for the background. The burn-in effect was a total accident when trying different blending modes which ended up creating nice beginning and ending transitions.

Next project may be a cool lower-thirds animation.

A thirty day challenge is an excellent way to build a new habit (and highly recommended), but to learn a new skillset?

You need more time. While thirty days will lay the foundation, via the habit, of practice, it most often takes longer to get past the novice stage where everything you make or do feels subpar.

As an experiment I'm extending the focused period of practice to ninety days. The first thirty will still serve to build the scaffolding of habit along with a passing fluency with the tools (in this case Adobe After Effects). Beyond that it will shift to creative exploration and application; pushing the basics further and further.

Admittedly the skill I'm interested in, motion graphics, is not one I haven't tried before. I have flirted with the skill a few times but never consistently practiced it, and thus I never got past the awkward first twenty hours of practice and learning.

It took some inspiration in the form of a tutorial to flip my mindset. Before I believed that doing anything cool in After Effects was hundreds of hours in the future, but after watching that I realized it was possible to create amazing effects far sooner. Stunning? Probably not, but good enough to have a sense of forward momentum.

Habit

A challenge like this wouldn't be useful without a daily habit to provide structure. In this case, because even the smallest of projects is quite time consuming, the daily challenge is not to create one thing per day, but instead to spend at least 30 minutes a day working on a project.

On top of that my sub-task is to make use of at least one new technique on each project. Mine are sourced from the course I'm following along with (from the same author).

The first project

This one took three days to create.

The phrase is inspired by Seth Godin and his book the Icarus Deception.

Techniques used: fly-bys, 3D text layers, and track mattes.

A bit less dynamic than I'd prefer. On the short-list of techniques to work on are working with cameras and creating more natural motion paths.

What skill do you want to learn?

For just about anything, especially technical skills, there's a resource out there on the internet to get you on the path. Access to instruction is rarely an obstacle now.

A few resources I've used and recommend for learning new skills are:

  • Skillshare - Exceptional for design skills in particular.
  • Treehouses - The best site I've run across to learn development and web design. I spent ~60 hours on their Front-End Development track and learned much from it, even from materials that were mostly review for me.
  • Tutsplus - They cover the broadest range of skills of these first three and have more courses on specific subjects, particularly within design and most importantly for me with audio/video.
  • Fizzle - Business training on the whole. The video production is top notch (one of my inspirations for learning about motion graphics, actually).
  • Coursera - University courses, so it can be trickier to find the exact topic you're looking for, but great when you find them.

Along with those MIT OpenCourseWare and Lynda are loaded with options, although I have yet to explore them myself.

Squee!

Ahem...I've been on the fence about trying Ghost out for at least a month. Then I ran across an excellent tutorial on Tutsplus on how to build a Ghost theme from scratch. Highly recommended to learn the whole process.

I already had node.js installed to learn how to use Stylus as my CSS pre-processor so I spun up a local instance of Ghost and got to work.

I've been spending the past couple of weeks ripping apart the Inspyr theme for Wordpress and running into many little roadblocks when customizing the PHP, frustrating.

My experience so far with Ghost and Handlebars to handle templating has been near sublime in comparison. Setting up new page templates and understanding how partials work was so much quicker than wrapping my head around how hooks work in practice.

LESS to Stylus

The tutorial series linked above was excellent, with only one downside: the entire CSS workflow was built on using LESS...but I was going to use Stylus for it's python-esque elegance, especially after discovering the awesomeness of Jeet for managing a grid system.

Translating LESS syntax, especially around the math, ended up being an excellent way to learn the correct Stylus syntax, so a win-win there, even with a bit more time spent.

But finishing a single tutorial, however long, isn't a sign of actually learning how to theme Ghost. Next step? Theme this blog.

Oh, and then theme another existing blog which I'll be porting onto Ghost on a Digital Ocean droplet, because I hear that service is awesome.

Other challenges to try out:

  • Mirror this Ghost development workflow to a Windows environment.
  • Learn more about node.js, ember.js, and Javascript in general in order to extend Ghost's functionality, or at least lend a helping hand.
  • Might be a ways down the road, but now that I've migrated this site onto Ghost properly I'll be trying my hand at a more specific theme. I like this one, but nothing like building your own sometimes.

I've got my hands on an awesome plugin, UberGrid (aff link) for making resizable grids and for a simple way to handle the massive number of videos I have on Play Everywhere. And thus I realized I needed some thumbnail style images for all the videos, because the auto-generated ones from Youtube were crap.

So time to experiment with minimal typography and use of color for these. The thumbnails I see on youtube sometimes with the super heavy thick strokes or other effects feel a bit tacky to me, so I'm trying something a bit simpler. For a bit of contrast at distance I've added a sign-painter style drop-shadow, but that may not stay in the final versions. Otherwise setting type in styles that fit the name and direction of travel.

2hvaultThumb

lazyvaultThumb360ubThumb speedvaultThumb stepvaultThumb turnvaultThumb

The way these images line up without any adjustments to code is also a perfect example of why grid based plug-ins (or custom CSS like purecss) are great for creating beautiful, symmetrical, layouts.