Hugo for Microblogs

Wanted to know what’s right way to use Hugo for microblogging.

The blog posts will not have a title, only a content body, the same as posting on Twitter and Facebook.

The issue with Hugo is the permanent links seems to be tied to the title or rather displayed in the title field along with the title. Removing the title from the front matter is also removing a permanent link to the actual post.

This is somewhat fixed with long form content with a Read More tag, but microblogging tends to be 1 or 2 lines for the most part, so not really a solution in this context.

Coming from a WordPress background, the workaround for me was the use of hooks in the child theme.

What is a workaround/fix for microblogging in Hugo? Looking for pointers on themes or settings to start with.

Thanks!

A simple list on the home page that does not use the title but rather just {{ .Content }} and the post date should work. Then you could use hugo new with an archetype that has your frontmatter mostly pre-filled.

For instance, my https://live.cogley.info site. The top page is making a list with the title and a partial called summary. You’d just need to use the date or something in place of title, and perhaps just {{ .Content }} instead of the summary partial. I have not tested it though.

1 Like

Interesting - Hugo assumes that everything you create is a “page” and each page needs a URL - what would you expect to use as the “slug” for the page?

The alternative approach might be to create your micro-posts as data and have just a single page to show them.

1 Like

My apologies, but most of that went way over my head. I’m not even sure what to do with the data that you have so kindly shared. My sincere apologies, but not a coder in any capacity.

A lot of people are doing it, and most of them use the date and time for the slug.

My issue is having the slug show up post (below) the content and not as the title.

A good example running on Hugo is https://www.amitgawande.com/journal/.

I have emailed Amit, just waiting to hear from him.

Good point @TotallyInformation. I wonder if you could use the date and a serial for the slug. Using a file in data does seem like a simple solution, but it might be a little fiddly in terms of any markdown code you want. Not impossible, but you have to use odd yaml syntax (those triple-backtick bits) for anything multiline.

An aside: other alternatives, thinking also about integration:

I’m pulling direct from a db for this page’s “short posts” list, to make a kind of microblog for my firm:
https://esolia.com/post/
That’s a javascript embed code at work.

And pulling down json from the same db then pushing that thru a hugo shortcode for pages like:
https://esolia.com/success-story_office-and-lab-construction-project/

In this case, one record is a page, but, one could do the same thing with any sort of json feed you can create, and just range over the records.

@Ahopi maybe, you could just prep one markdown file per day automatically, and just put any microblog posts on that page, using some consistent format. Kind of like the blog tab here: http://scripting.com/

@ahopi yeah, Amit’s journal is a good example. I reckon he is making a post per each shown date. The list just has no links (save from the small date, which just leads to a page that grouses about ad placement :smile: ), and everything is exposed. You can do that using {{ .Content }}.

As Hugo can not (if I am properly informed) generate files from data it would make sense to work with one .md files for each post so that you can link to each micro post—as here: https://micro.blog/discover.

It would make sense to use file names according to this scheme: YYYY-MM-DD-HH-MM-SS. You can probably automate generating these files.

All you need in YAML is a “>” for multi-line. I use this for the description in my frontmatter:

description: >
    This is ...
    multi-line text ...
date: ....

But point taken, it might be more bother than it is worth.

And yes, I was thinking of timestamp or date+serial as a slug. Not sure if Hugo can generate a serial number automatically however? Timestamp format is probably easier?

1 Like

If it’s one file per day (or date that you want to blog) you could just use the date I think. I did not know that > syntax. Sweet.

I use this zsh function for making posts in my live blog.

# Function for creating posts

function hugogenpost-live {
if [[ -z $1 ]]; then
    echo "A double-quoted post title is required"
    exit 1
fi

_hugobin="$HOME/gocode/bin/hugo"
_workingdir="$HOME/dev/RCC-Live"
_contentdir="${_workingdir}/content/post"
_hytitle=$(echo $1 | tr ' ' '-')
_hytitlelower=$(echo ${_hytitle} | tr "[:upper:]" "[:lower:]")
_hytitlelowerquoted=$(echo \"$_hytitlelower\")
_date=$(date +'%Y-%m-%d')
_datetime=$(date +'%Y-%m-%d %H:%M:%S')
_contentfile="${_date}-${_hytitle}.md"

cd ${_workingdir}
${_hugobin} new post/${_hytitle}.md
mv ${_contentdir}/${_hytitle}.md ${_contentdir}/${_contentfile}
# sed -i 's/slug = ""/slug = '"${_hytitlelowerquoted}"'/g' ${_contentdir}/${_contentfile}
# echo ${_hytitlelowerquoted} >> ${_contentdir}/${_contentfile}
$EDITOR ${_contentdir}/${_contentfile}
}

I have archetypes/post.md which gets called by the hugo new post in that script:

+++
date = {{ .Date }}
title = "{{ replace .TranslationBaseName "-" " " | title }}"
slug = "{{ .TranslationBaseName | lower }}"
tags = ["x", "y"]
draft = "true"
+++

Intro

<!--more-->

Body

… but you could have whatever stuff in there you like, adapting the slug etc. For example, just disable tags or leave draft set to false to make less work.

Yeah, I could really do with creating a small VScode plugin for creating new posts for my own blog.

Hmm, actually, now I think about it, I could probably just use the package.json I already have to define a suitable script like yours - VScode can take npm scripts like that and turn them into tasks you can run directly. Except my script will be in PowerShell as I work on Windows :grin:

Really though, I need some tools for setting the file name and selecting categories and tags from my existing sets. More thinking required. Sorry, I’m drifting well off this topic.

1 Like

This is a clumsy but very easy solution (in the case you want to go with one file per post):

VAR="$(date +'%Y-%m-%d-%H-%M-%S')" && hugo new micro/$VAR/index.md && cd content/micro/$VAR/ && open -a Finder ./ && edit index.md

The script creates a folder with an index.md file and opens the file in the terminal and the folder in Finder (MacOS). So you can easily place images here that can automatically be referenced using the new Page Resources.

A micro.md archetype could look like this:

+++
date = 2018-05-21T14:44:45+02:00
slug = "{{ now.Format "15-04-05" }}"
+++

As :hour and :minute are not available in permalinks, I use them as a slug.

By the way: Would it make sense to provide :hour, :minute, :second as permanent vars?

1 Like

Yes. Year, Month, and Day would be the same for multiple posts during the same day. Hours, minutes, and seconds would come in handy if not using file name or title in the slug.

If it helps any, I create a new status post with 180523-oneword.md; the yymmdd I generate with a keystroke shortcut. This gets round the posting more than one status per day, plus enables you to find status posts more easily. The content of the post is then what is displayed


Thanks for that, I will give it a try on a local test site. My skills are not up to the mark for creating layouts and hacking my existing theme, so I will probably clone your entire theme.

Thanks for sharing.

1 Like

One thing to note is that the Hugo archetypes for eg blog posts, status posts etc. are by their very nature tied to the front matter of your content, and the templates are similarly tied to the config.yml values.

This is why I have started to clone the entire site, to make life easier.

To that end, I’ve made a “Hugo Starter Kit” called Indiego: https://www.indiego.org.uk/

You can click on the “Deploy to Netlify” button and it will clone the entire site for you to GitHub and deploy it automatically to Netlify.

It’s very bare bones, so the theme would need some styling.

Hope that helps!

I think the idea with micro-blogging is that you don’t want individual pages for posts since they are so tiny. I would think a hash in the URL plus an identifier (i.e., think of tweets’ individual idenitifiers). Don’t get me wrong, individual pages created from single serialized data sources would be a huge win for Hugo, but I don’t think this is the use case :smile:

Totally agreed!

Are you thinking of JavaScript reading a JSON file from the static folder? Or is there way to create hashed URLs from a data file located in data?

(Only advantage of single folders with index files is Hugo’s image processing which can be handy for quick blogging.)

A bit off topic: But this would also be great for event calendars and such.

Here’s another example of a Hugo blog with micro posts: www.baty.net/micro/, by Jack Baty.

Here’s the site source.

2 Likes

I’ve just recently imported all of my old Tweets into my Hugo site. Each tweet is its own file, with front matter. These are posts with no titles, but a slug generated from the time of creation, and stored in a directory path that follows /YYYY/mm/dd. I display them in both lists and single content views:

Examples:
https://skippy.net/note/2018/
https://skippy.net/note/2018/05
https://skippy.net/note/2018/05/23
https://skippy.net/note/2018/05/23/090551/

I elected not to show the contents of each item in year or month lists, but only by day.

I further define which items are replies and retweets, versus original tweets. On my home page, I display only those items which are not replies or retweets.

You can see my theme here: https://github.com/skpy/hugo-themes/tree/master/skippy.net

I’m trying to implement indieweb thinking into my site, and Hugo makes it actually quite nice to define post kinds. I also use micropub to create new items and generate my site. This allows me to write new notes on my site, and have them published to Twitter, also.

The indieweb/micropub pieces may be overkill for what you’re trying to do; but thought I’d share how I’m doing microblogging with Hugo.

3 Likes