Railsの404エラーページをコマンド1発でクールにする

Ruby on Rails

Railsのエラーページがかっこ悪い!

ググっても欲しいテンプレが見つからない!ってことで、作りました。

以下のコマンドを1発叩くだけでマシなテンプレートになります。

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
curl https://gist.githubusercontent.com/matsubo/1fc73d7632dc45a6ecb6d75edfc7764d/raw/b2363a18e001c07f2288f4a90c50c0edbb12a90e/main.sh | sh
curl https://gist.githubusercontent.com/matsubo/1fc73d7632dc45a6ecb6d75edfc7764d/raw/b2363a18e001c07f2288f4a90c50c0edbb12a90e/main.sh | sh
curl https://gist.githubusercontent.com/matsubo/1fc73d7632dc45a6ecb6d75edfc7764d/raw/b2363a18e001c07f2288f4a90c50c0edbb12a90e/main.sh | sh

スクリーンショット

デモ: https://postcode.teraren.com/asdfasdf

ソースコード

適当に作っただけなので、もっとかっこよくしたい場合はForkどうぞ。

make Ruby on Rails error page fancy!
make Ruby on Rails error page fancy! GitHub Gist: instantly share code, notes, and snippets.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>The page you were looking for doesn't exist (404)</title>
<!-- Latest compiled and minified CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
<style type="text/css" media="screen">
body {
background-color: #f1f1f1;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.container { margin-top: 10%; }
a { color: #4183c4; text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 60px; font-weight: 100; margin: 0px 0 50px 0; text-shadow: 0 1px 0 #fff; }
p { color: rgba(0, 0, 0, 0.5); margin: 20px 0; line-height: 1.6; }
</style>
</head>
<body>
<div class="container text-center">
<h1>404</h1>
<p><strong>File not found</strong></p>
<p>
The site configured at this address does not
contain the requested file.
</p>
</body>
</html>
view raw 404.html hosted with ❤ by GitHub
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>The change you wanted was rejected (422)</title>
<!-- Latest compiled and minified CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
<style type="text/css" media="screen">
body {
background-color: #f1f1f1;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.container { margin-top: 10%; }
a { color: #4183c4; text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 60px; font-weight: 100; margin: 0px 0 50px 0; text-shadow: 0 1px 0 #fff; }
p { color: rgba(0, 0, 0, 0.5); margin: 20px 0; line-height: 1.6; }
</style>
</head>
<body>
<div class="container text-center">
<h1>422</h1>
<p><strong>The change you wanted was rejected.</strong></p>
<p> Maybe you tried to change something you didn't have access to. </p>
<p>If you are the application owner check the logs for more information.</p>
</div>
</body>
</html>
view raw 422.html hosted with ❤ by GitHub
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>We're sorry, but something went wrong (500)</title>
<!-- Latest compiled and minified CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
<style type="text/css" media="screen">
body {
background-color: #f1f1f1;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.container { margin-top: 10%; }
a { color: #4183c4; text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 60px; font-weight: 100; margin: 0px 0 50px 0; text-shadow: 0 1px 0 #fff; }
p { color: rgba(0, 0, 0, 0.5); margin: 20px 0; line-height: 1.6; }
</style>
</head>
<body>
<div class="container text-center">
<h1>500</h1>
<p><strong>We're sorry, but something went wrong</strong></p>
<p>
If you are the application owner check the logs for more information.
</p>
</body>
</html>
view raw 500.html hosted with ❤ by GitHub
curl https://gist.githubusercontent.com/matsubo/1fc73d7632dc45a6ecb6d75edfc7764d/raw/1d964d6da9c11a4fe930f5dc2284994b29cd219c/404.html > public/404.html
curl https://gist.githubusercontent.com/matsubo/1fc73d7632dc45a6ecb6d75edfc7764d/raw/1d964d6da9c11a4fe930f5dc2284994b29cd219c/422.html > public/422.html
curl https://gist.githubusercontent.com/matsubo/1fc73d7632dc45a6ecb6d75edfc7764d/raw/1d964d6da9c11a4fe930f5dc2284994b29cd219c/500.html > public/500.html
view raw main.sh hosted with ❤ by GitHub

Comments

タイトルとURLをコピーしました