/ HowTos

Starting the Nginx

I just spent the better part of a day trying to migrate to nginx and accomplish global error pages across all my hosted sites. This sounded easy enough, and hey, I did it on apache before. Couldn't be too hard...

Famous last words.

SO...rather than dull you with the 1000 ways I did it wrong, here is my working config.

First, we need to create a global directory to store our config file in. I went with /etc/nginx/global.

Now, create a file in that new directory. I called mine error.conf . For this example, I'm just doing a page for an error 403, but I suspect I can use this logic for any error code.

The config file is a little magical/hackish...at least I think it is. You'll notice the =200 in there. I had to put that in there so the page would load completely (images and all). Without this, the server sends back a 403 and you get nothing except plain html, so we send back a 200 instead. Might not be the best way, but after hours of getting pissed and slamming refresh, I don't care. Maybe someone out there will be kind enough to let me know if this is a terrible way to do it...

error_page 403 =200 @nope;

location @nope {
    root /path/to/error/pages;
     rewrite ^(.*)$ /403_page.html break;

Here is my error page. (anyone familiar with Diaspora might recognize this style a bit...)
So, I ran into so much trouble with trying to server images from the same document root as the site I was restricting with a 403, I finally got sick of it and brought up a site strictly to serve static images for my error pages. (In this example its MY_SWEET_SERVER.com)

<!DOCTYPE html>
  <title>Forbidden (403)</title>
  <style type="text/css">

    html {
      overflow-y : hidden;

    body {
      margin-bottom: 0;
      padding-bottom: 0;
      margin-top: 5%;
      background-color: #fff;
      color: #666;
      text-align: center;
      font-family: Roboto, Helvetica, Arial, sans-serif;
      background-image: url(http://MY_SWEET_SERVER.com/pattern.png);
      text-shadow: 0 1px 0 #fff;

    #big-number {
      font-family: Roboto-BoldCondensed, Helvetica, Arial, sans-serif;
      font-size: 250px;
      text-shadow: 0 2px 0 #fff, 0 -1px 0 #999;
      color: #ddd;

    a {
      text-decoration : none;
      color : rgb(42,156,235);

    a:hover {
      text-decoration : underline;

    .transparent {
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
      filter: alpha(opacity=80);
      -moz-opacity: 0.8;
      -khtml-opacity: 0.8;
      opacity: 0.8;

    #moon-footer {
      width: 100%;
      position: fixed;
      text-align: center;
      bottom : -8px;
      left : 0;

    #content {
      z-index: 3;
      position: relative;


  <!-- This file lives in public/403.html -->
  <div id="big-number" class="transparent">

  <div id="content">

  <div id="moon-footer" class="transparent">
    <img src="http://MY_SWEET_SERVER.com/footer.png">

Finally, in your server config, add include global/error.conf; . This way, the error config is loaded into the server.

server {
        listen   80;
        server_name MY_BEST_SERVER.com;
        root /path/to/doc/root;
        index index.html;

        include global/error.conf;

        location / {
             #Uncomment to test 403 errors
             #deny all;
             try_files $uri $uri/ /index.html;

After all that, for any other servers you have, you can include the include global/error.conf; line for your error page handling. (rather than repeating the contents of error.conf in every.single.server.block you have)

Hope this helps someone not go crazy with error pages and nginx! Please comment if this makes no sense or if you think I'm crazy and should be doing things MUCH different.