[help] need an overview learning custom layout/design/theme

support
1

I’m still working on the Hugo basic to build the site with different structures and deploy to Netlify and integrate with headless CMS. This part is like the “backend” of SSG and I just use existing them for frontend.

I’m not a tech guy but willing to learn. I’m not asking for hand holding guide but an overview for the the big picture how different elements play together regarding the “design/look” of the site.

I know HTML, CSS and go template are the building blocks but I wonder how to approach and connect these elements in terms of gohugo workflow. As we use SSG, we don’t create pages from scratch, I’m sure the learning path and the focus should be different.

If possible I prefer to avoid JS and node.js in the workflow for now. Thanks in advanced for all inputs.

EDIT: just a few words about ppl like me. We only learn to use the chosen tools and get our tasks done. We really don’t have the technical background to understand why Hugo and other SSG so amazing. There are many resources for ppl heading to be programmers/developers. There are also many resource for ppl never want to touch the terminal and to code. We are the group in between with very little care. I tried hard but really can’t find much in depth information most of the time.

2
  • You use HTML in Hugo’s theme files, like templates and shortcodes. For instance, if you make a homepage template you’d use HTML to structure the page just like you’d do when you use HTML elsewhere. So you use <h1> tags, perhaps a <div> and a <header> element. The only difference compared with plain HTML is that Hugo inserts content into those HTML templates, like the title and the text from a blog post.
  • You use CSS in Hugo’s theme. Those CSS files are typically in the theme’s /static/css/ folder. Those CSS styles are used with the HTML (which you used in the other theme files, see previous point). Hugo doesn’t meddle with CSS or treat it in an uncommon way. So what you know about CSS already ports over to Hugo 100%.
  • You use Hugo template code to insert Hugo’s ‘special features’ inside the HTML templates. For instance, if you type {{ .Title }} in your HTML code, Hugo will replace that bit of code with the page’s title set in the front matter. This way the HTML template files get their information from your content.

Hope this helps.