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.


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.


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:

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.

90 Days to Learn Motion Graphics

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.


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.

Movement Modes: Graphic

Felt a bit of designerly inspiration today (AKA had something in mind to make).

After a few thumbnail sketches not much interesting was coming out, then I remembered an idea from The Creative Habit where Tharp discussed the idea of “finding the spine” of your work. Since I was looking at a movement idea, I decided to take that a bit more literally.

Movement Modes

Movement Modes

I did a quick pen trace of a picture of a spine, taken from one of my anatomy books, with the type on the path following the line. The rest was just a bit of fun with color and different typefaces to convey the different ideas, without going too overboard with novelty options.

DIY Web: Building with Docpad

Ghost has consistently impressed me so far, and I really like how it works for this little blog in particular. But it’s not the best choice for every web project, because it’s “just a blogging platform.” Still, as I wrote about earlier most sites, including all of mine (currently), do just what I said there: serve content.

And content doesn’t change unless you tell it to (we hope!)—so why put it all into a heavy database and use a dynamic language like PHP to render the page every time a visitor requests it…when the content hasn’t changed since they last visited it?

Of course the clever way around that problem is caching: saving a copy of the web page and serve that up to the user instead of regenerating it each time by pulling the request, querying the database, and finally displaying the resulting page. On Wordpress you could pull this off with a tool like Varnish or some plugins (they work, though not as effectively).

Enter Ghost

Now Ghost is smart, and understands the above problem. Ghost is designed to cache all pages and serve those up, rather than generating the content from its (rather small and lightweight) database. In that way it’s a great bridge between the heavy, database-driven, website/application and the lightest of them all: a static site, pure HTML, CSS, and Javascript.

In the process of researching Ghost I ran into the idea of static site generators; then I found Docpad. I was drawn to it because it was built on Node.js, like Ghost, and supported the templating languages I was interested in (Handlebars.js and Markdown*) plus it was powerful enough to power sites that were a bit more complicated than just a blog.

*Writing in Ghost is handled by Markdown, which brought my attention to its awesomeness.

Learning Docpad

The site itself has some great documentation for getting started, and I’ve been poking around the internals now for a little over a week. As someone who’s not super Javascript-savvy it’s been a learning experience already, but not impossibly confusing. The only major obstacle I’ve hit is that I’m not clear on how to use Handlebars as the templating language.

But the default, eco, works just fine and I have a proof of concept blog post page created in it.

So far I’m loving the sheer amount of control one has over the site. Since everything is handled by code you write, then everything can be changed to suit your needs. No butting of heads with existing code, whether in the core or part of a theme. Plus it’s stunningly fast and can support generating dynamic content, if I ever need that in the future.

For one of my site’s this looks like the ideal tool for now, and I’ll be providing updates as I progress with the site design. Right now it’s just a bunch of low-fi wireframes.

IA: The Creative Habit (Book Design)

IA: Inspiration / Analysis. An experiment in examining the craft of art and ideas that inspire. Plus sharing beautiful things, of course!

I picked up the The Creative Habit at the library earlier and have to say I love it; both for it’s content and design.

First up, it’s well worth a read for anyone interested in creativity, as it addresses the oft ignored or understated part of sustained creativity: habit. The book isn’t so much about creativity itself, as it is about the habit-based scaffolding put up around a creative act, which enables one to step into it more readily. Every day.

I’ve only just completed my first reading, and need to go back through to note down particularly relevant passages, as well as doing more of the exercises Tharp suggests. There are several I already suspect will become a regular part of my creative repertoire.


The book itself is also a beautiful creation; it is the most elegant book design I’ve run into in the past several years. A couple of elements standout:

The typeface is a Modern (probably Bodoni?) for most of the book and it does a great job of aiding the voice of the text. Modern’s seem exceedingly rare in books, especially for body text, but this works perfectly here. On top of that, this particular typeface either doesn’t have a bold, or it’d be too gaudy here, so the designer makes great use of larger font sizes and color to highlight text.

Creative Habit - Paragraphs

Chapter openings also highlight this styling well: Creative Habit - Chapter Openings


Most books don’t do anything interesting with lists or bullets, it’s all pretty traditional. Not so much here, the design resembles a magazine in many ways, with multi-column layouts for text in places, like this list:

Creative Habit - list stylings and such

Sectional Styling

Same goes for sections that break flow from the main narrative of the book. Each chapter has an exercise section which is nicely differentiated from the main text with a grey background.

Exercise sub-section styling


Last but certainly not least, each chapter intro is kept minimal, but makes clever use of the type’s positioning, size, and shading to make each one chapter have a unique feel.

Chapter Intro Styling

I almost never buy physical books anymore, as I can’t travel with many, but I’m seriously considering picking up a copy of The Creative Habit to refer back to—it’s beautiful and full of useful tools to keep one on the creative path.

Integration or Third-party?

With Ghost’s strong emphasis on keeping the core as simple as possible, I’m asking myself the same question when it comes to all the plug-ins, services, and other utilities that one adds on to a website, particularly a Wordpress site. What does my website itself actually need to do?

In most cases the answer is (for me): serve content, or in other words work as a publishing platform. Whether one calls such a site a blog or a website isn’t terribly important.

But when blogging and business combine things get real complicated, real quick. In a Wordpress site you’d quickly add-in plug-ins and more feature-rich themes with support for e-commerce, fancy newsletter integrations, membership portals, backups, SEO, and other services. The lightweight blogging platform one started with is now a complex CMS with an increasingly confusing looking admin interface (some of the sites I’ve worked with…so many new sub-panels in WP Admin) and noticeably slower performance.

For some, particularly larger organizations, that may be worth it—they have the time and manpower to manage and optimize the site. Wonderful! For smaller teams and solo creators though, I wonder if it’s all a bit overkill?


There are quite a few exceptional third-party service providers for just about any business or web related function. Need to sell individual items on your site? Gumroad is awesome, they even handle the downloads for digital items and support PWYW-style products. Need a full-featured e-commerce shop? Shopify is a potential solution. Combine services like those, with an app that enables connecting services, like Zapier (I’ve yet to try it, but it looks promising) enables one to weave together many services and automate them, all without adding further processing and management to your own website/blog (small Javascript and CSS additions aside).


  • Forums: Tons, IPB for the premium end. SMF is great and free, I’ve used it for years.
  • Invoicing: Freshbooks, Nutcache
  • Forms: Wufoo (currently I’m using Gravity Forms, since I’m still on Wordpress, but they’re on par).
  • Landing Pages: Leadpages is a good option.

Of the services and plug-ins that I can think of otherwise, the bulk of the ones that are specifically useful on Wordpress are those that enable easier (and more beautiful) content creation and management. Plug-ins like UberGrid are useful because they streamline and (optionally) automate a process that would otherwise require a degree of technical skill to create. Useful, but not unique to Wordpress or any CMS. Once Ghost matures further I expect similar apps will be created (or modified) to do all the fancy Javascript for it as well.

With the rest, it’s a choice between control and trust (of others). As someone who geeks out about new tech and tools it’s cool to have such direct control over everything to do with my site…but that’s beginning to waste time better spent elsewhere, not to mention sacrificing page speed and performance (yet another exciting reason for Ghost).

On the other side one has to sacrifice some of the ideals of keeping visitors on site, at all times, when using separate services. Plus these same services also tend to cost a bit more (often monthly), but I suspect the time saved in not managing everything can quickly eclipse the difference in costs.

As a solo creator I’m beginning to think making the switch towards external services is worth the cost. Less time managing and more time making, I’m all for that.