🇬🇧 How to customise the maintenance page in Laravel ?

#What is a maintenance page in Laravel?

Before starting, what is a maintenance page in Laravel ?

Maintenance mode allows you to send your visitors to a maintenance page while you update your application or perform maintenance on your server.

You can activate it with the following command in your favourite terminal:

php artisan down

And when you visit your app, you will see something like that :

Error 503

Not really fun, isn't it ?

Secret tip of php artisan down

You can add one of the following options to keep an access to your site during the maintenance if you need if. --secret=[=SECRET] where you can define your own secret, or --with-secret which generate a secret for you.

#How can I customize my Laravel Maintenance Page?

It's very easy, and this is why this article is so short 🤣

Simply, add in your resources\views a folder errors if you already don't have.

Next, in this directory add a new file 503.blade.php.

Inside which, you could add something like that :

 1<!DOCTYPE html>
 2<html lang="en">
 3<head>
 4    <meta charset="UTF-8">
 5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6    <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7    <title>Maintenance in progress</title>
 8    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.0.2/dist/tailwind.min.css" rel="stylesheet">
 9</head>
10<body class="flex items-center justify-center h-screen bg-gray-900">
11    <div class="max-w-lg mx-auto mt-20 text-center">
12        <h1 class="text-4xl font-bold text-gray-100 mb-6">Framework Heroes <br>is under maintenance</h1>
13        <p class="text-lg text-gray-200 mb-4">We are updating the site.</p>
14        <p class="text-lg text-gray-200 mb-4">Please come back later.</p>
15        <img src="/images/maintenance.webp" alt="Maintenance" class="mx-auto w-96 mb-8">
16        <p class="text-sm text-gray-300">Thank you for your patience!</p>
17    </div>
18</body>
19</html>

And voilà !

The result

Of course, feel free to change this very basic template.