Building this Blog

3 minute read Published:

Using Hugo and learning Markdown

I’ve recently been curious about static site generators. After working with WordPress for years, the idea of having no database or dynamic content is freeing. No worries of 2AM database transfers or massive, delicate, and dangerous search and replace executions. Just good ol’ HTML, CSS, & a little bit of JS. I’m back in the nineties and I love it.

These two styles of sites remind me of two kinds of travelers out there. WordPress is a guy in his forties who has an assistant carry around his five suitcases and keep his papers in order and Hugo is a backpacker wandering the streets of Venice able to catch the next RyanAir flight to Istanbul if he so chooses.

So let’s dig in a bit shall we?

Background

Hugo is built in Go (and built well) which means it’s blazing fast and structurally reliable. Even if you have hundreds of thousands of posts they will take barely any time to generate. Other highlights include:

  • All the configuration information can be stored in YAML, TOML, or even JSON
  • Open Source
  • A catalog of actually decent themes (free of course)
  • Themes are highly customizable and easy to build from scratch
  • Individual pages can be written in Markdown
  • Excellent documentation

Up and running

  1. Install Hugo
    Windows: There’s an exe. Just install it and add the location if the bin directory to your path
    OSX: brew update && brew install hugo
    Linux: If you have Go installed:
    > export GOPATH=$HOME/go
    > go get -v github.com/spf13/hugo
    Otherwise download and extract the latest release and add it to your bin dir (or path)

  2. Start a blog

    • hugo new site path/to/site
    • cd into your blog directory and you’ll notice you have some scaffolding built for you.
  3. Write some content

    • hugo new about.md
    • All text within the ‘+++’ at the top of the generated page is your metadata (more on this in a later post).
    • Write some killer content.
  4. Themeify

    • Install each theme individually
    • Or install them all:
      git clone --depth 1 --recursive https://github.com/spf13/hugoThemes.git themes
  5. Build and serve

    • hugo server --theme=hyde --buildDrafts
    • You can choose the theme on the fly as seen here or add it to your config file
    • It’s now up and running at localhost:1313
    • Because Hugo has hot reloading whenever you edit content it is rebuilt and pushed to your view

Push to Production

Are you ready for the best part?

hugo

Now just move the generated files in “public” to your server and you’re done. Oh you’re using DigitalOcean and need to configure a server? Then sync your blog directory with your server and run this on your server:

hugo server --baseURL=http://yoursite.org/ \
            --port=80 \
            --appendPort=false \
            --bind=your.ip.goes.here \

Now you’re using hugo’s blazing fast server! It will even autoreload the site as you push changes to production. Or if you don’t want the added JS on your site add --disableLiveReload=true.

comments powered by Disqus