How to build a site for offline local use (without server)

1

Hi,

I have built my website also for offline use on a local file system (use without a server).

The following is a summary of my experience and I hope it will be useful for other HUGO users. Please keep in mind that I am HUGO beginner and, most likely, my summary is far from being perfect.

This is a repo link of my Hugo project

.

  1. The following two settings have to be used in the config.toml file.
 uglyURLs = "true"

 relativeURLs = "true"

.

  1. The config.toml file is very sensitive. It really depends where the variables are placed.
    .

This version did not work.

[markup]

[markup.goldmark]

     [markup.goldmark.renderer]

          unsafe = true

          xhtml = false

uglyURLs = “true”

relativeURLs = “true”

.
This version worked.

uglyURLs = “true”

relativeURLs = “true”

[markup]

  [markup.goldmark]

       [markup.goldmark.renderer]

          unsafe = true

          xhtml = false

.
.
3. I wanted to use the uglyURLs and, therefore, I had to append “.html“ to my links.

<a class=“menu-item” href=“{{ “uvod.html” | relURL }}”>ÚVOD

.
.
4. The relURL function works very well.

< link rel=“stylesheet” href=“{{ “css/pages-style.css” | relURL }}” >

After running the “hugo“ command, it translates like this in the public folder.
.
R - Root
1- 1 level up
2 - 2 levels up

R: < link rel=“stylesheet” href=“./css/pages-style.css”>
1: < link rel=“stylesheet” href=“…/css/pages-style.css”>
2: < link rel=“stylesheet” href=“…/…/css/pages-style.css”>

That was execlty what I needed.
.
.
5. I had unexpected results with relURL in the CSS url () function.

< div style=“background-image:url(’ {{“images/placeholder.jpg” | relURL }} ')”>

After running the “hugo“ command, it translates like this in the public folder.

R: < div style=“background-image:url(’ /images/placeholder.jpg ')”>
1: < div style=“background-image:url(’ /images/placeholder.jpg ')”>
2: < div style=“background-image:url(’ /images/placeholder.jpg ')”>

Instead, I would expect this:

R: < div style=“background-image:url(’ ./images/placeholder.jpg ')”>
1: < div style=“background-image:url(’ …/images/placeholder.jpg ')”>
2: < div style=“background-image:url(’ …/…/images/placeholder.jpg ')”>

Eventually, I had to use the < img > tag. It worked as I wanted.

R: < img src=“./images/pandita-logo.png” class=“pandita-logo”/>
1: < img src=“…/images/pandita-logo.png” class=“pandita-logo”/>
2: < img src=“…/…/images/pandita-logo.png” class=“pandita-logo”/>

In fact, I was not the first one who encountered this mystery. @Ianare described it in his post too: relURL not always outputing URL

If anyone knows why is this happening, I would be interested to know. It seems like the relativeURLs variable is not effective inside the url () function.

That is it. It took me a few days to learn all this. I hope this summary will make everything easier for others.

To: @SteffenPL @ianare

P.S. I am sorry for the three dots in the links above. It seems that there is a bug in Discourse. When I used two dots in a row, discourse automatically writes three dots. This is two dots: … :smiley:

2

It’s not a bug.

If you intend to post code, you should use the appropriate Markdown markup [reference] or use the code button:

Screenshot_20210921_122610

```html
<div style="background-image:url(’./images/placeholder.jpg')">
<div style="background-image:url(’../images/placeholder.jpg')">
<div style="background-image:url(’../../images/placeholder.jpg')">
```

Which will look like this:

<div style="background-image:url(’./images/placeholder.jpg')">
<div style="background-image:url(’../images/placeholder.jpg')">
<div style="background-image:url(’../../images/placeholder.jpg')">

Also, I believe the code is clear enough to not need the R, 1 and 2 prefixes.

1 Like
3

Alfredo, Thank you very much for your time and explanation. Now I know, it is not bug.


These are two dots: ..

:slightly_smiling_face: