Create offline website

I’m trying to figure out a way to make a site that doesn’t need a web server or zola serve to use it comfortably. I’m able to open html files in my browser locally but when I click on the links they take me to the folder where index.html is and I then have to click on index.html to access that page. Is there an easy way to get the links to work (ie. take me to index.html instead of the folder where index.html is)?

See screenshot of what happens when I click a link.

zola build will give you a website that works offline. The browser might not do the automatic redirection to index.html that all webservers do though

1 Like

ok thanks, I used zola build to get the output I have so far and that’s exactly right the browser does not do the automatic redirection. I was wondering if there was a macro or something I could use to inject the index.html into the link. It doesn’t always go at the end like when there is a link to an anchor. I guess it’s something I could write in a function but I was just wondering if it already existed.

The Abridge theme does this with a couple options.
First set extra.uglyurls = true, then set your base_url to where the files exist on your machine:

base_url = "/home/jieiku/.dev/abridge/public/"

[extra]
uglyurls = true

Not exactly the answer your looking for but it does work apart from the search feature. (once I have a little time I will see if I can make the search work as well.)

I need to see if there is a more relative path way of doing this, because setting it to a specific path on the machine work but the site is not portable.

You can take a look at how abridge does this for your own theme if you need.

1 Like

Thanks I will try it and let you know. I’ve already set the base_url (I don’t really need it to be portable, so this works for me).

@jieiku Thank you very much. Checked out abridge and really impressive work. This is a pretty good solution for most links but it doesn’t work for internal links added in the markdown like [Test Contact Us](@/pages/contact.md). Thank you very much for your help anyway. The implementation is simple and does fix many of my links just not the internal links generated during markdown parsing.

1 Like

Found a workaround for the internal links in the markdown. Just make them relative links instead of absolute. However, there is a trade off it’s not a very reliable solution because you lose the protection that you get from zola telling you if there is a typo. If you test your link and it works and you don’t change anything then it’s “ok” but not an ideal situation.

I wonder how hard it would be to add validating relative links to zola check? @keats do you know off hand the level of effort that would be required or if that is even a desirable feature?

For my use case I don’t have many internal links in the markdown so it’s not a big concern for me.

1 Like

I’m not sure how to handle relative links validation, it could be pointing to anything that Zola might not know about.

I see, I hadn’t considered that it could be a resource that was not part of what zola generated. Do you think there would be a way to tag them as relative to another page like how we do with “@”?

I’m not sure tbh. Would want a relative pointing pointing to a URL or to a content file?

To a content file like an index.html. All other content like images already work with the ‘@’ notation so there would be no advantage to also supporting relative links for those. The only reason I need to use relative links is because I cannot directly create a link to index.html with the ‘@’ notation. It stops at the folder where index.html is and the webserver does the rest but if I’m using it locally then there is no webserver to do the rest.

index.html can refer to content/_index.md so you can use @ type links

Ok thanks for the feedback. Maybe one day I’ll give it some more thought and see if I can come up with a way to do it but for now I don’t think it’s worth it. I don’t use it enough to warrant anyone investing any material amount of time in it.

PS. Using @ type links don’t work for this use case because I need the links to end with index.html to be able to be used offline.

I have used lychee-link-checker, not sure if this is useful for you or not, but it works good.

(I have not tested it for internal links or anything exotic, just a tool I have used before.)

Thank you I’ll check it out.

Ran across this today and found it interesting, not sure how practical it is for a large blog though.

I am not sure if zola can combine multiple posts into a single document, will have to check. Also a single document site is probably not good for SEO, still a very interesting technique though.

Humm had never seen it done that way before. Interesting approach. Not particularly useful for me but still interesting.

The Abridge theme now has two ways of providing an offline website. You can use the PWA support that Abridge offers, or you can set offline = true in config.toml

The PWA method will store the entire site into cache when installed, it is a good way to make a live site also available offline.

the offline = true way will set the base_url to the file path on the system when you run

zola build && npm run abridge && zola build

Cool thanks for adding this.