s
Static site generators are soooo hot right now.But let’s face it. They’re a pain in the ass. It’s a fact. Anyone who’s ever switched to a static site generator for the purposes of blogging has fallen off the face of the earth. It’s been documented here, here, and here.

Why? because Fact Of The Day: SSG’s are a pain in the ass.

And why is that?
When people switch to SSGs, they tend to screw around with their site instead of focusing on writing:

“for several months I’ve been experimenting with static generators, I’ve hardly written half a post. It was a common problem, as I googled it. People dug so deep into the endless customization and switching that eventually they’ve stopped writing.” - Vsevolod Glumov

For me however, the point of my site is to have something to screw around with, and I write like once a month anyway.

What does bother me though, is the fact that I have to start a web-server to write a blog post. On the outset this might not seem like a big deal, “It’s just one terminal command” you say. Yes, but given the fact that my dev environment is in an Ubuntu VM, it means I have to start the VM, ssh into the VM, cd into the folder, then start the web-server, open up SublimeText and start writing, then open a browser, go to the page I’m writing, and heaven forbid LiveReload isn’t working for some reason, then it’s save refresh save refresh every time I make a change. Even if LiveReload is working, it’s still save reload, save reload, save reload,… so yeah, having to start a web-server to write a blog-post is kind of a big deal.

I also hear you saying, *”but Jan, you don’t have to start a server to write a blog post, it’s just a markdown file”*. But I think visually, and being able to see what my post looks like as I write is critical for me.

Ghost seems to agree with this idea. They’ve made this dual-pane markdown/preview WYSIWYG writing experience a core part of their product.


(markdown on the left, post preview on the right)

Ghost however, is just a blogging platform, and being that my blog is not the main focus of my site, Ghost is not the solution for me.

Drumroll… enter nvALT#

![](4.png link: http://brettterpstra.com/projects/nvalt/ class:left) With nvALT, I’ve discovered an amazing way to write that works with my SSG (I’m using Middleman, btw). Middleman, like Jekyll or Octopress and even Ghost, uses markdown for blog posts.

There are many markdown editors for the mac, and most let you customize the CSS. But I wanted more. I wanted the full WYSIWYG experience, like Ghost.

This is where nvALT really delivers. nvALT let’s you customize the entire HTML/CSS/JS preview of your markdown files, so you see what your posts look like, as your writing them. You don’t even have to press save, nvALT saves as you type.

And for the icing on the cake, the preview window is responsive.

nvALT preview window: mobile size

nvALT preview window: desktop size.

( … I just put a picture of my blog post in my blog post… that just got kinda meta )

The default template files, template.html and custom.css, have recently been excluded from nvALT, but it’s enough to copy them from the github repo, stick them in ~/Library/Application Support/nvALT/ and you’re off to the races.

The Current Workflow#

as it stands:

  1. Create the post in nvALT using markdown.
  2. Export the file to the Middleman blog directory, ending it it ‘html.md’ for markdown.
  3. Use the Middleman Github Pages gem to one-step-commit-and-publish the site to github pages.

I don’t even have to start the web-server because I’m using the same CSS and HTML in the preview as I am on my live site, so I’m 100% sure posts will look the same in production as they do in the preview. Heck, I can even symlink the production CSS file from my site directory to the nvALT template directory so that nvALT always has the most current CSS file as my site.