A short guide to internal linking in Hugo post markdown
Eventually, you’re going to want to add an internal link to another page or post on your Hugo website inside of your markdown content.
You could of course just use a static markdown link like this: [google](https://google.com)
but thats not ideal for a variety of reasons. Development environments, url re-writes and domain name changes to list an obvious few.
Enter the Hugo Shortcodes.
Hugo loves Markdown because of its simple content format, but there are times when Markdown falls short. Often, content authors are forced to add raw HTML (e.g., video ’s) to Markdown content. We think this contradicts the beautiful simplicity of Markdown’s syntax. Hugo created shortcodes to circumvent these limitations.
For anyone in a hurry - here is an exmaple of a shortcode which produces a permalink to a blog post in your content directory.
[Blog post]({{< ref "posts/path-to-your-page-bundle/index.md" >}})
Notice the use of the ref shortcode word here - it produces a full permalink for the page. Alternatively you can use the relref shortcode which will give you a relative permalink.
So whats going on here is that we’re passing an absolute path of the ref shortcode. In this case its a path to our markdown file, and as far as hugo is concerned the starting point of our absolute url is the /content directory in the root of your project. So thats why we can pass in posts/path-to-post-bundle/index.md.
The reason that Hugo is able to resolve that directly to the url of the post is because Hugo assumes that the same structure that works to organize your source content is used to organize the rendered site.