Railsのエラーページがかっこ悪い!
ググっても欲しいテンプレが見つからない!ってことで、作りました。
以下のコマンドを1発叩くだけでマシなテンプレートになります。
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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 |
Comments