How To Read Content For A URL And Render To Template

How can I read its entire contents and render in my partial templates? Specifically:

<style amp-custom>
{{- WhatFunction? "/css/bissetii-amp-1-12-4.min.css" | SafeCSS -}}

I got a static file hosted in /static directory, with the following relative URL to base URL:



  1. Need not to worry about the version numbering since there is a data processor handles them seamlessly. For simplicity sake, let’s lock it to 1-12-4.

Reason To Do This:

  1. For deploying AMP styling. AMP prohibits users to link a CSS file externally and must embed the contents inside <style amp-custom> tag.
  2. The generated CSS file is mainly for distributing the AMP CSS codes as it is for deployment outside Hugo and Go. It makes no sense to distribute a .html file since user may concat the CSS with his/her own codes.
  3. I’m working in a theme module that is also a CSS framework.
  4. Makes no sense to store the CSS artifact inside /content relative path as there are other sibling like bissetii-main-1-12-4.min.css that caters normal HTML usage using conventional link tag. All of them are stored systematically inside /static/css directory. Also, the multi-language is enabled by default.
  5. Currently, I’m able to duplicate it into /layout/partials but that means there will be duplicates, with minimum of 2 amp CSS file in the repository, per version release.

I tried ReadFile and apparently, it cannot read upper path (e.g. ../static/css/bissetii-amp-1-12-4.min.css). Also, it is relative to the project level directory and not theme level directory so it is very risky to use ReadFile.

Please help. Thanks in adv.

Place your CSS file in assets/css instead of static/css, then:

<style amp-custom>
  {{- $style := resources.Get "css/bissetii-amp-1-12-4.min.css" -}}
  {{- $style.Content | safeCSS -}}
1 Like

But how do I maintain the css availability in /css/bissetii-amp-1-12-4.min.css as a static file for download?

For your AMP pages:

  {{- $style := resources.Get "css/bissetii-amp-1-12-4.min.css" -}}
  {{- $style.Content | safeCSS -}}

For your non-AMP pages:

{{- $style := resources.Get "css/bissetii-amp-1-12-4.min.css" -}}
<link rel="stylesheet" href="{{ $style.Permalink }}">

@jmooring, thank you. I got the idea now.

Facilitating for Hugo

1st: Place all releases under assets/static/releases directory. Then, on Hugo side, one can do this:

on Hugo technology. This will facilitates the static files as such:


Facilitating Non-Hugo Environment

We can make use of the multi-static pathing in config/_default/config.toml where we include:

staticDir = [ ... , "assets/static" ]

Through this way, the static files remains available while Hugo is able to access all the resources.

Alternatively, one can also do this and it would be the recommended way.

A newer way of doing this is with mounts. See:

1 Like

Outside of topic:

  1. is this the new direction?
  2. will the existing multi static directory be deprecated somewhere in the future?

is this the new direction?

See “This is the new recommended way of configuring what you earlier put in configDir, staticDir etc.”

will the existing multi static directory be deprecated somewhere in the future?

I have no idea. There are not any related open issues on GitHub.

1 Like

Noted. Will explore somewhere in Q4 2020. This feature is useful for both Hugo sites and theme module hosted in same repository (the first patient: data/ directory).

For now, I will keep the solution first (mainly because I tested it).

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