Two kinds of pages in one site?

support
1

I have a simple reveal-hugo site which is mostly RevealJS presentations. It works well enough, though getting it going was a lot of trial and error.

The site also has a second kind of page which is longer form text rather than presentation slides. Currently I cheat and just put bare html files in /static, which is fine, but I’d like to use markdown.

I have tried reading the doc, and looking for examples, and I know git, css, html, and commandline, but I am still struggling to figure out how to have two kinds of pages in one site. This is probably trivial for people who understand Hugo and its conventions, but for the rest of us, it’s quite a challenge.

To demonstrate my problem, I first created a new site following https://github.com/dzello/reveal-hugo/blob/master/README.md to the letter:

$ hugo new site hugo-demo
$ cd hugo-demo
$ git init
$ git add *
$ git commit -m "new site"
$ git submodule add https://github.com/dzello/reveal-hugo.git themes/reveal-hugo
$ cat >> config.toml <<_EOF_
theme = "reveal-hugo"

[outputFormats.Reveal]
baseName = "index"
mediaType = "text/html"
isHTML = true
_EOF_
$ cat > content/_index.md << _EOF_
+++
title = "My presentation"
outputs = ["Reveal"]
+++

# Hello world!

This is my first slide.
_EOF_
$ hugo

This worked fine with the hugo 0.47 in Ubuntu 18.10. (Ubuntu 18.04’s hugo is too old.)

Then to demostrate what I’m trying and failing to do, I then created a plain markdown page:

$ cat > content/more-info.md <<_EOF_
# More Info

Just a long-form page of text, no reveal, please.
_EOF_
$ hugo

That caused more-info to be listed in the sitemap, but didn’t actually generate a page for it.

(I pushed the result to https://github.com/dankegel/hugo-demo in case that’s easier to look at.)

What’s the secret sauce I’m missing to get more-info.md to be expanded from plain old markdown to plain old HTML, without any RevealJS magic?

2

You don’t have any templates producing HTML output for your site. All the templates at https://github.com/dzello/reveal-hugo/tree/94ecfecd22338feb7e1a032367b858d241044574/layouts/_default are for the reveal type.

If you put a template at layouts/_default/single.html, it will produce the output you want. :slight_smile:

1 Like
3

Thank you. That didn’t quite work. I tried using the example one at https://gohugo.io/templates/single-page-templates/, but the generated public/more-info/index.html is empty. Same with the example at https://gohugo.io/templates/base/

I pushed what I’m using to https://github.com/dankegel/hugo-demo so you can see what I’m trying.

4

You should read all the docs about templates, if you want to understand. You don’t need anything in the template. So the simplest is whatever you put in. The example in that doc assumes one uses base templates, which are a good idea. But I’m only solving one issue at a time here. If you want to see the template produce something, trying putting {{ .Content }} and see what happens. Then build from there.

Additionally, you should be loading the reveal theme and your regular content theme as components. More docs to read. You will need to know all these things to set up Hugo as you want it.

5

For tutorials and tips n tricks outside the docs, checkout:

6

Without a minimal example that works, it’s hard to interpret the doc.

You wrote “If you want to see the template produce something, trying putting {{ .Content }}”. I did, but the output is still empty.

You wrote “The example in that doc assumes one uses base templates, which are a good idea”, so I looked at https://gohugo.io/templates/base. That was interesting, and did have a simpler example, but didn’t really get me any further.

I’ve been reading. It’s a tough slog, since the doc seems to assume quite a lot of knowlege beyond basic HTML, CSS, shell, and go templating, and much of it gives too much detail and yet not enough.

Could you try running https://github.com/dankegel/hugo-demo through hugo, tweaking it until public/more-info/index.html actually contains some output, and let me know where I screwed up?

Several people have asked similar questions, and I suspect having
a working minimal example would be helpful for others like me.

I did look at the “hugo tutorials” section of the recommended reading page, and the awesome hugo list, but it’s a giant sea of non-minimal examples… what I’m looking for is something very basic.

1 Like
7

One thing I noticed is, your more-info markdown file has no frontmatter. I think you may at least need the frontmatter delimiters?

https://raw.githubusercontent.com/dankegel/hugo-demo/master/content/more-info.md

1 Like
8

Hugo has a learning curve. Additionally, you have a more advanced setup than most folks building their first site.

If you can’t figure out how to render your own templates, you could use another theme and load them both as components. The way the Reveal theme structured, I believe it is meant to be used that way.

9

Tried adding front matter in more-info.md, didn’t change anything.

If somebody who actually understands how Hugo works
could fix this minimal example, I’d be eternally grateful.

Suggestions like “Use components!” are a bit too vague. The problem here is Hugo’s learning curve, and its fragility. A working minimal example here would be a great candidate to add to the doc.

10

Editing your layouts/_default/single.html to be:

<h1>{{ .Title }}</h1>
{{ .Content }}

Will allow you to view that single page at http://localhost:1313/more-info/. But it will only be plain HTML.

Now, notice the {{ define "main" }} related code is gone… including these lines allows you to use the base template (and all of its associated styles and scripts) of the reveal-hugo theme, but it also ties you to the theme’s design.

11

Hi,

A few notes and suggestions:

  1. If you want to understand how Hugo works, there is really no substitute to reading the Hugo docs top to bottom. Multiple times.

hugo 0.47 in Ubuntu 18.10

  1. You might want to consider updating your Hugo to the latest version. The docs will have instructions on where to get the latest. Some of the code samples in the docs (like this one here for example) use features introduced in 0.48+.

  2. The reveal theme you are using has instructions for how to use it with an existing site. If you want to mix reveal slides alongside ‘regular’ html content, this is probably what you will need to do. I have personally successfully used these same instructions on a private site, so I know they work.

Now to my suggestions:

  1. Create a ‘regular’ Hugo site. The Quickstart is a good staring point. If you don’t want to use an existing theme, you need to read about templates. Then see how that works for you for your non-reveal content.

  2. Once you are happy with that, follow the instructions (that I linked to above) for how to mix reveal with a regular Hugo theme. Once you are in this stage, some docs pages that would be of particular help for you are:

1 Like
13

Good idea. https://github.com/arocks/minimal-hugo looks like a good starting point. (I had tried looking for a minimal “hello, hugo” example, but didn’t find this one until just now.)

14

Hope this helps:

https://discourse.gohugo.io/t/my-experiences-with-hugos-template-lookup-order/9959/3

1 Like
15

Victory!


now takes Arun’s bare markdown demo from
https://arunrocks.com/minimal-hugo-site-tutorial and adds a reveal-hugo presentation and bare markdown section.

The last mystery was why the bare markdown section wasn’t generating any html file; after reading
https://www.jakewiesler.com/blog/hugo-directory-structure/ I understood how Hugo works better, added themes/bare/layouts/_default/list.html, and all was well.

Thanks for all the hints!

1 Like
17

Thanks for your minimal example. Having published a minimal Staticman example myself, I agree with you that a simple example really helps understand stuff.

theme = ["bare", "reveal-hugo"]

Your line does the trick of adding another theme “as components”.

"If you can't explain it simply, you don't understand it well enough" — Albert Einstein

18

You quoted what I said, and then included an image of a quote. I don’t understand the correlation, please explain.

19

My message is intended as a reply to @dankegel. There’s no correlation between your quote and the one in the image. I should have better arranged the stuff.

Not used to having two concurrent themes, I’ve made a quote of your message so as to give a quick reference what that’s for.

Another quote in the picture corresponds to

A minimal example that @dankegel asked for might serve as a simple explanation for relevant concepts in the doc, and I found his/her comment fair enough.

I did follow your advice and spent hours climbing the steep learning curve today. However, I don’t think reading without practicing would bring a new user much further, and forking and playing with @dankegel’s minimal example fills the gap.

Btw, the documentation is still in progress.