# HTTP2 preload directive for fingerprinted asset in .htaccess

**URL:** <https://discourse.gohugo.io/t/http2-preload-directive-for-fingerprinted-asset-in-htaccess/17462>\
**Category:** tips & tricks\
**Created:** [March 8, 2019, 7:26pm UTC](https://discourse.gohugo.io/t/http2-preload-directive-for-fingerprinted-asset-in-htaccess/17462 "2019-03-08T19:26:28Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![notanoob](https://avatars.discourse-cdn.com/v4/letter/n/c68b51/32.png) [@notanoob](https://discourse.gohugo.io/u/notanoob)\
**Post date:** [March 8, 2019, 7:26pm UTC](https://discourse.gohugo.io/t/http2-preload-directive-for-fingerprinted-asset-in-htaccess/17462/1 "2019-03-08T19:26:28Z")

</div>

I want to put an .htaccess file in my asset pipeline so I can put HTTP2 preload directives in there for server push.

Basically, I need my fingerprinted asset variables {{…main.css | fingerprint… }} to resolve inside the .htaccess file otherwise I have to manually set them each time the asset is changed.

I just started with Hugo last month but, from the looks of it, this looks like something the asset pipeline was not designed for.

Thanks.

---

<div class="post-metadata">

**Author:** ![zwbetz](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/zwbetz/32/16088_2.png) [@zwbetz](https://discourse.gohugo.io/u/zwbetz)\
**Post date:** [March 8, 2019, 7:34pm UTC](https://discourse.gohugo.io/t/http2-preload-directive-for-fingerprinted-asset-in-htaccess/17462/2 "2019-03-08T19:34:28Z")

</div>

> [@notanoob](#):
>
> I want to put an .htaccess file in my asset pipeline so I can put HTTP2 preload directives in there for server push.

You could place your `.htaccess` in the `static` folder and it’ll be copied to your site root.

> [@notanoob](#):
>
> Basically, I need my fingerprinted asset variables {{…main.css | fingerprint… }} to resolve inside the .htaccess file otherwise I have to manually set them each time the asset is changed.

Explain more what you’re trying to do here. An example would be helpful.

---

<div class="post-metadata">

**Author:** ![notanoob](https://avatars.discourse-cdn.com/v4/letter/n/c68b51/32.png) [@notanoob](https://discourse.gohugo.io/u/notanoob)\
**Post date:** [March 8, 2019, 7:44pm UTC](https://discourse.gohugo.io/t/http2-preload-directive-for-fingerprinted-asset-in-htaccess/17462/3 "2019-03-08T19:44:43Z")

</div>

In my .htaccess, I want an HTTP2 server push preload directive, i.e.,

> \<FilesMatch “index.html”\>  
> Header set Link “\<main.min.jdfsuf90jsfkasf90839kfsdfi0sif.css\>; rel=preload; as=style”  
> \< / FilesMatch\>

When the fingerprinted asset is changed in my asset pipeline, I want its fingerprinted name to be updated in my .htaccess file. For this, I need to be able to specify a {{ }} inside my .htaccess file. I tried 2-3 hacks to get Hugo to do this for me, including putting the .htaccess in my assets folder and calling resources.\* on it, but was unsuccessful.

Is this possible? If not, I will have to resort to an external script.

---

<div class="post-metadata">

**Author:** ![zwbetz](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/zwbetz/32/16088_2.png) [@zwbetz](https://discourse.gohugo.io/u/zwbetz)\
**Post date:** [March 8, 2019, 7:54pm UTC](https://discourse.gohugo.io/t/http2-preload-directive-for-fingerprinted-asset-in-htaccess/17462/4 "2019-03-08T19:54:22Z")

</div>

I see. Yeah this is not possible, as far as I know. You’ll have to reset to external script as you mentioned.

---

<div class="post-metadata">

**Author:** ![notanoob](https://avatars.discourse-cdn.com/v4/letter/n/c68b51/32.png) [@notanoob](https://discourse.gohugo.io/u/notanoob)\
**Post date:** [March 8, 2019, 11:41pm UTC](https://discourse.gohugo.io/t/http2-preload-directive-for-fingerprinted-asset-in-htaccess/17462/5 "2019-03-08T23:41:36Z")

</div>

Thanks for the quick replies.

After some more hack-hackiness, I figured out that my original method of calling resources.\* works, specifically resources.ExecuteAsTemplate. I had just messed up the syntax a bit on my first attempts and assumed Hugo couldn’t do it.

For anyone else who wants to do this:

1. Put .htaccess in assets folder
2. Call resources.ExecuteAsTemplate on the .htaccess file (from anywhere)
3. Call .RelPermalink on that resource (from anywhere) so Hugo actually puts it into public. I do this in an HTML comments tag \< !-- – \>, which I strip out with minify, i.e., it never shows up in source.

---

<div class="post-metadata">

**Author:** ![notanoob](https://avatars.discourse-cdn.com/v4/letter/n/c68b51/32.png) [@notanoob](https://discourse.gohugo.io/u/notanoob)\
**Post date:** [March 10, 2019, 7:37pm UTC](https://discourse.gohugo.io/t/http2-preload-directive-for-fingerprinted-asset-in-htaccess/17462/7 "2019-03-10T19:37:22Z")

</div>

Still in the design stage. First time building a site in years, so I am following HTTP2/HTML5 best practices from the get-go. So glad I happened upon Hugo!

From all I’ve read (including performance analyses for mobile/desktop):

1. Pushing only critical CSS will definitely improve speed, rendering faster (generally) than inlining that same CSS.
2. For other critical things, you need to measure to see how/if push helps. For example, if you push everything or even too many things, render becomes slower (generally) not faster.

This is where the “nopush” directive for preload comes in. Critical assets will definitely benefit from declaring them in the header, even if you don’t push them. The browser will request them (and likely get them) faster. At the very least, everyone should be doing this even if they are not performance nuts like me!

---

<div class="post-metadata">

**Author:** ![Polarhardboiled](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/polarhardboiled/32/22623_2.png) [@Polarhardboiled](https://discourse.gohugo.io/u/Polarhardboiled)\
**Post date:** [February 1, 2020, 2:03pm UTC](https://discourse.gohugo.io/t/http2-preload-directive-for-fingerprinted-asset-in-htaccess/17462/9 "2020-02-01T14:03:12Z")

</div>

Hi,  
I have the same issue.  
Would you mind detail your solution as I am not a coder and not very familiar with the syntax ?  
A detailed coding example would be very helpful.  
Thanks in advance

---

<div class="post-metadata">

**Author:** ![notanoob](https://avatars.discourse-cdn.com/v4/letter/n/c68b51/32.png) [@notanoob](https://discourse.gohugo.io/u/notanoob)\
**Post date:** [February 18, 2020, 12:19am UTC](https://discourse.gohugo.io/t/http2-preload-directive-for-fingerprinted-asset-in-htaccess/17462/10 "2020-02-18T00:19:22Z")

</div>

I’ll clarify further:

1. Put your .htaccess file in the top-level “assets” folder (Hugo doesn’t create the “assets” folder by default, so create it if it’s not there).
2. In index.html (or any .html file), call resources.ExecuteAsTemplate on the .htaccess file like so:

> {{ $h := “.htaccess” }}  
> {{ $h2 := resources.Get $h | resources.ExecuteAsTemplate $h . }}

1. Call .RelPermalink on that resource so Hugo actually puts it into public. If you do this in an HTML comments tag \< !-- – \> and later strip it out with minify (use the --minify flag on build, i.e., “hugo --minify”) so it doesn’t show up in source. You can do this lik so:

> \< !-- {{- $h2.RelPermalink -}} → (This is a regular HTML comment tag, but the forum isn’t letting me post it correctly. Remove the space between the first \< and ! to make it work…)