Building a Static Site (with Hugo)

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 Go lang, a newer language originally developed at Google. The beauty of Hugo has been that I’ve not had to become a master of Go lang 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.

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.

90 Days of Motion Graphics (Project 5)

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. ;)

90 Days of Motion Graphics (Project 4)

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.

90 Days of Motion Graphics (Project 3)

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.

90 Days of Motion Graphics (Project 2)

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.