hugo/content/news/http2-server-push-in-hugo.md
Bjørn Erik Pedersen 7d63a23b0c Squashed 'docs/' changes from f887bd7b..1d052b16
1d052b16 Update hosting-on-netlify.md
28b96bec Remove double brackets in Netlify hosting tutorial
373ed38b Update deployment instructions from hugo > 0.20 on Netlify
1bbb41ca Generate static assets on deploy in Nanobox tutorial
816d207f Add missing backtick in templates/views.md
bf88e772 Add nanobox as a deployment option
9c37b4cc Change config's syntax order matching description
d3cb05a7 Fix wrongly named default value of publishDir
4be85c54 Add link to showcase a theme setup via config file
46837195 Init and update of submodules in .gitlab-ci.yml
9e7c2827 Add CSS lang argument to code block
85aad56e Abstract the type in the lookup order
4e1e43e9 Fix broken Pygments url
65b4e79b Correct GitLab project pipelines URL
94af72b5 Fix .Data.Terms usage in taxonomy template example
eb371e52 functions: Fix lang.NumFmt docs
a745cd6c Fix layouts' folder name in template primer
e181e637 Correct typo on GitHub pages guide (#151)
28698500 Remove HTML special chars from Windows install example
96b1f5b5 Remove not needed escape slashes in urls.md
2e05043f Add upgrade instructions using homebrew
2a14624d Fix alias in countrunes.md
5e26bb97 Update docker image for build/publish
01424887 List the internal templates
a3ef5be9 Remove string concatenation from add (math) sample
43d12b44 Fix typo
89bafa49 Change to Asciidoc URI
4e14071e Removes an extra bracket (>) in single-page-templates.md
0938e423 Fix typo in http2 server push blog
fac55121 Fix typo in deployment with rsync tutorial

git-subtree-dir: docs
git-subtree-split: 1d052b16a1290ada12f1e28c7c0c373f86741071
2017-09-05 18:09:40 +02:00

2.6 KiB

title date description categories slug aliases author images
HTTP/2 Server Push in Hugo 2017-07-24T18:36:00+02:00 As every page in Hugo can be output to multiple formats, it is easy to create Netlify's _redirects and _headers files on the fly.
blog
http2-server-push-in-hugo
bep
images/gohugoio-card-1.png

Netlify recently announced support for HTTP/2 server push, and we have now added it to the gohugo.io sites for the main CSS and JS bundles, along with server-side 301 redirect support.

If you navigate to https://gohugo.io and look in the Chrome developer network console, you should now see Push as the new source ("Initiator") for the CSS and JSS:

{{< figure src="/images/blog/hugo-http2-push.png" caption="Network log for https://gohugo.io" >}}

Setting up this in Hugo was easy:

1. Configure Netlify Output Formats

Add a new custom media type and two new output formats to config.toml. For more on output formats in Hugo, see Custom Output Formats.

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

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

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

2. Add Template For the _headers File

Add layouts/index.headers:

/*
  X-Frame-Options: DENY
  X-XSS-Protection: 1; mode=block
  X-Content-Type-Options: nosniff
  Referrer-Policy: origin-when-cross-origin
*/
  Link: <{{ "dist/app.bundle.js" | relURL }}>; rel=preload; as=script
  Link: <{{ "dist/main.css" | relURL }}>; rel=preload; as=style

The template above creates both a security header definition and a HTTP/2 server push configuration.

Also note that this is a template for the home page, so the full Page with its Site and many variables are available. You can also use partial to include other templates.

3. Add Template For the _redirects File

Add layouts/index.redir:

# Netlify redirects. See https://www.netlify.com/docs/redirects/
{{  range $p := .Site.Pages -}}
{{ range .Aliases }}
{{  . | printf "%-35s" }}	{{ $p.RelPermalink -}}
{{ end -}}
{{- end -}}

The template above creates 301 redirects for your aliases, so you will probably want to turn off aliases in your config.toml: disableAliases = true.