【Astro/SSG】Astroでの404 Not Found. 作成 さくらのレンタルサーバー、意外な罠? javascript展開 localization.

umi Camera: Vintage Film Retro | iPhone Free app

umi Camera is a film-style camera app that lets you take retro photos with live filters. All effects are applied at the moment of shooting — no editing needed. ...

umi.grtlab.com

さくらのレンタルサーバーに置いています。

404を自分の表示にしたいなと

さくらのレンタルサーバーに404を設置

独自ドメインで、サブディレクトリに設置している

/home/myname/www がトップのwebディレクトリ

/home/myname/www/myweb 今回独自ドメインを設定しているディレクトリ

1. .htaccessを設置

/home/myname/www/myweb/.htaccess を作成

ErrorDocument 404 /404.html

内容はこれだけです！ 404のとき404.htmlを見るというだけです。他の名前でもOK

home/myname/www/myweb/404.html　を作成

umi Camera : 404 Not Found.<br>
<a href="https://umi.grtlab.com">umi.grtlab.com</a>

とりあえず今回はこれだけ。

Astroで404.htmlを生成

単純な表示は

src/pages/404.astro

で生成すると 404.html が生成されます。

configに設定している localesやdefaultLangを処理資料とすると
今回は、自動振り分けできないので javascriptで振り分けしています。

javascriptにデータを出力するのに

import { locales, defaultLang } from '@/i18n/ui-settings';

まず import ですが viteの@設定は

astro.config.mjs の

vite: {
    plugins: [tailwindcss()],
    resolve: {
      alias: {
        '@': path.resolve('./src'),
      },
    },
  },

resolveのところで @はsrc と同等になります。相対パスでははく @/pathと

展開script

<script
    id="i18n-config"
    type="application/json"
    set:html={JSON.stringify({
    locales,
    defaultLang,
    })}
    />

これだけでは { 中身 }　となっているので直接読めず

const config = JSON.parse(
document.getElementById('i18n-config').textContent
);

JSON.parseで読み込んでから config.localesなどのように使用しました！

あとは /ja/とかついている場合は、 jaのメッセージを 表示したりします！