64 lines
3.9 KiB
Markdown
64 lines
3.9 KiB
Markdown
+++
|
|
title = "The appeal of wysiwyg"
|
|
author = ["Anne"]
|
|
date = 2025-11-01T00:00:00+01:00
|
|
lastmod = 2025-11-01T15:36:21+01:00
|
|
tags = ["hugo", "workflow"]
|
|
draft = false
|
|
summary = "For a DIY girl like me, [Hugo](https://gohugo.io) 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?"
|
|
+++
|
|
|
|
## Hugo is awesome {#hugo-is-awesome}
|
|
|
|
For a DIY girl like me, [Hugo](<https://gohugo.io>) 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](<https://www.gnu.org/software/emacs/>) 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 {#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](<https://orgmode.org/>), 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](<https://about.gitea.com/>) 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:
|
|
|
|
```sh { linenos=false }
|
|
cd ~/projects/blog.minded.net
|
|
hugo server --buildDrafts --navigateToChanged
|
|
```
|
|
|
|
The [Hugo embedded web server](<https://gohugo.io/commands/hugo_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:
|
|
|
|
```sh { linenos=false }
|
|
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](<https://gohugo.io/content-management/formats/>) out of the box. [Markdown](<https://www.markdownguide.org/tools/hugo/>) is the default format, but it also supports [Emacs Org Mode](<https://orgmode.org/>) 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](<https://github.com/kaushalmodi/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 {#get-it-out-there}
|
|
|
|
When I'm done writing, I commit and push my edits to my main repository on Gitea:
|
|
|
|
```sh { linenos=false }
|
|
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](<https://gohugo.io/content-management/front-matter/#draft>) of my new post :P
|
|
|
|
If you are curious, you can find the repo of this blog here: [git.minded.net](<https://git.minded.net/anne/blog.minded.net>).
|