¿Cómo funciona neocities.org según Chat GPT?

Neocities.org es una plataforma gratuita para crear y alojar sitios web estáticos con HTML, CSS y JavaScript. Inspirada en la antigua GeoCities, permite a cualquier persona diseñar páginas personales, portafolios o blogs creativos fácilmente, sin bases de datos ni servidores, fomentando el aprendizaje y la libertad expresiva en la web.

1. Cómo empezar

  1. Ve a neocities.org y regístrate.

    • Tendrás que escoger un nombre de usuario: ese será parte de tu dirección web, algo tipo usuario.neocities.org.

    • Verifica tu correo si te lo piden.

  2. Una vez dentro, te aparece el “Dashboard” o panel de control de tu sitio. Aquí podrás ver los archivos que componen tu sitio web (por ejemplo index.html) y podrás subir nuevos archivos, editar los existentes, etc.

  3. Decide qué tipo de sitio quieres hacer: por ejemplo una página personal, un blog estático, un portafolio, una página de “hobbies”, etc.

  4. Empieza a crear los archivos necesarios: al menos un index.html que será la página de inicio. Puedes añadir archivos de estilo (style.css), imágenes, JavaScript si lo deseas.

  5. Sube esos archivos a Neocities (puedes arrastrar y soltar en el panel, o usar su editor interno). Luego visita tu URL del tipo usuario.neocities.org para ver cómo queda.

  6. A medida que quieras, puedes modificar los archivos, añadir más páginas (about.html, contacto.html…), vincularlas entre sí, etc.

2. Qué puedes hacer

  • Crear un sitio estático: es decir, contenido que no depende de una base de datos dinámica ni de “backend” complejo — simplemente HTML, CSS, JavaScript que el navegador carga tal cual.

  • Mostrar imágenes, texto, gráficos, animaciones (mediante JS), etc.

  • Ideal para: páginas personales, blogs simples, portafolios, proyectos web ligeros, páginas “retro” tipo web 1.0.

  • Puedes aprender haciendo: modificar código, ver cómo cambia tu página, entender HTML/CSS/JS.

3. Límites de la versión gratuita

La versión gratuita tiene límites. Te los detallo:

  • Almacenamiento (espacio para tus archivos) para cuentas gratuitas: 1 GB. (neocities.org)

  • Ancho de banda (cuánta descarga pueden hacer los visitantes desde tu sitio): para la versión gratuita alrededor de 200 GB. (icctutorial.pages.dev)

  • Tipos de archivo permitidos en la versión gratuita: mayormente HTML, CSS, JS, imágenes, Markdown, textos, fuentes. (genealogy-web-creations.com)

  • Si quieres más espacio, más ancho de banda, dominios personalizados, etc., existe un plan de pago (“Supporter”) que ofrece ~50 GB de almacenamiento y ~3000 GB de ancho de banda. (neocities.org)

  • Es importante tener en cuenta que aunque haya “límite”, algunos lo llaman “soft limit”: pequeñas sobrecargas pueden tolerarse, pero no es para tráfico muy masivo sin pasar al plan de pago. (icctutorial.pages.dev)

4. Qué tener en cuenta al subir contenido

  • Aunque 1 GB es mucho para muchas páginas personales, las imágenes, vídeos, animaciones pesadas pueden usar mucho espacio rápido. Si tienes muchas imágenes grandes, conviene optimizarlas (reducir tamaño, usar formatos eficientes). (Reddit)

  • Dado que es solo “hosting estático”, no puedes usar código de servidor (PHP, bases de datos MySQL, etc). Es para HTML/CSS/JavaScript básicamente. (Wikipedia)

  • Tu sitio tendrá la URL de subdominio de Neocities (por ejemplo usuario.neocities.org). Si quieres un dominio propio (“www .tu-dominio.com”) esto normalmente está en el plan pago o requiere configuración especial.

  • Aunque los archivos estén permitidos, el tráfico (“bandwidth”) puede convertirse en limitante si tienes muchos visitantes o descargas muy grandes.

  • Haz backups de tu sitio por si acaso.

Perfecto 😄
Vamos a hacer un mini-tutorial paso a paso para que empieces en Neocities.org desde cero y publiques tu primer sitio web gratuito.
Solo necesitas un navegador, nada más.

PASOS

🧩 PASO 1: Crear tu cuenta

  1. Entra a 👉 https://neocities.org

  2. Haz clic en “Create your site” o “Crea tu sitio”.

  3. Escribe:

    • Nombre de usuario → será parte de tu dirección, por ejemplo tusitio.neocities.org

    • Correo electrónico

    • Contraseña

  4. Acepta los términos y confirma.
    🔹 Ya tendrás un panel de control llamado Dashboard.

🗂️ PASO 2: Conoce tu panel (Dashboard)

En tu Dashboard verás algo así:

  • Un listado de archivos (index.html, style.css, etc.)

  • Botones como:

    • Upload Files → subir archivos desde tu computadora.

    • New File → crear un archivo nuevo desde el navegador.

    • Edit → abrir el editor interno de Neocities (puedes escribir HTML ahí directamente).

  • Un botón que dice View Site → abre tu página pública.

Tu sitio, al inicio, se verá vacío o con una página de bienvenida temporal.

🧠 PASO 3: Crea tu primera página

Vamos a hacer un “Hola mundo”.

  1. Crea un archivo nuevo llamado index.html (si no existe).

  2. Escribe lo siguiente dentro del editor:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Mi primer sitio</title>
  <style>
    body {
      background-color: #f0f8ff;
      color: #222;
      font-family: sans-serif;
      text-align: center;
      margin-top: 50px;
    }
  </style>
</head>
<body>
  <h1>¡Hola, Internet! 🌐</h1>
  <p>Bienvenido a mi primer sitio en Neocities.</p>
  <p>Creado con ❤️ y HTML puro.</p>
</body>
</html>

  1. Guarda el archivo.

  2. Haz clic en View Site → verás tu página publicada en la dirección
    👉 https://tusitio.neocities.org

¡Listo! 🎉 Ya tienes tu primer sitio web público.

🎨 PASO 4: Añadir estilo o más páginas

Puedes crear más archivos, por ejemplo about.html, con tu biografía o enlaces.
Luego, desde el index.html, añades un enlace:

<p><a href="about.html">Sobre mí</a></p>

Y así se van conectando las páginas.

También puedes subir:

  • Imágenes (.jpg, .png, .gif)

  • Archivos CSS externos (style.css)

  • Archivos JavaScript (script.js)

💡 PASO 5: Personaliza y mejora

Ideas para seguir aprendiendo:

  • Cambiar colores y fuentes con CSS.

  • Usar animaciones simples con JavaScript.

  • Poner un contador de visitas o reloj (con código JS).

  • Crear un “blog” estático con archivos HTML enlazados entre sí.

  • Explorar sitios de otros usuarios desde el menú Explore (inspírate).

🧭 PASO 6: Límite y plan gratuito

  • Espacio total: 1 GB

  • Tráfico mensual: 200 GB aprox.

  • Sin anuncios.

  • Sitios públicos y gratuitos.

  • Puedes subir ilimitados archivos mientras no superes el límite.

Si algún día quieres más (dominio propio, 50 GB, estadísticas, HTTPS personalizado), puedes pasar al plan Supporter (~$5/mes).

ARCHIVOS MARKDOWN

En Neocities puedes subir archivos Markdown (.md) sin problema.

Sin embargo, hay un detalle importante:
Neocities no convierte automáticamente Markdown a HTML. Eso significa que si subes un archivo archivo.md, el navegador lo mostrará como texto plano (no renderizado como una página web).

👉 Soluciones posibles:

  1. Convertir tus archivos Markdown a HTML (con herramientas como Dillinger.io, pandoc, o extensiones de tu editor de texto) antes de subirlos.

  2. O usar JavaScript (por ejemplo, la librería marked.js) en una página HTML para cargar y renderizar Markdown dinámicamente.

Dos formas de mostrar contenido Markdown (.md) en tu sitio de Neocities:

🧩 OPCIÓN 1: Convertir Markdown a HTML (más simple)

  1. Escribe tu texto en un archivo contenido.md, por ejemplo:

# ¡Hola Neocities!
Este es mi primer archivo **Markdown**.

- Puedo usar listas
- Negritas y cursivas
- Enlaces [como este](https://neocities.org)

  1. Usa una herramienta para convertirlo a HTML:

  2. Sube el archivo contenido.html a tu sitio de Neocities.

  3. ¡Listo! Se mostrará como cualquier otra página web.
    👉 Ejemplo: https://tusitio.neocities.org/contenido.html

✅ Es la forma más estable y ligera, ideal para principiantes.

⚙️ OPCIÓN 2: Mostrar Markdown “en vivo” con JavaScript

Si prefieres mantener tus archivos .md y que se conviertan automáticamente en el navegador, puedes hacerlo con una librería como marked.js.

Crea un archivo index.html así:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Markdown en Neocities</title>
  <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
</head>
<body>
  <div id="contenido">Cargando...</div>

  <script>
    fetch('contenido.md')
      .then(res => res.text())
      .then(texto => {
        document.getElementById('contenido').innerHTML = marked.parse(texto);
      });
  </script>
</body>
</html>

Y en el mismo directorio, sube tu archivo contenido.md.
Cuando abras tu sitio (https://tusitio.neocities.org), el navegador descargará el Markdown, lo convertirá y lo mostrará como HTML.


Labels: