Cómo crear un sitio web personal y estático por menos de 1 dólar al mes

El objetivo de esta publicación es mostrarte cómo puedes crear tu propio sitio web personal estático por menos de $1 al mes. Lo sé, probablemente estés pensando: "¿Acabo de leer bien?". ¡Lo hiciste! Por supuesto, hay salvedades para alcanzar ese objetivo, pero al comienzo del recorrido de su sitio web, en realidad sólo debería costar $0,01 al mes alojar su propio sitio web estático. El público objetivo de esta publicación es cualquier persona con experiencia en JavaScript y conocimientos generales de desarrollo web. Si no tienes esa experiencia, ¡no te preocupes! ¡Haré todo lo posible para explicar las ideas y conceptos de esta publicación para que cualquiera pueda seguirla!

Antes de comenzar, establezcamos algunas definiciones que nos ayudarán a comprender los diferentes términos que usaremos para crear nuestro primer sitio. No dude en consultar estas definiciones a medida que avanzamos en el proceso de agregar nuestro sitio a Google Cloud:

• Dominio del sitio web: una dirección utilizada para identificar un sitio web en Internet, como yelp.com
• Proveedor de registro de dominios: un proveedor de dominios, donde puedes comprar un dominio personalizado
• Sitio web estático: un sitio web creado con un número fijo de cualquier combinación de archivos HTML, CSS y JavaScript.
• Next.js: un marco React.js que admite renderizado del lado del servidor y generación de sitios estáticos
• Objeto de almacenamiento: una entidad utilizada para almacenamiento, como fotos o vídeos o cualquier otro tipo de archivo.
• Google Cloud: una plataforma de computación en la nube que ofrece una variedad de servicios, nos preocupa el almacenamiento
• Google Cloud Storage: el servicio de almacenamiento de objetos de Google Cloud, lo usaremos para almacenar los archivos estáticos de nuestro sitio web.
• Bucket (Google Cloud Storage): un contenedor que contiene los archivos de su sitio web

Este artículo asume que el lector tiene algunos conocimientos básicos sobre programación y desarrollo de sitios web. Asumiré que cada lector tiene lo siguiente:

• Una comprensión básica del desarrollo de sitios web: Introducción al desarrollo web (freecodecamp.org)
• Experiencia con NPM
• Conocimiento principiante de React.js y Next.js
• Comodidad con una CLI
• Un IDE instalado en su computadora: VSCode es lo que uso, por ejemplo

Tiendo a pensar mejor dividiendo una meta en partes incrementales de trabajo. Enmarquemos nuestras tareas de esa manera mientras creamos nuestro sitio web:

1. Configuración
2. Código de inicio para nuestro sitio
3. Configurar un depósito para nuestro sitio
4. Próximos pasos 😎

Configuración

Si desea crear su propio sitio web personal, necesitará un dominio para comenzar. Aunque no lo usaremos inicialmente, vale la pena hacerlo ahora para que podamos usar el dominio personalizado en un artículo posterior . Para mí, mi dominio era afro-cloud.com , pero realmente puedes elegir lo que se te ocurra siempre que un proveedor de registro tenga el dominio disponible. Hay varios proveedores de registro de dominios que puedes usar. Yo personalmente usé GoDaddy, pero aquí hay un subconjunto de opciones disponibles (no estoy afiliado a ninguno de estos servicios):

• Ve papi
• anfitrión azul
• Espacio cuadrado

Ahora que hemos configurado nuestro dominio, creemos una cuenta de Google Cloud y habilitemos la facturación.

1. Navegue a la consola de Google Cloud
2. Use una cuenta de Google existente o cree una nueva para ingresar a la consola (esto es necesario para usar Google Cloud)
3. Cree un nuevo proyecto haciendo clic en el menú desplegable de selección de proyectos en la barra superior de la pantalla.
4. Vaya a "Facturación"
5. Cree una nueva cuenta de facturación siguiendo las instrucciones proporcionadas por Google Cloud

¡Excelente! Ahora con la facturación habilitada, podemos comenzar a utilizar los servicios de Google Cloud. Ya tenemos todo listo con esta pestaña por ahora, pero volveremos a esta página más adelante en el artículo, así que téngala a mano.

Código de inicio para nuestro sitio

Si tiene problemas para seguir los pasos que se detallan en este artículo, comuníquese con nosotros y haré todo lo posible para ayudarlo a solucionar el problema. Bien, con eso aclarado, continuemos. Usaremos Next.js a diferencia de otros marcos de React.js (o simplemente React) debido a su soporte de exportación estática. Existen varias opciones de implementación diferentes para alojar una aplicación React.js, pero elegí compartir el enfoque de Google Cloud Storage y Next.js debido a los beneficios de SEO y al ahorro de costos. Con las exportaciones estáticas de Next.js, cuando se realiza una compilación de producción, se crea un archivo HTML por ruta, junto con los activos estáticos (archivos CSS y JS) que corresponden al archivo HTML en distintos fragmentos. Esto es importante porque puede evitar cargar paquetes de JavaScript innecesarios para la página que se está viendo, lo que significa cargas de página más rápidas. Todos los archivos generados al ejecutar la "próxima compilación" se exportarán a la carpeta "salida". Pero hablaremos de esto más adelante. Creemos la aplicación.

En primer lugar, instalemos un proyecto inicial Next.js en nuestra máquina. Afortunadamente, Next.js tiene una utilidad "create-next-app" como la aplicación Create React para aquellos que la han usado. Para iniciar el flujo de trabajo podemos ejecutar el siguiente comando:

npx create-next-app@latest

El comando nos guiará a través de algunas opciones de configuración para nuestro proyecto (siéntete libre de elegir lo que quieras; solo necesitamos la generación del código). He puesto en negrita las opciones que usaré para este artículo:

• ¿Cómo se llama tu proyecto? mi-aplicación
• ¿Te gustaría utilizar TypeScript? No si
• ¿Te gustaría utilizar ESLint? No si
• ¿Te gustaría utilizar Tailwind CSS? No si
• ¿Le gustaría utilizar el directorio `src/`? No si
• ¿Te gustaría utilizar App Router? (recomendado) No / Sí
• ¿Le gustaría personalizar el alias de importación predeterminado (@/*)? No si

Bien, ¡ahora tenemos algo de código! Notarás que nuestra carpeta node_modules está completa, por lo que tenemos todas las dependencias instaladas que necesitamos para ejecutar nuestra aplicación. En esa misma ventana de terminal que usó para crear el proyecto, ejecutemos el siguiente comando: npm run dev . Esto iniciará el flujo de trabajo de desarrollo de Next.js para que podamos ver nuestra aplicación localmente. Next.js proporcionará una URL para ver el proyecto en su computadora. En la mayoría de los casos, será http://localhost:3000 , pero si tiene otra aplicación web ejecutándose, puede seleccionar otro puerto como 3001. Al hacer clic en el enlace, debería ver algo como lo siguiente:

¡Lindo! ¡Tenemos una aplicación de inicio en funcionamiento! Pero deshagámonos de la página de inicio para hacer el ejemplo más clásico de "Hola mundo". Actualice el archivo src/app/page.tsx (o page.jsx) para que contenga lo siguiente:

 import styles from "./page.module.css"; export default function Home() { return ( <main className={styles.main}> <div className={styles.description}> <p>Hello world!</p> </div> </main> ); }

Guarde el archivo y regrese a la pestaña del navegador que ejecuta nuestra aplicación y vuelva a cargar la página. ¡Deberías ver "Hola mundo" en tu pantalla! Ahora volvamos a hacer que funcionen las exportaciones estáticas. Necesitaremos configurar nuestro archivo next.config para habilitar la función. Actualice la declaración nextConfig para que sea:

const nextConfig = { output: "export", };

Esto le indicará a Next.js durante el proceso de compilación que cree archivos HTML individuales correspondientes a cada ruta dentro de nuestra aplicación. Por el momento solo tenemos una página, así que agreguemos otra página para ilustrar los beneficios de las exportaciones estáticas. Dentro del directorio app/, cree un nuevo directorio llamado "prueba". Dentro del directorio recién creado, agregue un archivo page.tsx (o page.jsx) y agregue el siguiente código:

 export default function Test() { return ( <main> <p>Hello test!</p> </main> ); }

Ahora que tenemos una página de prueba, agreguemos un enlace desde nuestra página de inicio. Abra src/app/page.tsx (o page.jsx) y actualice el archivo para que se vea así:

 import Link from "next/link"; import styles from "./page.module.css"; export default function Home() { return ( <main className={styles.main}> <div className={styles.description}> <p>Hello world!</p> <Link href="/test">Test Page!</Link> </div> </main> ); }

Guarde los archivos recién actualizados y regrese a la pestaña del navegador que ejecuta nuestra aplicación y vuelva a cargar la página. Deberías ver un nuevo enlace con "¡Página de prueba!" y al hacer clic en ese enlace, el contenido en la pantalla debería cambiar para mostrar "¡Hola prueba!". Buen trabajo, ahora tenemos dos rutas en nuestra aplicación. Ahora veamos el resultado de la función de exportación estática de la que hemos estado hablando. Volviendo a la ventana de su terminal, ejecute "npm run build". Este comando ejecutará el comando "siguiente compilación" que creará una compilación lista para producción para nuestro trabajo y almacenará el resultado en un directorio llamado en la raíz de nuestro proyecto. Si inspeccionamos el directorio de salida deberíamos ver algo como esto:

• _next: contiene los activos estáticos que necesitamos para ejecutar nuestro sitio, piense en fragmentos de JavaScript y CSS para cada página HTML (por ejemplo, 404.html: es la página 404 predeterminada que Next.js genera para nosotros).
• favicon.ico: el ícono del sitio web de nuestro sitio
• index.html: el archivo HTML de nuestra página raíz (src/app/page.tsx o page.jsx)
• index.txt: archivo que contiene asignaciones de recursos para la página index.html
• test.html: el archivo HTML de nuestra página raíz (src/app/test/page.tsx o page.jsx)
• test.txt: archivo que contiene asignaciones de recursos para la página test.html

Buen trabajo amigos. Ahora cambiemos de marcha para cargar nuestro código en Google Cloud para que podamos ver el sitio en vivo.

Configurar un depósito para nuestro sitio

Ahora que tenemos nuestro código listo, debemos cargarlo en Google Cloud Storage para que Google Cloud pueda servir nuestro sitio en Internet. Volvamos a la pestaña Google Cloud.

Abra el menú de hamburguesas en el lado izquierdo de la pantalla y seleccione "Almacenamiento en la nube". En la parte superior de la pantalla deberías ver el botón "CREAR". Haremos clic en eso que iniciará el flujo de trabajo de creación. Dado que todavía no usaremos un dominio personalizado, asigne al depósito el nombre que desee, pero tenga en cuenta la restricción de unicidad. Para mí, usaré "somerandombucket123". A continuación, usaremos la opción multirregión dentro de los EE. UU. (ahí es donde escribo esta publicación), pero siéntete libre de ajustarla según tu caso de uso. Luego seleccionaremos la opción de clase predeterminada estándar que debería completarse previamente para usted. La siguiente opción tiene que ver con si queremos o no que nuestro depósito sea accesible públicamente a través de Internet. En este caso, dado que queremos entregar estos archivos a nuestros espectadores, queremos desmarcar "Aplicar prevención de acceso público en este depósito" para que se pueda acceder a todos los archivos a través de Internet. Seleccionaremos el control de acceso "Uniforme" y no seleccionaremos las ofertas de "Protección de datos" para mantener los costos bajos. Luego le daremos al botón "Crear".

Ahora que hemos creado el depósito, necesitaremos agregar un nuevo permiso para que los usuarios puedan ver los archivos de nuestro depósito. Seleccione la pestaña "Permisos" y haga clic en el botón "Otorgar acceso". Dentro de "Nuevos directores", escriba "todos los usuarios" y seleccione la función en "Almacenamiento en la nube" para "Visor de objetos de entorno y almacenamiento".

Se abrirá un cuadro de diálogo que nos preguntará si queremos que nuestro depósito sea público, lo cual hacemos, así que seleccione "Permitir acceso público". Luego seleccione "Permitir acceso público". Ahora los archivos de este depósito serán accesibles públicamente. Regrese a la página de descripción general haciendo clic en la flecha hacia atrás desde la página de detalles de su depósito. Debería ver su depósito recién creado con las opciones de configuración que hemos utilizado. A continuación, necesitaremos indicar el depósito de nuestro sitio web y podemos hacerlo haciendo clic en los tres puntos de la fila del depósito recién creado. Seleccione "Editar configuración del sitio web" y debería ver algo como esto:

Para la entrada de la página de índice, escriba "index.html" y para la entrada de la página de error escriba "404.html". Notará que estos archivos coinciden con el resultado de compilación de nuestra aplicación Next.js, que es lo que queremos y usaremos en breve. Termine el cambio haciendo clic en guardar.

¡Ahora necesitamos cargar nuestros archivos contenidos en el directorio de salida de nuestro código en este depósito para que nuestro sitio web pueda estar activo! Podemos hacer esto manualmente navegando a la página de detalles del depósito y seleccionando cada archivo o carpeta individualmente. Pero seamos programáticos al respecto y escribamos algo de código para hacer esto. Regrese a su IDE o donde esté realizando actualizaciones a su código y creemos un nuevo archivo llamado upload.sh en la raíz de nuestro proyecto. Agregue los siguientes contenidos:

 #!/bin/bash # ADD YOUR BUCKETNAME HERE (no quotes necessary) # For example: # BUCKETNAME=somerandombucket123 BUCKETNAME=somerandombucket123 echo "Removing out folder..." sleep 1; rm -rf out echo "Creating production build..." sleep 1; npm run build echo "Uploading assets to the cloud..." sleep 1; gsutil cp out/404.html gs://$BUCKETNAME gsutil cp out/favicon.ico gs://$BUCKETNAME gsutil cp out/index.html gs://$BUCKETNAME gsutil cp out/index.txt gs://$BUCKETNAME gsutil cp out/test.html gs://$BUCKETNAME gsutil cp out/test.txt gs://$BUCKETNAME gsutil cp -r out/_next gs://$BUCKETNAME

Asegúrese de reemplazar "somerandombucket123" con el nombre de su depósito. No se preocupe demasiado por la semántica del código aquí. Básicamente lo que estamos haciendo es:

1. Eliminar cualquier compilación de producción obsoleta
2. Creando una nueva construcción de producción
3. Usar la CLI de Google Cloud para cargar el contenido de nuestra compilación de producción en nuestro depósito

Antes de poder ejecutar este script, tendremos que descargar la CLI de Google Cloud. Puedes seguir las instrucciones aquí . Después de la instalación, deberá ejecutar: gcloud auth login en su terminal. Esto nos autorizará el acceso para utilizar la CLI de Google Cloud. Se pueden encontrar más instrucciones y antecedentes al respecto en su documentación . Una vez que haya autorizado correctamente, agreguemos un nuevo script de ejecución a nuestro paquete.json. Agregue una nueva entrada de script dentro del objeto "scripts" para registrar nuestro script de carga:

"upload": "sh upload.sh"

A continuación, probémoslo. Abre tu terminal nuevamente y ejecuta: "npm run upload". Esto ejecutará nuestro script y deberías ver algún resultado sobre las cargas que ocurren en tu depósito. Si navegamos hacia atrás en la página de Google Cloud Storage y abrimos su depósito, debería ver los archivos que acabamos de cargar. Si navega a: https://storage.googleapis.com/YOUR_BUCKET_NAME/index.html (donde YOUR_BUCKET_NAME es el nombre de su depósito), debería ver el sitio. Pero notarás que el estilo predeterminado de Next.js desapareció y el enlace a nuestra página de prueba está roto. ¿Alguna idea de por qué?

Si abre la consola de su navegador, debería ver muchos errores de recursos no encontrados. En otras palabras, el navegador no puede encontrar los archivos que se le indicó que cargara para su sitio. Si miras de cerca, puedes ver que la URL del recurso no es del todo correcta, falta el nombre de nuestro depósito en la ruta. Si hubiéramos utilizado un dominio personalizado y configurado el DNS correctamente, no nos encontraríamos con este problema. Pero para los propósitos de esta publicación, agreguemos código adicional para corregir la ruta. Abra src/app/page.tsx (o page.jsx) y actualice el archivo para que luzca así:

 import Link from "next/link"; import styles from "./page.module.css"; // Replace below with your bucketname. const BUCKET_NAME = "somerandombucket123"; const isProd = process.env.NODE_ENV === "production"; export default function Home() { return ( <main className={styles.main}> <div className={styles.description}> <p>Hello world!</p> <Link href={isProd ? '/BUCKET_NAME/test.html' : "/test"}> Test Page! </Link> </div> </main> ); }

Asegúrese de reemplazar "somerandombucket123" con el nombre de su depósito. Luego actualice el archivo next.config para que se vea así:

 // Replace below with your bucketname. const BUCKET_NAME = "somerandombucket123"; const isProd = process.env.NODE_ENV === "production"; /** @type {import('next').NextConfig} */ const nextConfig = { assetPrefix: isProd ? 'https://storage.googleapis.com/BUCKET_NAME/' : undefined, output: "export", }; export default nextConfig;

Nuevamente, asegúrese de reemplazar "somerandombucket123" con el nombre de su depósito. Notará en el fragmento de código anterior que agregamos lógica adicional para tener en cuenta el nombre de nuestro depósito cuando la variable de entorno del nodo es producción (establecida por Next.js). Estamos agregando un prefijo de activo para corregir los errores de recurso no encontrado en el archivo de configuración y contabilizando el error de enrutamiento en nuestra página de inicio anteponiendo la ruta con el nombre de nuestro depósito. Carguemos nuestro código ahora y veamos si funciona. Una vez más, comience: npm run upload. Vuelva a su sitio web y vuelva a cargar la página. ¿Como lo hicimos? El sitio debe reflejar lo que tenemos localmente ahora. Al comienzo del proceso, si tuviéramos que crear el depósito para que coincida con nuestro nombre de dominio, tendríamos errores de recursos pero aún tendríamos el problema de enrutamiento del cliente. Desafortunadamente, un inconveniente de este enfoque es el código adicional necesario para agregar el sufijo .html a las rutas para el servicio de producción.

Próximos pasos 😎

Más adelante, cubriré la adición de los registros DNS y los cambios de configuración necesarios en nuestro depósito para servir un dominio personalizado, así como la configuración de SSL para nuestro sitio web. Espero que hayas aprendido algo hoy y en el futuro hablaré sobre algunas ideas sobre:

• Uso del nivel gratuito de Cloudflare para redirecciones de página y SSL
• Configurar Google Analytics y optimizar SEO

¡Gracias por leer y saludos!