Building Atmanaut: How to Ghostwrite the Web

Delightfully often, when I’ve combed the web for help designing, developing, and publishing sites, apps, I land on someone’s “How I Made This” post on their custom blog. That, or on StackOverflow, or on a Github issue, or increasingly these days on DEV. So this one goes out to all those paid it forward and lent me a hand.

It still feels like nothing short of a miracle to publish a new site. After so many tees dotted (with coffee stains) and eyes crossed through those long nights at the terminal, it’s hard to describe the feeling when It Just Works™.

In the present case, thanks to a hoard of wunderkinder that open sourced their brilliance, the design, development, and deployment experience on this new site are as good as it gets. It Just Works™ in such a Teflon-coated Slip ‘n’ Slide sorta way that I’m elated to pop the hood for you.

The ShipIt! squirrel gets it.

The squirrel gets it when we ships it.

TL;DR: The Stack

Hugo comes with all kinds of built-in goodies. Like syntax highlighting, powered by chromastyles and pygments.

!function (name, definition) {

  if (typeof module != 'undefined') module.exports = definition()
  else if (typeof define == 'function' && typeof define.amd == 'object') define(definition)
  else this[name] = definition()

}('domready', function () {

  var fns = [], listener
    , doc = typeof document === 'object' && document
    , hack = doc && doc.documentElement.doScroll
    , domContentLoaded = 'DOMContentLoaded'
    , loaded = doc && (hack ? /^loaded|^c/ : /^loaded|^i|^c/).test(doc.readyState)


  if (!loaded && doc)
    doc.addEventListener(domContentLoaded, listener = function () {
      doc.removeEventListener(domContentLoaded, listener)
      loaded = 1
      while (listener = fns.shift()) listener()
    })

  return function (fn) {
    loaded ? setTimeout(fn, 0) : fns.push(fn)
  }

});

The moosen haven cometh.

 _________________________________
/ wolf, n.:                       \
|                                 |
\ A man who knows all the ankles. /
 ---------------------------------
 \
  \   \_\_    _/_/
   \      \__/
          (oo)\_______
          (__)\       )\/\
               ||----w |
               ||     ||

If you pipe fortune into cowsay into lolcat and randomize the cows, you get a pretty amazing command line soothsayer I like to call Kamadhenu. Next version will be AI-powered.

Here are a few magic spells that make teh codez look nice

highlight {
  margin: 1em -2em;
  p, span, ul, ol, dl {
    font-family: var(--font-code);
  }
  pre {
    padding: 1rem;
  font-size: 0.8125em;
  }
}

pre, code, samp {
  overflow-wrap: break-word;
  white-space: pre-wrap;
}

Hugo also has a great set of pipes.