CODEWITHSUNDEEP
markdownhugo
Adeel
Adeel

Reputation: 363

Linking pages in Hugo/markdown

I am new to HUGO (http://gohugo.io/) static site generator. I am running Hugo server locally accessible as localhost:1313. I am trying to link pages in two different sections. My "feature.md" file need a link to "grid_modules.md" and vice versa. Following is the directory structure for both files in hugo generated site.

~/mysite/content/about/feature.md

~/mysite/content/modules/grid_modules.md

What is the best way to link both pages together? What I am trying is the following

In feature.md:

"[grid_modules] (../modules/grid_modules)"

If I try to access this link, I get an error at "localhost:1313/about/modules/grid_modules" which I know is wrong location.

What I am missing in linking? Why I am not getting "localhost:1313/modules/grid_modules" instead.

Upvotes: 25

Views: 27538

Answers (4)

oscarz
oscarz

Reputation: 1254

For navigating the page to the different post in markdown, you can use the below one.

[About]({{< ref "/page/about" >}})

Make sure that

  1. Double quote("") the relative path
  2. Add slash / in front of the relative path
  3. The relative path starts from the root. For some hugo template, it might be /content/posts/xxx

Upvotes: 3

Mike M
Mike M

Reputation: 91

I ran into this same problem, and found the following simpler solution to work. When a url is specified in the form [text](/url/path) from a page under content/, the /url/path root is effectively content/ (or public/ in the rendered site). So, to link to "~/mysite/content/modules/grid_modules.md" from within "~/mysite/content/about/feature.md" you can simply write in "feature.md"

[grid_modules](/modules/grid_modules)

Upvotes: 9

Clay
Clay

Reputation: 411

This answer builds upon the answer provided by bep. That answer is correct, but not very clear (as it took me many times reading it an trying different things before I found the solution).

As stated previously:

the URL of a page depends on your URL configuration (either through in https://gohugo.io/extras/permalinks/ or set directly as the URL on the individual page).

You can use the ref and relref tags within your markdown so that a link resolves to the correct URL.

For your example, this would look like one of the following (depending on whether you want an absolute or relative URL):

[grid_modules] ( {{< relref "modules/grid_modules" >}})
[grid_modules] ( {{< ref "modules/grid_modules" >}})

Upvotes: 23

bep
bep

Reputation: 1737

What the URL of a page depends on your URL configuration (either through in https://gohugo.io/extras/permalinks/ or set directly as the URL on the individual page).

And this is often not the same as the path on the file system.

Hugo have some helper functions that will help you, see ref and relref in this document:

https://gohugo.io/extras/crossreferences/

Upvotes: 8

Related Questions