Hugo from scratch (getting started guide)

tips & tricks
1

I have created a new ‘getting started guide’ for those who are having a hard time starting with Hugo.

If you have improvements, just let me know! I add more lessons in the next few months. I will start with some basic lessons about shortcodes and list pages and then some more advanced ones about image resizing, form handling, etc. Let me know what you think!

6 Likes
2

Great work @jhvanderschee

It’s simple to follow and engaging, making learning enjoyable.

1 Like
3

@pitifi9191 Thank you! Great to hear that!

4
  1. The Quick Start | Hugo cuts this work by half with different files that a user can study instead of doing all this.
  2. Using baseof.html cuts down the need to rewrite complete layout files.
  3. Again, the first two blocks are unnecessary with Quick Start | Hugo.
  4. Ditto as point one for this.
  5. Overall, when learning Hugo, I found starting off explaining/understanding things after running the Quick Start as a way to better understand the workings of Hugo. Your tutorial is basic, but I find it partially outdated with the current way of doing things in Hugo.
1 Like
5

@tut I like the original Quick Start too. However, got tired of students not understanding the basics of Hugo, which is why I created this starter. Something like hugo new site quickstart is a magic trick. I wanted them to write every file by hand, while keeping the complexity to an absolute minimum. I want my students to truly understand Hugo. It might not work for you and that is fine.

You write:

Using baseof.html cuts down the need to rewrite complete layout files

… and you are right. However, this can only be done at the cost of complexity. The beauty of Hugo is that you can make these choices. If you like nested layouts… you should use them. If you don’t, don’t. My goal was not to make my tutorial as short as possible. The only thing I was after was a true understanding of the basics (and power) of Hugo.

PS. If you see anything outdated… please let me know. :wink:

6

You have to assume that, in the world of Hugo, and echoing a past comment by @davidsneighbour, everything beyond six months is outdated! I think the confusion with your tutorial is trying to mix learning HTML and Hugo, while there are better and standardized ways to do it, a la the quick start guide.

Btw, when I was with Jekyll, I found your tutorials better! But these Hugo ones need some love.

7

Thank you.

To clearify: I will never reference a file you did not create yourself earlier in the tutorial. Nor will I use commands that magically create files for you. I never have… not with Jekyll, not with Hugo.

I did not change my approach… I think you changed. I think you have grown to be a better programmer with a better understanding of the basic concepts of an SSG. This makes you more likely to (want to) use shortcuts, like the ones you mention (and are referenced in the Quick Start).

If you want to learn more about the philosophy behind my (tedious, slow and perhaps outdated) approach, you can read The Stackless Way | Usecue web development. It will give you some insight in my choices and ways of thinking and teaching.

My tutorial is written ‘for those who are having a hard time starting with Hugo’, not for those who want to get started quickly (hence the different title).

8

Just to make it clear, I am not a programmer, just a DIY person who knows the basic stuff when needed to make my site. Again, I understand your approach, but I would not recommend some of it to a beginner. I was a beginner myself about 4-5 months ago, and I know basic HTML and CSS, creating a blank theme with hugo new theme theme-name then studying the blank files created in the theme helped me understand Hugo’s basic structure, where your tutorial leaves out such files as list.html and single.html. Anyways, to each their own.

1 Like
9

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