[ 目次 ]

• はじめに
• 結論
• Nuxt.jsで404ページを用意する
• 404エラーページ
• 最後に
• 参考記事

はじめに

こんにちは、香港に住んでいるWEBデベロッパーのなかむ（@nakanakamu0828）です。

Netlifyのデフォルトの404エラーページが表示されていたので、今回はNetlifyで運用しているブログの404ページを作成していきます。

結論

Netlifyでは、404.htmlをドキュメントルートに配置すれカスタマイズした404エラーページが表示されます。

Nuxt.jsで404ページを用意する

pagesディレクトリに、404.vueを作成することでgenerate後に404.htmlを生成します。
ヘッダー/フッダーは他のページと同じ構成にするので、今回はエラーページ用にlayoutを作成したりしません。

Nuxt.jsのエラーページ作成方法は、Nuxt.js公式ドキュメントの

https://ja.nuxtjs.org/guide/views/

こちらのページにも記載があります。
今回の404.vueは以下のようにしました。

<template>
  <main class="container">
    <section class="section has-text-centered">
        <img src="~/assets/img/icon-broken-link-512.png" class="broken-link">
        <h1 class="title is-1 m-t-50">４０４</h1>
        <p class="subtitle has-text-grey m-t-30">
            指定されたページが見つかりませんでした。<br>
            既に削除されたか、URLが間違っている可能性があります。
        </p>
        <div class="columns has-text-centered m-t-30">
          <div class="column">
              <router-link to="/" class="button is-primary is-rounded is-large">
                トップページに戻る
              </router-link>
            </div>
        </div>
    </section>
  </main>
</template>

<style lang="scss" scoped>
.broken-link {
    width: 10rem;
}
</style>

404エラーページ

最後に

とても簡単な内容でしたね。皆さんもサクッと404エラーページを作れますね。

参考記事

• GitHub Pages や Netlify で、404 ページを自分で用意する