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
For a new post, just open the integrated terminal. This is the actual command I entered to create this post:
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:
There are a lot of settings, i.e.
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
LF otherwise the code highlight syntax will appear to be broken.
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.
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.
Once you initialized your repository with git, you can just commit with three lines.
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
or on Ubuntu
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.