How to structure this site (see diagram)?

support
1

Hi.
I am a beginner and want to learn HUGO so that I can build my website. My website will need to have a CMS so I’m thinking about Netlify CMS for that. The site will contain three sections: two blogs (each with its own RSS feed) and one ‘digital garden’. (i.e. non-chronological pages on various themes). Each of these sections should have its own colour scheme. I have tried to diagram the basic site structure below…

web site
web site1650×1060 21.4 KB

While I get started learning HUGO, could you please tell me:

  1. Whether this site structure is possible.
  2. How I should be thinking about structuring the setup. Any specific info that would be useful to know for the site structure I’m planning.

Thanks very much.
D

3

From a didactic stance the Hugo documentation is close to useless for beginners. No human on this planet has the mental capacity to get all the disorganized concepts together at once. This is by far not how learning works. So people are forced to go on a trail through the thick jungle of Hugo terms and patch a mental model of it together by themselves.

Which is quite bad honestly, because Hugo is a neat technology.

5

If you read my comments you’ll see that the numbers you point has no connection with your conclusions.

6

1 - Yes. This is basic.
2 - Just use sections as top level content + taxonomy for cat/dogs + basic menus to link to sections.

2 Likes
7

Hugo has a learning curve. But once you are out of that stage, everthing falls into place. Use this support forum to ask your questions before you abandon it. Eleventy is also a good choice.

8

Thank you for the replies. I had a bit of a sulk last night about getting started then eventually followed this tutorial and managed to get a basic demo site up and running. Hugo Beginner Tutorial — #1 Installing Hugo - YouTube

Now that I’ve done that I’m not really sure what do next. I may look for another tutorial.

9

Even trying to follow the quickstart I’m hitting errors.
After pasting in these commands:

hugo new site quickstart
cd quickstart
git init
git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke themes/ananke
echo "theme = 'ananke'" >> config.toml
hugo server

I’m getting this: Error: "[...]\quickstart\config.toml:4:20": unmarshal failed: toml: expected character =

My config.toml looks like this:

baseURL = 'http://example.org/'
languageCode = 'en-us'
title = 'My New Hugo Site'
"theme = 'ananke'"

So if I try to correct the error which was caused by the official quickstart tutorial!) by removing the excess " it now reads:

baseURL = 'http://example.org/'
languageCode = 'en-us'
title = 'My New Hugo Site'
theme = 'ananke'

And works.

10

Which operating system?

11

Use Git to run the commands if you are using Windows. I faced the same problem just this week! See Quick start | Hugo

1 Like
12

Thank you.
It’s Windows 10.

How would I use Git to run the commands please?

13

Ensure you have followed Step 2 to install Git. The rest of the step applies and you don’t need to repeat if you have already completed the Quick Start Guide. With Git, you right click on the root folder of Hugo where the config file is and then choose “Git Bash Here”. Then run Hugo commands.

Here are some Hugo commands

14

Thank you.
Do you know if there’s any way to make the VS Code terminal do the same thing? Just to avoid context switching as much as possible.

15

It depends on the terminal. The Quick Start guide has a footnote for Windows users:

  1. If you are a Windows user, you must run these commands with PowerShell. You cannot use Windows Powershell, which is a different application, or the Command Prompt. :leftwards_arrow_with_hook:︎

Seems like we need to make that more prominent… it’s on my list

1 Like
16

Thank you. And I’m sorry if I’ve been rude or ungrateful in my other posts. I am just frustrated. I appreciate the help here and the effort put into continuously improving the docs.

17

Maybe try this in VS Code (Press F1, search Terminal: Select Default Profile then select whichever you prefer. I went with Git as a test.)

1 Like
18

Thank you! That’s perfect.

19

Done.

1 Like
20

This tutorial is very good! Installing Hugo | CloudCannon The entire thing - not just this page.

21

I think I’ve figured out some of the answer to my original question now.

If starting a new site from scratch then under
/content I should have folders for blog-1, blog-2, and pages. Inside each of those should be an _index.html. From this Hugo will treat those folders as Sections. The blog section pages will use default list behaviour, and I can customise the /pages/ list page to behave differently (to be figured out later). I’ll also need to figure out RSS feeds later.

The /about and /contact bits I’m not sure about yet. I think I should make a folder for each of these under /content and NOT include an _index.html file. I think I should either put a index.html file for each, or maybe a named file like about.html and contact.html.

22 
hugo new _index.md
hugo new about.md
hugo new content.md
hugo new blog-1/_index.md
hugo new blog-2/_index.md
hugo new pages/_index.md

content/
├── blog-1/
│   └── _index.md
├── blog-2/
│   └── _index.md
├── pages/
│   └── _index.md
├── about.md
├── content.md
└── _index.md
1 Like