Creating landing page with Hugo

support
1

Hi. I know few basics of html and css and I`m new to Hugo.

I `m confused by this question -> How can I style a custom landing page?
In a clasic static page I would create a simple html file with classes and create a style with css file.

What is the logic by Hugo? I read the documentation files but didn`t find the logic solution.
So, beside the homepage, I have a category of multiple pages and every page will need to have a custom css solution.

I understand text is in the markdown file and single.html template is for defining basic layout like header and footer but how do I style markdown file? I did try to do it directly in the markdown file with division but then the layout of current template is changed :confused:

2

You can still do this. For example, create a file at layouts/index.html, and another at static/style.css

For your other questions, it all depends how you would like to layout your site. Try giving the Template docs another look:

3

Thank you for the answer, but I still don`t understand. Maybe I should write more specific.

I will have the structure of content like this:
Homepage

  • category
    • page 1
    • page 2
    • page 3

All pages (1, 2 and 3) in the category should have a different style. So, if the content should be in markdown files (not in index.html or static.html), how can I style the content in this 3 pages?

In the index or static.html I can only style header and footer. When I add {{ .Content }} in this html files Hugo takes the content from markdown file. I just want to understand the logic around this so I can proceed.

4

I think I see what you are trying to do now.

So one option is to declare a front matter param in your content for a custom CSS file. For example:

---
css: "path/to/custom/css/file.css"
---

Then in your single page template (or head partial), have some logic like this:

{{ with .Params.css }}
<link rel="stylesheet" href="{{ . }}">
{{ end }}

This would allow a custom stylesheet for each page in the category.

Another option is to wrap your content in a div of some class. For example:

---
title: "Page 1"
---

<div class="some-class">
Your content here
</div>