BookStackの404記事を自分好みの文章に差し替えたときのメモです。

環境

  • BookStack v25.07.2
  • PHP8.3
    • PHP-FPM
  • Apache 2.4
    • 実行ユーザはwww-data
  • MySQL 8
  • Ubuntu 24.04

さっくりとした手順

  1. BookStackの404ページへと移動します。
  2. 元々の404ページを退避させます。
  3. カスタム404へと差し替えます。
  4. 設定を反映させます。
  5. 内容を確認します。

BookStackのディレクトリ移動と元ファイルの退避

  • ディレクトリ移動
cd /path/to/BookStack/resources/views/errors/ && pwd

自分の環境に合わせます。(筆者環境/home/www-data/BookStack/resources/views/errors/)

  • 404ページの退避
sudo mv 404.blade.php /path/to/backup/404.blade.php.$(date +%Y%m%d)

ファイル全体を差し替えるので、mvを利用します

  • 404ページの退避確認
ls -l /path/to/backup/404.blade.php.$(date +%Y%m%d)

ファイルがあることを確認します。(mvなのでlsで確認)

404ファイル作成

  • 404.blade.php

を、新たなファイルに差し替えます。筆者はこのようにしました。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>404 | もう逃げられない、アーサー</title>
    <style>
        /* 全体設定 */
        body {
            font-family: 'Times New Roman', Times, serif;
            background-color: #f7f7f7;
            color: #333;
            margin: 0;
            padding: 20px;
            line-height: 1.6;
        }

        /* コンテナ */
        .container {
            max-width: 800px;
            margin: 40px auto;
            background-color: #fff;
            padding: 30px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            border: 1px solid #ddd;
        }

        /* 404ヘッダー */
        .header {
            text-align: center;
            margin-bottom: 30px;
            border-bottom: 2px solid #a00; /* 赤いライン */
            padding-bottom: 10px;
        }

        .header h1 {
            font-size: 3em;
            color: #a00;
            margin: 0;
        }

        .header p {
            color: #666;
            font-style: italic;
        }

        /* 対話スタイル */
        .dialogue-box {
            margin-bottom: 20px;
            padding: 15px;
            border-left: 5px solid;
        }

        .dialogue-box.editor {
            border-color: #4CAF50; /* 緑色 (編集者/外部の声) */
            background-color: #e8f5e9;
        }

        .dialogue-box.arthur {
            border-color: #2196F3; /* 青色 (アーサー/コナン・ドイル) */
            background-color: #e3f2fd;
        }

        .speaker {
            font-weight: bold;
            display: block;
            margin-bottom: 5px;
            font-size: 0.9em;
            text-transform: uppercase;
        }

        /* 結びのフッター */
        .footer {
            text-align: center;
            margin-top: 30px;
            padding-top: 20px;
            border-top: 1px dashed #ccc;
        }

        .footer a {
            color: #007bff;
            text-decoration: none;
            margin: 0 10px;
            font-weight: bold;
        }

        .footer a:hover {
            text-decoration: underline;
        }

    </style>
</head>
<body>

    <div class="container">

        <div class="header">
            <h1>404 Not Found</h1>
            <p>ページが見つかりません。探偵の不在は、常に混乱をもたらします。</p>
        </div>

        <div class="dialogue-box editor">
            <span class="speaker">編集者（あるいは「声」）</span>
            <p>**もう逃げられない。**<br>
            続きを書け。馬車でストランドの編集部へ行こう。<br>
            よく考えろ。自宅は葬列で包囲されている。<br>
            喪章をつけたロンドン市民が続きを望んでいるんだ。<br>
            君は探偵の大敵を出した直後に滝に落として、雑誌に大損害を与えた。<br>
            もういい、歴史小説は終わりだ。<br>
            **ホームズを生還させるんだアーサー。**<br>
            君は既に有名作家として評価されているんだ！<br>
            母上からの手紙を読め。読むんだ！<br>
            母上も探偵の話を続けろと言っているぞ。<br>
            ファンから殺されたいのか？<br>
            君の作家性を高めるんだ！</p>
        </div>

        <div class="dialogue-box arthur">
            <span class="speaker">アーサー・コナン・ドイル</span>
            <p>**未だ何も評価されちゃいないんだ！　何も！**<br>
            俺にとって本当の小説とは戦争小説のことなんだ！<br>
            アレは俺の小説じゃ無かった！<br>
            生活費を稼ぐため、もっと書けと頼まれた！<br>
            俺は100年戦争小説の為にリアルな騎士道を学び尽くした！<br>
            これを書くために自キャラを滝に落としたら蛆虫どもが非難してくるんだ。<br>
            俺のことを探偵殺しとか駄文を書く暇あったら生き返らせろとか悪口の限りを並べやがった！<br>
            あいつら何なんだ？<br>
            歴史物のなんたるかも知らずに！<br>
            **頭にきたぜ！**</p>
        </div>

        <div class="dialogue-box editor">
            <span class="speaker">編集者（あるいは「声」）</span>
            <p>君にとってホームズの物語は<br>
            **今の栄光の時代だ。断じて過去にはない**</p>
        </div>

        <div class="dialogue-box arthur">
            <span class="speaker">アーサー・コナン・ドイル</span>
            <p>俺は**大英帝国の未来**を書きたいんだ！</p>
        </div>

        <div class="dialogue-box editor">
            <span class="speaker">編集者（あるいは「声」）</span>
            <p>未来？　未来だと？<br>
            君はまだ少年兵のように、戦場に夢を見ているのか？<br>
            ペンで帝国を救うつもりか、アーサー？</p>
        </div>

        <div class="dialogue-box arthur">
            <span class="speaker">アーサー・コナン・ドイル</span>
            <p>救うだと？　違う！　**断罪する**んだ。<br>
            俺は帝国の瓦礫の上で、真実の騎士を描く！<br>
            硝煙の中に詩を見た。あの幻を、誰も読もうとしなかった。<br>
            ホームズは観察するだけだ。<br>
            だが俺の騎士は、**行動する！**</p>
        </div>

        <div class="footer">
            <a href="/">本棚へ戻る (Go Home)</a>
            <p style="font-size:0.8em; margin-top:10px;">（探偵は...未だ見つかっていません。）</p>
        </div>
    </div>

</body>
</html>
  • 404.blade.phpの所有者変更
sudo chown www-data:www-data 404.blade.php && ls -l 404.blade.php

www-dataはBookStackの実行ユーザに合わせます。合わせた後、所有者を確認します。

設定反映

  • artisanによるキャッシュクリア
sudo -u www-data php artisan view:clear
sudo -u www-data php artisan cache:clear

設定反映確認

BookStackのサイトにアクセスし、存在しない適当な文字を入れます。

上記、設定した文書があることを確認します。