Managing Hugo blog sites with PDF documents, images, videos

Hi everyone,

I recently rebuilt my blog in Hugo and I’m hosting my site on github pages. My git repo is starting to get large mainly due to all the PDF files that are included. This is leading me to rethink my workflow. I want to keep the site content under version control and it seems that if I want to prevent the repo size from getting out of control, I’ll need to keep the assets elsewhere. I experimented briefly with git lfs but then later read that github pages does not support git lfs. So I’m looking for alternative strategies. Any suggestions you all can provide would be greatly appreciated!

Chris

I am afraid that moving assets outside git is the only way to go.

A while back I opened a topic, motivated by similar concerns like yours, about moving a project from git to a Rsync workflow and some suggestions regarding hosting providers, were made over here

However I admit that I still haven’t taken the time to test these recommendations.

1 Like

Thanks so much @alexandros. Appreciate the feedback!

I have some big panorama pictures in my web site. The panaroma tiles are not inluded in git. I uploaded it to a different directory and linked this directory inside my hugo public tree. Don’t forget to include this in .gitignore and create the same link on the server.

Roger that. Some of the complexity in my process comes from using github pages to serve the website. This is reminding me to think about alternatives outside of github pages as well.

So I’ve found an appealing way to host the blog site assets externally which has raised another question. I’m using textile.io to host all the PDF files I’ve got in IPFS. Now I’ve got a very long URL that points to this bucket. Is there a mechanism in Hugo by which I could redirect <blog site domain>/publications/assets to the IPFS bucket URL? If that is doable, then I think I’ve got an elegant overall solution. The reading I’ve done on Hugo URL aliases doesn’t seem to suggest there is a path to this outcome.

You would need to move your site from GitHub Pages because you would need to use server side redirects.

Hugo can be used to write a Custom Output Format for Redirects and then use it either in a server or with a service like Netlify that provides access to server side redirects.

The following is the setup currently in use at the Hugo Docs repo:

Definition of the REDIR Custom Output Format meant for Netlify Server Side Redirects

[outputs]
home = [ "HTML", "RSS", "REDIR", "HEADERS" ]
section = [ "HTML", "RSS"]

[mediaTypes]
[mediaTypes."text/netlify"]
delimiter = ""

[outputFormats]
[outputFormats.REDIR]
mediatype = "text/netlify"
baseName = "_redirects"
isPlainText = true
notAlternative = true

Template of the REDIR Custom Output Format meant for Netlify Server Side Redirects

{{  range $p := .Site.Pages -}}
{{ range .Aliases }}
{{  . | printf "%-35s" }}	{{ $p.RelPermalink -}}
{{ end -}}
{{- end -}}

Also see the Netlify documentation for Server Side Redirects


If you manage to make this work, please share the way you setup a bucket in textile.io and if the server side redirects worked.

Assets management is a bit of a headache in Hugo projects, because at some point these files have to be moved outside version control, so I am always open to a new approach.

1 Like

Thanks so much @alexandros. I absolutely will share any solution I come up with. Your response got me thinking that the simplest solution might be to push everything to IPFS and host the site there. I’ll circle back with a detailed solution if this works out.

@alexandros so after going down a deep rabbit hole on deploying websites to IPFS, I’m backing up a bit to a suitable solution that doesn’t involve going that far. one question I have that I suspect you know the answer to is the following. let’s assume all our website assets are now available at <ipfs_bucket_url>. this URL is quite long due to the hash that is embedded. in order to avoid enumerating that URL over and over, is there a way that one can specify potentially a site wide alias for the URL so that in each Markdown file where URLs are specified to assets in the bucket, one can simply prepend the alias for the bucket URL to the asset URL? once I have an answer to that, I’m ready to put all the pieces together, test it, and write it up.

Try to see if you can mount the bucket through Hugo Modules.

At first glance at the docs, this looks like it is functionality for managing Hugo themes. It’s not clear to me how to leverage this.

After exploring a number of potential solutions, I have found a very simple approach thanks to the folks at Fleek. The Fleek platform is specifically designed to deploy websites to IPFS. With your site under version control in Github, a push to the repo will launch a deployment process that rebuilds the site with Hugo and deploys it to IPFS. So simple. For large assets that you do not want to keep in git, such as videos, you can upload those to IPFS using Fleek Storage and link to those assets in your site. I tried using git lfs to keep the videos in the repo as well but that did not work with Fleek. I’ve been very pleased with the process to date.

1 Like

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.