The appeal of wysiwyg

Hugo is awesome

For a DIY girl like me, Hugo is awesome. Hugo is a static website generator that gives you complete control over its output — right from the command line. What more could a girl wish for?

Even better, you can use your favorite text editor to write new content or tweak your theme. While I love the command line, I do understand the appeal of wysiwyg: it’s nice to be able see what your content will look before publishing it online. But do you really need a full-blown content management system with all the bells and whistles for that? Nope, actually you don’t. Hugo can help you out just as easily!

My workflow

So what does my workflow look like? In a nutshell: I create some new content on my laptop, check out how it renders in my browser locally, and when satisfied, push it to my server — which automaticaly deploys it online.

Preferably, I write in Emacs Org Mode, typing away on my laptop sitting somewhere cozy, with a cup of coffee within reach. On my laptop, I have a local clone of my blog. The main git repository lives online on Gitea on my private server, which also serves my blog to the world.

Note to self: write a post about magically deploying a static website with Hugo, Gitea and webhooks.

Before I start writing, I cd into the root of my local copy of my blog’s repository and fire up the Hugo web server:

cd ~/projects/blog.minded.net
hugo server --buildDrafts --navigateToChanged

The Hugo embedded web server watches your files for changes and renders new content in real time. To see what’s happening, you can point your browser to http://localhost:1313.

The buildDrafts option makes Hugo render draft posts as well. And even better: navigateToChanged redirects your browser instantly to your last edit. Babes, that’s so nifty!

Then I kindly ask Hugo to add some new content and start writing:

hugo new content posts/my-new-post.md
emacs content/posts/my-new-post.md

Every time I save my changes, the Hugo embedded server renders the new content on the fly, so I can immediatly see what my writings look like in my browser. Wysiwyg enough for me!

Hugo supports several content formats out of the box. Markdown is the default format, but it also supports Emacs Org Mode and other formats. There are so many ways to get things done! Since I love Org Mode, I split up the technical stuff (i.e. my Hugo theme) and my content. When writing and editing posts and pages ox-hugo helps to export my Org files to Markdown for Hugo. Maybe I’ll circle back on that later in another post.

Get it out there

When I’m done writing, I commit and push my edits to my main repository on Gitea:

git add content/posts/my-new-post.md
git commit -m "Added my new post"
git push

Gitea then automagically gets Hugo to rebuild my blog and publish it online. It really is that simple.

One last note to self: don’t forget about draft = true in the front matter of my new post :P

If you are curious, you can find the repo of this blog here: git.minded.net.