Hugo
Netlify

Netlifyの_redirectsと_headersをHugoで生成する

More than 1 year has passed since last update.

Netlifyの_redirectsと_headersをHugoで生成する

概要

HTTP/2 Server Push in Hugoを参考に、_redirectsファイルと_headersファイルをHugoで生成する方法を試してみた

_redirectsとは

  • Netlifyでは、_redirectsファイルにredirectとrewriteを設定できる
  • 詳細は、Redirect & Rewrite Rules を参照すること
  • Netlify's playgroundで試し書きや文法チェックをすることができる
  • 記述例

    _redirects
    # Redirect with a 301
    /home         /              301
    
    # Redirect with a 302
    /my-redirect  /              302
    
    # Rewrite a path
    /pass-through /index.html    200
    
    # Show a custom 404 for this path
    /*            /404.html      404
    

_headersとは

  • Netlifyでは、_headersファイルにHTTPヘッダを設定することができる
  • 詳細は、Headers & Basic Authentication を参照すること
  • Netlify's playgroundで試し書きや文法チェックをすることができる
  • 記述例

    _headers
    /*
      X-Frame-Options: DENY
      X-XSS-Protection: 1; mode=block
      X-Content-Type-Options: nosniff
      Referrer-Policy: origin-when-cross-origin
    
      Link: </css/style.css>; rel=preload; as=stylesheet
      Link: </js/main.js>; rel=preload; as=script
      Link: </images/image.jpg>; rel=preload; as=image
    

手順1:config.tomlを設定する

config.tomlに以下の設定を追加する

config.toml
[outputs]
home = [ "HTML", "RSS", "REDIRECTS", "HEADERS" ]

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

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

手順2:_headersのテンプレートを作成する

テンプレートファイルをlayouts/index.headersに作成する

記述例

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

手順3:_redirectsのテンプレートを作成する

テンプレートファイルをlayouts/index.redirectsに作成する

記述例

layouts/index.redirects
/*            /404.html      404
/news/*       /blog/:splat

手順4:ローカル環境でビルドする

ローカル環境でビルドし、思惑どおりに_headersファイルと_redirectsファイルが生成されていることを確かめる

手順5:deploy

省略

手順6:動作確認

curlなどでHTTPヘッダなどが思惑どおりに出力されることなどを確かめる

$ curl --http2 -I https://example.netlify.com/

以上