404 after creating a distinct layout for a specific post type (like imprint or data protection)

[SOLVED]

The original Problem was, that I wanted to create a distinct layout for specific post types, like imprint and data protection agreement.

The practice I found that works for my project is as follows:

  • Create folder under /content name myposttype
  • Place markdown file there imprint.md
  • Create folder under /themes/mysitestheme/layouts/myposttype
  • Place myposttype.html there to define layout for this type of post
  • Reference post type in the post’s front matter by adding type: myposttype to front matter

Additionally I can now recommend:

  • use only lower capital directory names as capital letters easily produce problems
  • Add permalink to config.toml:
[permalinks]
    myposttype = '/:title/'
  • Through this your post is available at {sitename.de}/mypost as opposed to {mysitename.de}/myposttype/mypost

Thanks for the help!

[----------------- Original Question --------------]

Ahoi everybody,

I am coming down with my first hugo-based project. I initially started using hugo because I needed a smart way to maintain , and across mutliple pages of some vanilla html,css,js projects.

So far I’ve created some parts of the landing page and created a second page just for testing purposes. Right now I’m kind of stuck with creating imprint/data protection pages. I figured “Hey, I’m using hugo, might as well write this basic stuff in Markdown anyway to safe some time”.

So far I
… created impressum.md and datenschutzerklaerung.md. Both rest in /content. (greeting from Germany btw.)
… created a layout as part of my theme, as I see it being recycled again in the future for multiple projects. Its in {themesPath}/layouts/legalContent and is called legalContent.html
… referenced this layout I want to use in both my post’s front matter
… also created a basicContent.css in my theme’s static files to maintain the styles only for those legal pages

However, I only seem to receive a 404. I have change something and I don`t know what. It used to work, but now it doesn’t anymore and I cannot figure it out.

I try to access those posts via:
http://localhost:1313/legalContent/impressum/
http://localhost:1313/basiccontent/datenschutzerklaerung/

I’ve uploaded the page to this public repo:

Thanks for any help and also if you spot any rookie mistakes in my file structure setup or anything else please feel free to take me apart :slight_smile: I´m here to learn.

Cheers,
Max from Bavaria

See this response.

Hey @tut thanks for the reply! I changed my dir’s name but it still doesn’t work. I pushed to Github again.

I just cloned your site and did some tests:

  1. I recommend using lowercase for folder and file names. I don’t know what the Hugo team recommends on this, but this makes it so much easier to manage files and permalinks. So, change legalContent to legalcontent in all the areas it occurs.
  2. You have not defined any permalinks in your config.toml, so Hugo picks your directory and files names as the URL (e.g. example.com/legalcontent/impressum/)

Hi @tut thanks, I cleaned up my directory structure and I can see my pages again, thank’s so, so much for replying! I think there were multiple mistakes at work

Also thank’s alot for your tip with the permalinks. I fixed that as well :slight_smile:

Have a nice day!!

You are welcome! (If my answer helped you, kindly mark it as the solution to close this topic)

@tut i did so, thanks. Also i added my solution to the original post

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.