Hugo for static html pages and sass compilation

support
1

Hi! Due to a variety of reasonss I’m interested in using hugo just for simple html serving on localhost with sass support on the fly. I just want so serve almost static html pages (I don’t care about layouts, etc). I believed this will be a piece of cake… well struggling still after two hours.

Examples html files:

<!DOCTYPE html>
<html>
  <head>
    {{ $bootstrap := resources.Get "sass/vendor/bootstrap-4.2.1/bootstrap.scss" | resources.ToCSS }}
    <link rel="stylesheet" href="{{ $bootstrap.Permalink }}">
    <script src="js/vendor/jquery-3.3.1.slim.min.js"></script>
    <script src="js/vendor/bootstrap-4.2.1.min.js"></script>
    <script src="js/vendor/popper-1.14.6.min.js"></script>
  </head>
  <body>
    <h1>Hello hugo!</h1>
  </body>
</head>

I got the assets/ dir and index.html working properly but I cannot serve two simple html files in my content directory… :man_facepalming:

content/index.html
content/page2.html

I can view index.html as / but I cannot browse page2.html or /page2 no matter what I’ve tried (no luck with /page2/index.html and /page2/_index.html).

My setup is pretty simple, just assets (for sass), static (for js files) and a content directory. Tried toying with layouts but no luck.

Thanks you for your help!

=========== EDIT1===========
I’ve created a public github repo whit my basic setup https://github.com/vizcay/hugo-test .

2

You might look at this.

https://zwbetz.com/make-a-hugo-blog-from-scratch/

3

I want something 10 times simpler: just serve a second html file with my current setup, that blogpost is using layouts, markdown and other things I’m not interested.

4

Your content directory doesn’t process template code (we use shortcodes instead in content). Try moving them to layouts, following where they would be in the template lookup. For instance, layouts/index.html will render your homepage.

5

@maiki:

{{ $bootstrap := resources.Get "sass/vendor/bootstrap-4.2.1/bootstrap.scss" | resources.ToCSS }}
<link rel="stylesheet" href="{{ $bootstrap.Permalink }}">

Is working perfectly well on index.html… Is page2.html that I cannot get to serve.

6

I can’t help, there isn’t an included config, so I don’t know what your settings are. I’m sure someone will come along and figure this out. :slight_smile:

7

@maiki is right in that you should put the HTML files in layouts. Honestly, you’d probably be better off using something like lite-server on NPM if you’re only interested in a simple HTTP server and livereload with SCSS compilation…

8

@maiki… my settings are just the default ones, nothing else. If you clone the repo and start the server you will see the index page is working, but I cannot get the other one to be served.

@rdwatters maybe, but hugo is just a binary, much less complexity and a perfect fit for what I need. Anyway it looks like such a simple usage…

9

Hi,

Here’s why your set up doesn’t work:

You have content/index.html . This makes / a page bundle, specifically a leaf bundle. Which means content/page2.html is being treated as a page-type resource, which means it has no URL.

1 Like
10

@pointyfar great thanks! Now I can create other html pages and with the help of uglyurls = true browse them.

But I’ve lost the _index.html file content, when I navigate to / I just see a page that states You just made a Hugo blog from scratch..

11

So I had a look at your repo. I’m really not sure how that could work without defining your layouts. What version of Hugo are you using? I would suggest, as the others above mentioned, to move the templating code into layouts. Doing so would also make it easier to get help from others in the forum, as that is the ‘usual’ use case.

It is quite easy to do. If your pages share the same basic form, you could just have two files:

  • layouts/_default/list.html and
  • layouts/_default/single.html

Taking the example of your content/_index.html.

  • copy the contents into layouts/_default/list.html and replace everything inside the <div class="container"> with {{ .Content }}
  • in content/_index.html add empty front matter and retain only the contents of <div class="container">

Do similar for your single.html.

12

@pointyfar thanks for your reply, I’m using hugo v0.54.

I’ve moved my content/_index.html file to layouts/index.html and it worked. I don’t use layouts because I don’t need them, every file inside my contents is a complete html per se.

The only thing left is the ability to load partials: for example let’s say I have content/page2/index.hmtl and content/page2/header.html. I will like to insert header.html inside the first one by doing {{ partial "header.html" . }} but it cannot find the file (prefixing the path didn’t help also).

Any ideas how to do this inside content and not layouts?

13

You’d need to use a shortcode – place the partial code you mentioned above in the shortcode, then call the shortcode from your content.

14

@zwbetz thanks for your reply, but I want the “partial” html to be inserted to reside in the same directory… no in /layouts/shortcodes/<SHORTCODE>.html as the docs state about them.

Something more like to split big htmls into sections.

15

I see. In that case you’ll wanna grab it as a page resource