Boost your site with content, tags, and Blowfish shortcodes 🔧

Introduction to this article 🌟

#

In this article, we will see how to create content, how to organize it and also some shortcodes made by Blowfish & Hugo to insert all types of contents.

Creating Content ✍️

#

Get started, general setup

#

To get started, you’ll need to create a repository named content. Make sure your structure looks something like this (I haven’t included every detail, but this is the general idea) :

# my hugo folder 
mkdir content

tree

├── assets # Where you put your images
│   ├── myprofile.png
│   └── openwat.gif
├── config
│   └── _default
│       ├── params.toml # And the others files
├── content # <-- Insert at this depth

In your content folder, you’ll need to create the categories for the topics you want to discuss. For example, if you’d like to create a category specifically for talking about golf 🏌️‍♂️, you can do it like this:

# content/

mkdir golf

Inside your golf repository you can add somes article like so :

# content/golf

touch my_first_golf_article.md
touch my_second_golf_article.md

If you did it correctly, you should end up with something that looks like this: 😊

├── content
   ├── golf
      ├── my_first_golf_article.md
      └── my_second_golf_article.md

This is a basic configuration, and the best part? You can duplicate it as many times as you need to create all the content you want !

Markdown Syntax

#

The file you created will use the markdown syntax, if you’re not familiar with it; I will do a quick sum up, but make sure to check the quickstart documentation for more details !

Markdown is a lightweight markup language that you can use to add formatting elements to plaintext text documents. Created by John Gruber in 2004, Markdown is now one of the world’s most popular markup languages.

Markdown can be used for pretty much anything. People use it to create websites, documents, notes, books, presentations, emails, and technical documentation. It’s also super easy to use because the syntax is simple and lightweight. ✨

Here are the main key points you should remember :

Here are the key points you should remember:

• Heading / Title : Use # for headings/titles, up to 5 in a row. The number of # symbols you use corresponds to the heading level. For example :

# Giant title 
### Medium title
##### Tiny title

This is also usefull in Blowfish to create the table of contents.

• Paragraphs : don’t require any special symbols. Just make sure that unless it’s a list, you don’t indent the paragraph with spaces or tabs.

This is a paragraph. 

This is another paragraph.

• Emphasis : You can add * to emphasize the text. Two asteriks or underscores are for bold and one is for italic.

**bold** __bold__
*italic* _italic_

• Blockquotes : To create a blockquote, use the > symbol at the beginning of the line. You can also nest blockquotes by adding more > symbols. For example:

> This is a quote
> > Nested quote

• Lists : You can create ordered with numbers and for unordered list use -, +. For instance :

- Element 1
- Element 2

1. first
2. second
3. third

• Images and Link : To insert a image or a link use ![alt text](url). The alternative text is displayed if the image can’t be loaded. And to add a link use [link text](url).

• Code paragraph : Last but not least, to insert code paragraph such as bash,

[My image](link_to_image)
[documentation](link_to_documentation)

Keep in mind this is the basic syntax, but those are the only things I actually use often. Everything i wrote is in markdown

Content tips and template

#

I’m not here to teach you how to write properly or to give you a crash course in English, since I’m no stranger to making mistakes myself. However, I do want to share some insights on what you should focus on when writing !

So, if we stick with our golf article from just now, we can first edit it :

# content/golf

nano my_first_golf_article.md

# You can also edit it in vscode for instance

First and foremost, you should begin with the header. The Markdown syntax, along with tools like Hugo and Blowfish, offers a variety of useful parameters that allow you to easily personalize and structure your content right from the header.

---
slug: golf-one
title: "How to play golf !"
date: 2025-02-15
draft: false
summary: "This post will explain how to play golf ! "
featureImage: "<link_to_image>"
tags: ["Hugo","Ops"]
---

Don’t forget to delimit the header with 3 dashes (—)!

• slug: This defines the URL slug for the page, based on what you set in the front matter. For example, if you name it golf-one, you can access the article via:

# content/golf/my_first_golf_article.md

https://example.org/golf/golf-one

# This works because the folder is `golf` and the slug is `golf-one`.

• title : This is the title of your article. Pretty straightforward!

• date : Same here, the date you posted your article.

• draft : Specifies whether your article is in draft mode. If set to true, the article won’t be visible on your site unless you build the site using hugo server --buildDrafts.

• summary : A quick summary to resume your article.

• featureImage : This image is displayed prominently as the featured image for your article. It will also appear as the background image on your article page, just like mine ! 😄
• tags : Hugo includes support for user-defined groupings of content called taxonomies. Taxonomies are classifications of logical relationships between content. We will see them just after.

Once your header is set, the only thing left to do is add the content. For example, here’s how I structured the introduction you just read a few minutes ago:

## Introduction to this article 🌟

{/{< alert circle-info >}/}  # <---- This is a shortcode we will see it just after
Make sure you've successfully installed and configured Hugo and Blowfish before following this guide. You can check the previous documentations [Hugo Startup](/hugo/hugo-startup) and also [How to configure it](/hugo/blowfish-config) if needed.
{/{< /alert >}/}

In this article, we will see how to create `content`, how to `organize` it and also some `shortcodes` made by Blowfish & Hugo to insert all types of contents.

And that’s it! Now, you have a complete understanding of how to create content !

Understanding Taxonomy 📚

#

In Hugo, taxonomies are user-defined groupings that help organize and classify content through logical relationships. A taxonomy consists of terms (the categories or tags) and values (the content assigned to those terms).

By default, Hugo supports taxonomies like tags and categories, but you can create your own custom taxonomies (e.g., series). These taxonomies enable you to organize your content more efficiently and allow Hugo to automatically generate dynamic, categorized lists of articles.

Let’s revisit our golf example, where we’ve set up the following structure:

├── content
   ├── golf  <---- Taxonomy

This organization is crucial because it helps structure your content. For example, you can decide which content you want to feature on your front page, offering greater control over what your visitors see!

To enable it :

# config/_default

nano params.toml

In the mainSections, you need to provide the tags you wan’t to provide a list of tags like that :

# config/_default/params.toml

mainSections = ["golf","foot","basket"]

In your mainpage, only the tags golf, foot and basket will be displayed in your homepage !

Working with Shortcodes 🔧

#

Another useful feature offered by Hugo and Blowfish is Shortcodes. These allow you to easily embed custom or inline elements, such as videos, images, and social media posts, directly into your content. I will list some usefull one, all the shortcodes are available here for Blowfish and for Hugo.

Make an alert

#

Use this shortcode to create an alert box for warnings or important messages. It helps grab your reader’s attention and highlight key information.

{/{< alert >}/}
**Warning!** This action is destructive!
{/{< /alert >}/}

Link an article

#

This shortcode is perfect for linking to other articles on your site. This is cool if you wan’t to link a specific article that is not shown in the Related Article

{/{< article link="/others/welcome/" >}/}

Icons

#

Blowfish includes a number of built-in icons for social, links and other purposes. Check the icon samples page for a full list of supported icons.

Output :

{/{< icon "github" >}/}

Link a Github Card

#

Embed a GitHub repository directly into your content with this shortcode. It creates a visually appealing GitHub card, perfect for showcasing projects or code.

{/{< github repo="Amakatus/parameters_hugo" >}/}

Share a Youtube video with Youtube Lite

#

This shortcode embeds a YouTube video using the Lite version, which helps speed up page loading by not loading unnecessary elements, making it more user-friendly.

{/{< youtubeLite id="wttQFlJqNU8" label="Nujabes - Luv(sic) Part 6 feat.Shing02 Uyama Hiroto Remix [Official Audio]" >}/}

What’s Next? 🚀

#

Now that your content is all set up, the next step is to take your website live!

In the following article, we’ll cover:

• Web hosting with Infomaniak 🌐
• Automating the deployment of your site 🚀

We will look at these subjects in the next article here !