Overview

In this post we will cover the steps to get your Hugo blog content to your social media platforms, Back in the day before I was using Hugo, In the world of wordpress this was relatively easy. You could fire up the Wordpress market place and find a plugin which would allow you to cross post to Twitter and LinkedIn (My go to platforms). However in the world of Hugo this is not so easy, or is it?

The way we get around this issue is going old school and creating an rss feed for the blog. As I’ve already done this prior to “going live” for 2024. You can check out the rss feed page at https://blog.builtwithcaffeine.cloud/rss.xml.

So first things first we need to create an rss feed for our blog. This is a relatively simple process and can be done in a few steps.

Create an RSS Feed for your Hugo Blog

What is an RSS Feed?

RSS (Rich Site Summary; originally RDF Site Summary; often called Really Simple Syndication) is a type of web feed which allows users and applications to access updates to websites in a standardized, computer-readable format. These feeds can, for example, allow a user to keep track of many different websites in a single news aggregator. The news aggregator will automatically check the RSS feed for new content, allowing the content to be automatically passed from website to website or from website to user. This passing of content is called web syndication. Websites usually use RSS feeds to publish frequently updated information, such as blog entries, news headlines, or episodes of audio and video series. RSS is also used to distribute podcasts. An RSS document (called “feed”, “web feed”, or “channel”) includes full or summarized text, and metadata, like publishing date and author’s name.

to create the rss feed page we need to create a file under <your-theme>\layouts\_default\rss.xml

the file itself will look like this:

 0
 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
42
43
44
45
46
47

{{- $pctx := . -}}
{{- if .IsHome -}}{{ $pctx = .Site }}{{- end -}}
{{- $pages := slice -}}
{{- if or $.IsHome $.IsSection -}}
{{- $pages = $pctx.RegularPages -}}
{{- else -}}
{{- $pages = $pctx.Pages -}}
{{- end -}}
{{- $pages := where $pages "Params.hidden" "!=" true -}}
{{- $limit := .Site.Config.Services.RSS.Limit -}}
{{- if ge $limit 1 -}}
{{- $pages = $pages | first $limit -}}
{{- end -}}
{{- printf "<?xml version=\"1.0\" encoding=\"utf-8\" standalone=\"yes\"?>" | safeHTML }}
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
    <channel>
        <title>{{ if eq  .Title  .Site.Title }}{{ .Site.Title }}{{ else }}{{ with .Title }}{{.}} on {{ end }}{{ .Site.Title }}{{ end }}</title>
        <link>{{ .Permalink }}</link>
        <description>Recent content {{ if ne  .Title  .Site.Title }}{{ with .Title }}in {{.}} {{ end }}{{ end }}on {{ .Site.Title }}</description>
        <generator>Hugo -- gohugo.io</generator>{{ with .Site.LanguageCode }}
        <language>{{.}}</language>{{end}}{{ with .Site.Author.email }}
        <managingEditor>{{.}}{{ with $.Site.Author.name }} ({{.}}){{end}}</managingEditor>{{end}}{{ with .Site.Author.email }}
        <webMaster>{{.}}{{ with $.Site.Author.name }} ({{.}}){{end}}</webMaster>{{end}}{{ with .Site.Copyright }}
        <copyright>{{.}}</copyright>{{end}}{{ if not .Date.IsZero }}
        <lastBuildDate>{{ .Date.Format "Mon, 02 Jan 2006 15:04:05 -0700" | safeHTML }}</lastBuildDate>{{ end }}
        {{- with .OutputFormats.Get "RSS" -}}
        {{ printf "<atom:link href=%q rel=\"self\" type=%q />" .Permalink .MediaType | safeHTML }}
        {{- end -}}
        {{ range $pages }}
        {{- $content := safeHTML (.Summary | html) -}}
        {{- if .Site.Params.rssFullContent -}}
            {{- $content = safeHTML (.Content | html) -}}
        {{- end -}}
        <item>
        <title>{{ .Title }}</title>
        <link>{{ .Permalink }}</link>
        <pubDate>{{ .Date.Format "Mon, 02 Jan 2006 15:04:05 -0700" | safeHTML }}</pubDate>
        {{ with .Site.Author.email }}<author>{{.}}{{ with $.Site.Author.name }} ({{.}}){{end}}</author>{{end}}
        <guid>{{ .Permalink }}</guid>
        <description>
            {{- $image := partial "helper/image" (dict "Context" . "Type" "rss") -}}
            {{- if $image.exists -}}
                {{ "<" | html }}img src="{{ $image.permalink | absURL }}" alt="Featured image of post {{ .Title }}" {{ "/>" | html}}
            {{- end -}}{{ $content }}</description>
        </item>
        {{ end }}
    </channel>
</rss>

Once this file has been created you can test it by running hugo server and navigating to http://localhost:1313/rss.xml you should see something like this:

Account Creation

Create a Zapier Account

What is Zapier?

Zapier is an online automation tool that allows you to connect your favorite apps, such as Gmail, Slack, Mailchimp, and more than 3,000 others. You can automate repetitive tasks between two or more apps with Zapier, creating automated workflows known as “Zaps.” A Zap connects two or more apps to automate part of your business or personal tasks, saving you time and effort.

You can sign up for a free account at https://zapier.com/sign-up and then you will be able to create your first Zap.

Create a Buffer Account

What is Buffer?

Buffer is a social media management platform, which allows you to schedule posts to many different social media platforms.

You can sign up for a free account at https://login.buffer.com/signup

Creating the Zapier Zap - Part A

What is a zap?

A Zap is an automated workflow that tells your apps to follow this simple command: “When this happens, do that.” Every Zap has a trigger and one or more actions. A trigger is an event that starts a Zap, and an action is what your Zap does for you. When a Zap runs, each action it completes counts as one task.

For more information on Zaps check out https://zapier.com/help/create/basics/what-is-a-zap

From the Zapier dashboard click on the + Create Zap button.

Next, we need to create a trigger, in this case we will use the `RSS by Zapier trigger.
which will poll the rss.xml file we created earlier.

Next, Click on 1. Trigger and select RSS by Zapier from the list of apps.
For this post we are going to use the RSS by Zapier - Latest trigger.

Now we need to configure the event type for the trigger.
For this post we are going to use the New Item in Feed event.

Next, we need to configure the trigger, Add your rss.xml url to the Feed URL field and click Continue.

Ok, We have configured the trigger, now lets test to see the rss feed results in Zapier.
Click on Test trigger and then Continue.

If everything has worked correctly you should see something like this:

Ok, lets save this step by click on the Continue with selected record button.

Buffer - Adding Social Media Accounts

Now we head over to Buffer and will add the social media accounts we would like to cross post to. For the free tier you can only add 3 social media accounts. Which for me is fine, as I only use Twitter and LinkedIn.

From the Buffer portal, bottom left of the screen we want to click Manage Channels

From here you can click on Connect Channel

As you can see there are a lot of social media platforms to choose from.

Once you have selected the social media platform you want to connect, you will be asked to authenticate with the platform and then once configured it should look something like this.

Creating the Zapier Zap - Part B

So, Buffer is now configured with the social media accounts, from the Zapier portal we can now add the Buffer action to the Zap. Click on the Action step.

Search for Buffer and select Buffer from the list of apps.

Next, we need to select the action we want to perform. For this post we are going to use the Add to Queue action.

Zap Action - Buffer Twitter

Connect your Buffer account to Zapier, by clicking on the Connect a new Account button.

You will be asked to authenticate with Buffer, once authenticated you will be able to select the social media account you want to post to.

Now we need to build out the action, For the twitter posts I decided that I wanted to have cover image which would be shown every time. This was uploaded prior to creating the Zap and stored under the content folder.

Cover Image for Social Media Pots:

The Cover image wanted to be added under Image as a url.

For the text, remember that Twitter still has a character limit of 280 characters. So I decided to use the Title Link and then some useful hashtags to help boost the post reach.

Example Twitter Post:

From the Blog: Enhance your Hugo Shortcodes
Link: https://t.co/OxI7QYthH9#Community #CloudFamily #BuiltWithCaffeine pic.twitter.com/vndaAhIL49

— Simon Lee (@smoon_lee) January 16, 2024

Zap Action - Buffer LinkedIn

The LinkedIn Action is very similar to the Twitter action, We will still use the Buffer action. So lets duplicate the current action and then we can modify it for LinkedIn.

The duplication is done, now we need to modify the action.
Click on the 3. Copy: Add to Queue in Buffer

As you can see it is very similar to the Twitter action. I’d really the only change is the actual channel we are posting to.

Once this is done, click Continue.

Testing the Zap

Congratulations, you have just created your first Zap. Now we need to test it. There are two ways to test the Zap, You can either wait for the next RSS feed to be published or you can test it manually. For a manual test you can trigger the RSS Trigger to check for new items from the feed.

Once the trigger has been tested, you can then test the Buffer action. You can choose either action depend on which social media platform you want to test.

Twitter Test:

LinkedIn Test:

Summary

And here we are, at the bottom of the page! I hope you found this post useful and that you are able to get your blog content out to the people. If you have any questions on the configuration, please feel free to reach out to me on Twitter

Untill next time, Stay safe and keep learning! 🎉