Need help connecting CSS to other pages on my site

Dummy test repository: DrC0l0ssus/test · GitHub

I got CSS connected and working on my homepage, and the links in the navbar should be working okay, but when I click on the links (Section 1/2/3, About), I get HTML and no CSS styling. I’ve been digging around Hugo’s documentation and on here, but I can’t seem to find a clear answer: what am I supposed to add in order to hook up my CSS styles sheet to these other pages for my site, and where do I add it? I’m not clear if I’m supposed to add front matter to the HTML pages, make Markdown files and add front matter there instead, or something else.

I think you need to refresh some basic skills:

<link rel="stylesheet" href="css/styles.css">

This URL is relative to the current page, not to the root of your Hugo site.

To repeat myself from our earlier conversation, I think you would be better off starting with something that works. Your test site is… a bit of a mess.

There are some great resources here:

Okay - can we go over what’s wrong with my site or how it’s “a bit of a mess” and use that with what you’re trying to teach me? I was looking over your test repository and put my files in locations matching yours, but there are some differences. Yours was using SCSS, which I haven’t learned - I’m learning CSS, and I’d rather stick with that, at least for now. (Learning HTML, CSS, and now Hugo are enough learning curves for me at the moment, I don’t need to throw another one on my plate unless I absolutely have to, and I don’t think SCSS is a must-learn, unless I’m mistaken.)

Showing me a working example is good, but I’m going to be trying to figure out how to apply it to my test site, so that’s really the context I need. Also, the link you shared includes the Cloudcannon tutorial that I mentioned in my previous post, and I used that while building my test site. So, if what I churned out is a mess, then there’s some kind of disconnect between things like that tutorial and me trying to understand it. :slightly_smiling_face:

Your links in layouts/partials/header.html are page-relative. No.
Your links in layouts/partials/navbar.html are page-relative. No.
Your links in layouts/partials/navbar.html are hardcoded instead using the menu system. No.
Your baseURL in site config is blank. No.

├── about/
│   └── about.html
├── posts/
│   ├──
│   └──
├── section1/
│   └── section1.html
├── section2/
│   ├── illustrations.html
│   └──
└── section3/
    └── photography.html

I have no idea what you are trying to accomplish here. You are either putting templates in your content files, or your HTML files should have front matter.

Regarding my links in my header and navbar being page-relative - okay, so what should I be doing with the links instead? They work for the homepage, but is this part of why they aren’t working with the HTML pages for about, section1, section2, and section3?

And for the navbar links being hardcoded instead of using the menu system - why is that wrong? Does the menu system implement a hamburger-style menu instead? If so, that’s not what I had in mind for the site.

Regarding baseURL being blank - my apologies, I don’t have an actual URL yet for the site, that’s why it’s blank. I left it out for the dummy repository, but if I need something there for testing purposes, let me know and I’ll drop something in there.

Regarding the content tree - I should have removed those files from section2 and section3. I wasn’t sure if I needed them as a template for those pages. They’re going to be photo galleries of different subjects. I was going to build the gallery templates with HTML and style them with CSS at first, but then I wasn’t sure if I needed to build templates with markdown files instead. So, if I had to choose, I would probably delete the files and add front matter to the HTML files, if necessary. At this stage I am not sure about what front matter to add to section1, section2, and section3.

Try this tutorial Make a Hugo Blog From Scratch | zwbetz

1 Like

Thanks. I did follow along with that one earlier, but I’m revisiting it now. One thing I noticed right away that I think tripped me up, based on Joe’s earlier comment with the CSS link, is the part in zwbetz’s tutorial about replacing the Bootstrap CSS code in the static folder with Go code. At the time I thought it was all part of Bootstrap (for some reason), so I must’ve ignored that and just put the direct link to my CSS file instead. Clearly that’s wrong, so I’m using

{{ $css := "css/bootstrap.min.css" | relURL }}
<link rel="stylesheet" href="{{ $css }}">

and replacing “css/boostrap.min.css” with my CSS file (in this case, css/styles.css".

I’m continuing to revisit that tutorial, but that’s one thing that I immediately noticed I was doing wrong upon re-reading. I’m sure I’ll have more questions or seek clarification on other things as I revisit it, so I’ll check back in when I do. Thanks again.

I’ve updated my dummy repository (see link in my original post) - right now I’m working on the tutorial’s Menu section (Make a Hugo Blog From Scratch | zwbetz), and I’ve added the code example to my navbar and baseof HTML files, plus added the relevant code to my config.yml file (I used Convert TOML to YAML Online - to convert the toml code to yaml). I did not include the code and JS script/file for the feather icons stuff because it seemed to me like that was optional, but if I’m wrong, let me know.

Anyway, using the code and modifying it to match what I’m trying to include in my navbar, I can’t get the menu/navbar to appear on my site, and I’m not sure what I’m doing wrong or how to fix it. Any pointers or solutions?

That was not necessary. I prefer TOML too for config, but YAML for frontmatter. Anyway…

  1. You did not hook the navbar partial to your header.html partial. Add it like this
{{- partial "navbar.html" . }}
  1. Do you know the basics of HTML? Please read this and adjust your header file accordingly.
  2. But I agree with Joe that your test site is a mess. This is why themes are recommended for beginners in the Quick Start | Hugo guide. Or you put in the work to read the docs (I know, they are not beginner-friendly. I know from experience). Be ready to put in the work. It took me close to 100 hours to get my site up and running and more hours to fine tune stuff
  1. Just curious, where in that tutorial you sent me did they say to hook the navbar partial to the header partial? I read that page and it only has you hook it up to baseof.html. The only partial the tutorial hooks up in the header is the style.html file it made.

2 and 3. I’m in the midst of learning HTML and CSS. As I was reading up on adding a weblog/journal component, I came across SSGs mentioned somewhere and thought they’d be useful for the type of site I’m making. Clearly, the learning curve is a bit steeper than I anticipated, though I’m finding the lack of user-friendliness in the documentation to be a bigger obstacle. I’m going to continue using just HTML and CSS accordingly and skip the SSG component.

Thank you for your time.

Trust me. Some (or many) of new Hugo users have been through the baptism by fire. But Hugo is explicit on those who should use it

A good understanding of the fundamentals, html and css, is a prerequisite of any web development. Get the basic down first.

Crucially, in relation to the issues you have been experiencing, you need to understand the difference between relative and absolute links.

1 Like