Simple website layout

support
1

Hi. I have a new project and it’s been a long time since I’ve used Hugo; some things have changed since. I would like, if possible, to get some feedback on my draft layout.

The website will be fairly simple. I just want to publish the lecture notes of some of my courses. The index page displays the possible courses in a mosaic/grid; there is one page per course; and there is in addition an “About” webpage. That’s it. Pretty straightforward, and I intend to write the CSS and layouts myself, so I believe I do not need a theme.

My proposed layout is the following:

archetypes/
    course.md
assets/
    main.css
    course.css
content/
    courses/
        course-1/
            index.md
            lecture-notes.pdf
            exercises.pdf
        course-2/
            index.md
            lecture-notes.pdf
            exam.pdf
        ...
    about.md
    _index.md
data/
i18n/
layouts/
    _default/
        baseof.html
        home.html
        list.html
        single.html
    partials/
        head/
            css.html
            js.html
        footer.html
        header.html
        head.html
        menu.html
        terms.html
    about.html
    course.html 
    index.html
static/
themes/
hugo.toml

Features to use:

  • As the CSS is located in the assets directory, use pipes to use the stylesheet.

  • I can actually write Sass instead of pure CSS. For that, the Sass (written either as SCSS or indented) needs to be piped to the function that transpiles it to CSS.

  • Each courses is attached with course material (PDF files). I organize the courses as leaf page bundles; the PDF files are stored in the course’s directory, and not in assets/.

  • Use base and partial templates. Here, I reused the layout of a dummy theme created with hugo new theme.

    • All pages use layouts/_default/baseof.html. As I only have one section, I only need to have one definition for “list templates”, so I don’t define layouts/_default/list.html. In my case, I also don’t need layouts/_default/single.html. As far as as the index is concerned, my understanding is that it used to be layouts/index.html, but it should now be layouts/_defaults/home.html.

    • For the partials, I don’t in my case need terms.html, head/js.html; I can just remove those.

Maybe:

  • Add some PostCSS processing to ensure compatibility with the most browsers.

Do you agree with my plan, or are there things I should do in a different way? Also, any general recommandation would be appreciated.

Many thanks for making this forum so helpful every time people ask something on it.

2

Miscellaneous notes…

I would place the CSS files in assets/css instead of assets.

For the home page use either layouts/index.html or layouts/_default/home.html. Delete one of them.

These files don’t do anything:

  • layouts/about.html
  • layouts/course.html

Leave these files as shown in your diagram:

  • layouts/_default/list.html ← renders course list
  • layouts/_default/single.html ← renders course page

If you want a unique template for your about page, see:
https://gohugo.io/templates/lookup-order/#target-a-template

1 Like
3

Many thanks.

I’m not sure why layouts/_default/list.html why would be needed, given that the courses list will be directly on the homepage, but apart from that, we’re good.

Is there a way to donate a few $ to this forum as a thank you?

4

In case people visit:

  • https://example.org/courses
  • https://example.org/someTaxonomy
  • https://example.org/someTaxonomy/someTerm

Or, if you don’t want to generate pages at those URLs, disable those page kinds in your site configuration:

disableKinds = ['section','taxonomy','term']
5

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