CodeAtlas Error Pages

Páginas de erro HTTP personalizadas com a identidade visual da CodeAtlas. Prontas para uso com nginx, Caddy, Traefik, Apache, Docker e Cloudflare.

---

Páginas incluídas

Código	Nome	Arquivo
401	Autenticação Necessária	401.html
403	Acesso Negado	403.html
404	Página Não Encontrada	404.html
429	Muitas Requisições	429.html
500	Erro Interno do Servidor	500.html
503	Serviço Temporariamente Indisponível	503.html

Cada página é um arquivo HTML autocontido — sem dependências externas além das fontes do Google Fonts. Nenhum processo de build necessário.

---

Início rápido

git clone https://github.com/codeatlasdev/404.git /var/www/errors

Abra qualquer arquivo no navegador para visualizar:

open /var/www/errors/404.html

---

Configuração por plataforma

Plataforma	Tutorial
nginx	docs/nginx.md
Caddy	docs/caddy.md
Traefik	docs/traefik.md
Apache	docs/apache.md
Docker	docs/docker.md
Cloudflare	docs/cloudflare.md

---

nginx — Configuração rápida

Clone o repositório e aponte o nginx para os arquivos:

# /etc/nginx/sites-available/example.com

server {
    listen 80;
    server_name example.com;

    root /var/www/html;
    index index.html;

    # Páginas de erro personalizadas
    error_page 401 /errors/401.html;
    error_page 403 /errors/403.html;
    error_page 404 /errors/404.html;
    error_page 429 /errors/429.html;
    error_page 500 502 /errors/500.html;
    error_page 503 /errors/503.html;

    location = /errors/ {
        internal;
        alias /var/www/errors/;
    }
}

nginx -t && systemctl reload nginx

Tutorial completo com proxy reverso e mais: docs/nginx.md

---

Caddy — Configuração rápida

example.com {
    root * /var/www/html
    file_server

    handle_errors {
        @404 expression {err.status_code} == 404
        @401 expression {err.status_code} == 401
        @403 expression {err.status_code} == 403
        @429 expression {err.status_code} == 429
        @500 expression {err.status_code} == 500
        @503 expression {err.status_code} == 503

        handle @404 { rewrite * /404.html; file_server { root /var/www/errors } }
        handle @401 { rewrite * /401.html; file_server { root /var/www/errors } }
        handle @403 { rewrite * /403.html; file_server { root /var/www/errors } }
        handle @429 { rewrite * /429.html; file_server { root /var/www/errors } }
        handle @500 { rewrite * /500.html; file_server { root /var/www/errors } }
        handle @503 { rewrite * /503.html; file_server { root /var/www/errors } }
    }
}

Tutorial completo: docs/caddy.md

---

Traefik — Configuração rápida

# docker-compose.yml (trecho)
services:
  errors-pages:
    image: nginx:alpine
    volumes:
      - ./error-pages:/usr/share/nginx/html:ro

  minha-app:
    image: minha-app:latest
    labels:
      - "traefik.http.middlewares.errors.errors.status=400-599"
      - "traefik.http.middlewares.errors.errors.service=errors-pages"
      - "traefik.http.middlewares.errors.errors.query=/{status}.html"
      - "traefik.http.routers.minha-app.middlewares=errors"

Tutorial completo com traefik.yml e arquivo dinâmico: docs/traefik.md

---

Docker — Configuração rápida

Como serviço dedicado:

services:
  errors-pages:
    image: nginx:alpine
    volumes:
      - ./error-pages:/usr/share/nginx/html:ro
    healthcheck:
      test: ["CMD", "wget", "-qO-", "http://localhost/404.html"]
      interval: 30s
      timeout: 5s
      retries: 3

Imagem customizada:

FROM nginx:alpine
COPY . /usr/share/nginx/html/errors/

Tutorial completo com opções de bind mount e compose: docs/docker.md

---

Cloudflare — Configuração rápida

Cloudflare Pages — conecte este repositório ao seu projeto Pages. A página 404.html é usada automaticamente para rotas não encontradas.

Cloudflare Workers — intercepta erros de qualquer origin:

export default {
  async fetch(request, env) {
    const response = await fetch(request);
    if (response.ok || response.redirected) return response;

    const code = response.status;
    const supported = [401, 403, 404, 429, 500, 503];
    const page = supported.includes(code) ? code : 500;

    const errorPage = await fetch(
      `https://codeatlasdev.github.io/404/${page}.html`
    );
    const html = await errorPage.text();
    return new Response(html, {
      status: code,
      headers: { 'Content-Type': 'text/html;charset=UTF-8' },
    });
  },
};

Tutorial completo com wrangler.toml e Pages Functions: docs/cloudflare.md

---

Apache — Configuração rápida

# /etc/apache2/sites-available/000-default.conf (trecho)
Alias /errors /var/www/errors

<Directory /var/www/errors>
    Options -Indexes
    AllowOverride None
    Require all granted
</Directory>

ErrorDocument 401 /errors/401.html
ErrorDocument 403 /errors/403.html
ErrorDocument 404 /errors/404.html
ErrorDocument 429 /errors/429.html
ErrorDocument 500 /errors/500.html
ErrorDocument 503 /errors/503.html

apachectl configtest && systemctl reload apache2

Tutorial completo com .htaccess e proxy reverso: docs/apache.md

---

Estrutura do repositório

404/
├── 401.html          # Autenticação necessária
├── 403.html          # Acesso negado
├── 404.html          # Página não encontrada
├── 429.html          # Muitas requisições
├── 500.html          # Erro interno do servidor
├── 503.html          # Serviço indisponível
└── docs/
    ├── nginx.md
    ├── caddy.md
    ├── traefik.md
    ├── apache.md
    ├── docker.md
    └── cloudflare.md

---

Design

Páginas construídas com a identidade visual da CodeAtlas:

• Fontes: Manrope, Anton SC, Space Mono
• Background: #050810 com grid e gradiente nebular
• Código de erro em Anton SC com gradiente por categoria (azul → 4xx, vermelho → 5xx, âmbar → 503, laranja → 429, roxo → 403)
• Totalmente responsivo; sem dependências de build

---

Licença

MIT — use livremente em projetos pessoais e comerciais.

---

Feito com cuidado pela equipe CodeAtlas.