HUGO component Reuse

In this article, we will see how can we reuse our markdown files across our site. For this, we will be using Hugo short-codes which enables us to write short code snippets.

we can quickly get started with Hugo by few command:

brew install hugo

hugo new site quickstart

this will create a new Hugo project. Let's add in few default files that are required to get our site live.

we will create _default folder in layouts that will have baseof.html

we will have to create _index.md inside content folder which will be our homepage

and update a few lines in the config.

After these changes, our directory will look like this

and if we try hugo server we will see your website up

now let's move to the crux of this article. now we will create a shortcode folder within layouts. let's add code.html which will be having code for reusing markdowns.

this creates our shortcode, (.Get 0) gets input for the markdown file. first-line searches file with filename across the content directory.

Let's create a components folder which will have all our reusable markdowns, this is how our content folder will look like.

now we can use firstcomponent.md as a component and use it in other markdown files. Let us add this to our homepage

To get this done all we need to do is put this small piece of code

{{< code “/components/firstcomponent” >}}

after adding this to the homepage this is how our file will look like

and our website will look like this

Whole code regarding how can we use markdown as components are present in a git repo.