Very simple "Hello World!" web site

support
1

Hello,
I learned JS for 9 months and got recommend hugo.
Unfortunately am I failing in understanding the very basics:
How to create single page website, with HTML/CSS/JS?

HTML would be <p Hello World!</p //HTML is enabled, had to hide the closing tags
CSS: .p { color: red; }
JS: console.log(‘js working’)

I understand the directory structure, installing and creating new pages with themes and creating sub sites.

Q: Can hugo work without a template?

Next I want to understand templates. site.com and site.com/test should have the same navbar.
Q: Can you link me a tutorial or very simple template, so I can understand how templates work?
I tried to read the documentation but got confused very fast, because I lacking the very basics.

Thank you.

2

A basic setup would be something like the following.

A homepage content file at content/_index.md

---
title: Home
---

Some content here.

A super-slim homepage template file at layouts/index.html

<html>
  <head>
    <style>
      // your CSS here
    </style>
    <title>{{ .Title }}</title>
  </head>
  <body>
    <h1>{{ .Title }}</h1>
    {{ .Content }}
    <script>
      // your JS here
    </script>
  </body>
</html>

As for tutorials, checkout the Hugo Tutorials section of Recommended Reading Reference

Good luck :slight_smile:

1 Like
3

Thank you @zwbetz , allow me few follow up questions:
{{ .Title }} is predefined variable, which equals to “Home”, where is the variable defined?
Can’t find “Home” anywhere in the whole directory.

Where do you hugo developer place CSS/JS files? One theme had them in static folder.

EDIT: Do I have to use a theme? Can a hugo site be built without? If yes, where do I put the partials folder, which many themes have?

EDIT2: Installed theme which was created by myself, is just coping content of theme folde into new-hugo-site folder?
Same happens if we download it from github, right?
git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke
And at the end echo ‘theme = “nameOfMyTheme”’ >> config.toml

4

Sure, so .Title is defined in your content file (the _index.md file above). If you wanted to reference your site title which is defined in your site config file, you’d use site.Title

Yep, placing them in static dir is one option. The other option is placing them in assets dir, which allows use of Hugo Pipes. Considering you just spent months learning JS, I think you will find Hugo Pipes impressive. Read more at https://gohugo.io/hugo-pipes/

Nope. You don’t need to use a theme. You can put your templates directly under your layouts dir. which is where your partials go too.

Also I’d definitely checkout those tutorials I linked previously.

1 Like
5

Yes Sir I diffidently will, I am just in experimenting/curious mood.
Thanks again.

6

A post was split to a new topic: How do you define .Title?