1
2
3
4
5
6
7
8


 ██████╗ ███████╗ ██████╗    ██████╗  ██████╗  ██████╗██╗  ██╗███████╗
██╔════╝ ██╔════╝██╔═══██╗   ██╔══██╗██╔═══██╗██╔════╝██║ ██╔╝██╔════╝
██║  ███╗█████╗  ██║   ██║   ██████╔╝██║   ██║██║     █████╔╝ ███████╗
██║   ██║██╔══╝  ██║   ██║   ██╔══██╗██║   ██║██║     ██╔═██╗ ╚════██║
╚██████╔╝███████╗╚██████╔╝██╗██║  ██║╚██████╔╝╚██████╗██║  ██╗███████║
 ╚═════╝ ╚══════╝ ╚═════╝ ╚═╝╚═╝  ╚═╝ ╚═════╝  ╚═════╝╚═╝  ╚═╝╚══════╝

My simple blog routine: how to create a post, preview and commit to production.

General Setup 🗺️

I already described my blog setup for geo.rocks in an earlier post. Once you manage to get around the most common hugo ptifalls like line endings and staying away from theme files you are ready to go!

VS Code 🦉

VS Code is a great text editor. It has more features than you can think about and everything you need for a nice hugo routine already on board:

  • dark mode
  • simple markup editing
  • integrated terminal (really handy!)
  • file explorer
  • code highlighting
  • available for all OS

In order to use VS Code, just open your main workspace/folder where you cloned the theme repo. Now you can edit files, open a new terminal and create new files.

Creating a post 🆕

Depending on the theme you need to adapt the following lines. Note that the theme of this blog - even - is using the subfolder post instead of hugo standard posts.

For a new post, just open the integrated terminal. This is the actual command I entered to create this post:

1

hugo new content/post/hugo-routine.md

A new file will appear in green on the left side in the file explorer. Double click on it (clicking one time opens the file in non-edit mode). You will see that the headers are already there. For this post they look like this:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

---
title: "Hugo blog routine - write, preview, edit, commit"
date: 2021-01-13T20:36:59+01:00
lastmod: 2021-01-13T20:36:59+01:00
draft: false
keywords: []
description: ""
tags:  [hugo, routine, workflow]
categories: [hugo]
author: ""

# You can also close(false) or open(true) something for this content.
# P.S. comment can only be closed
comment: false
toc: true
autoCollapseToc: false
postMetaInFooter: false
hiddenFromHomePage: false
# You can also define another contentCopyright. e.g. contentCopyright: "This is another copyright."
contentCopyright: false
reward: false
mathjax: false
mathjaxEnableSingleDollar: false
mathjaxEnableAutoNumber: false

# You unlisted posts you might want not want the header or footer to show
hideHeaderAndFooter: false

# You can enable or disable out-of-date content warning for individual post.
# Comment this out to use the global config.
#enableOutdatedInfoWarning: false

flowchartDiagrams:
  enable: false
  options: ""

sequenceDiagrams: 
  enable: false
  options: ""

---

There are a lot of settings, i.e. title or date. The most important here beside the tags and categories is draft. When it is true it won’t go to production even when committed. It’s only displayed on localhost:1313 and hence useful for unfinished work. toc removes the table of contents to the right on this page.

Editing a post ✍️

Just use plain markdown as explained in the markdown guideline for this theme. Additionally, there are some extras such as admonitions.

Beware: Line Endings

Make sure to change the line endings in VS Code from CRLF to LF otherwise the code highlight syntax will appear to be broken.

Preview 😵‍💫

If you think you’re ready, have a quick look how it will look in online! Just start a local hugo server in the same terminal where you created the post before.

1

hugo serve

Your page is now displayed on localhost:1313. Found some tipos? Yep, let’s just correct tipo -> typo in our markdown file. The best thing is: no reload required! Hugo is smart enough to detect changes and reloads localhost automatically whenever you save your markdown file. So switch back to your browser and you’ll see the changes immediately.

Committing ✔️

Once you initialized your repository with git, you can just commit with three lines.

1
2
3

git add . 
git commit -m "quick commit"
git push origin master

Or if you are lazy and don’t want to type so much, use a shortcut! Working for all OS, find my blog posts for Ubuntu and Windows. Once installed, it’s quite simple. My shortcut looks like this on Windows

1

.\m

or on Ubuntu

1

. m

The dot either in bash or powershell indicates, that the code is executed from source.

See your post online 👀

If you deploy your page with netlify, you will see your changes online in no time. For a simple blog post it takes me around 20 seconds to see it online!

Get your own page for free! 🦊

Curious? You can set up your own page with custom domain email for one dollar only.