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?
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
Windows: There’s an exe. Just install it and add the location if the bin directory to your path
brew update && brew install hugo
Linux: If you have Go installed:
go get -v github.com/spf13/hugo
Otherwise download and extract the latest release and add it to your bin dir (or path)
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.
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.
- Install each theme individually
- Or install them all:
git clone --depth 1 --recursive https://github.com/spf13/hugoThemes.git themes
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?
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