Build in Hugo

2019-06-25 11:11:07 -0600 -0600

Hugo is a static site generator.  The goal is a series of folders (directories) and static files (.html, .css, .js, .json, .txt) that can be directly uploaded to my web hosts ‘public’ folder.  I use Google Firebase to serve my static page, but any web host can handle static content.  But why static?

Static is Cheap & Fast

Static pages are pre-built html, styling, and .js files.  In general, having these files ready to go when someone clicks on a link to your site means faster load times.  Since there’s no active database backend, hosting is as inexpensive as it gets.  I don’t have to deal with SQL or MongoDB backends, vulnerabilities, updates, or scaling.  It’s also cheaper and easier for me to scale static as all I’m doing is copying a few files across CDNs, not trying to run pages in advance with advanced caching strategies (see any speeding up Wordpress article).  Bueno! Cheaper to host (free in my case). Faster load times.  Very low likelihood of hacking (less they breach my host provider or CDN). What’s the drawback?

Static is NOT Easier

Hugo does offer themes, letting you get to content.  There are hundreds that are beautiful, responsive, multilingual, and have tracking scripts pre-installed – woot.  I didn’t want any tracking scripts. A large part of building the site was to get better at front-end work and really see how to implement various javascript libraries.  From scratch, it’s all on me (you).  Every line of HTML, every snipper of .js or .css style has to be carefully copy, pasted, and tested.  Yep.  It’s a lot of work.  For me, this is what I was looking for.  A flexible workflow that lets me publish content, show off a few projects, and build a web experience I know inside and out.  But without the amazing editor of WIX or Wordpress, styling the site is a slow process.  I am having to add versions to Jira and pace myself to snazzy up little pieces here and there, keeping it responsive.  That said, developing in Hugo is a lot more fun than Wordpress or Drupal pre-production.

No Nginx/Apache Developer Environment

Hugo server -D.  Boom. I see my draft site in milliseconds.  Hundreds of pages, images processed, served to local host.  And I didn’t need to spin up a Linux VM.  Don’t get me wrong, I love Linux and don’t mind starting one with Apache, mounting my development folder, getting everything running properly, just so I have a fast editor – only to break half of it when I try to upload it in production…wait. I mind.  Synchronicity of developer/deployment environments is one of the reasons I love static sites.  There aren’t megabytes of PHP and an SQL database to migrate, so when I upload, chances are it’ll look exactly as I expect – baseURL aside (did have a freakout when the site didn’t show up and I realized all my links were to localhost; quick fix in config.toml)

Now I’m Bad at markdown

A workflow that works for me is key.  I have been in and out of GitHub for a few years, but never really understood markdown’s odd combination of HTML and custom tagging.  Luckily, markdown takes most semantic HTML.  So, for posts like these, I have a nifty little image processing shortcode and write in my authoring editor of choice MS Word (DON’T HATE: text editor of choice is probably Atom, while I develop in VS Code and Spyder).  I simply saveas->html and copy everything into an index.md.  If only that was it…use more options, web options, and change encoding to UTF-8.  Yay.  I won’t get into saving themes in MS Word.

So far so good.  I’m liking Hugo.  What about you? What frameworks do you build in?

 

References:

https://gohugo.io/

https://firebase.google.com/docs/hosting

https://gohugo.io/hugo-pipes/minification/

https://themes.gohugo.io/