La guía del programador perezoso para mantener un sitio web personal

Muchos desarrolladores tienen un sitio web personal o les gustaría tener uno.

Si bien existen muchas opciones excelentes para crear un sitio web hermoso sin ninguna habilidad de codificación, somos desarrolladores de software, por lo que queremos mostrar nuestras habilidades y crear algo desde cero.

Codificar el sitio web es una cosa, y puede terminarlo en 1 o 2 días. Pero una vez que su sitio web está activo, debe mantenerlo para asegurarse de que esté disponible, actualizado y seguro.

A continuación, veremos cómo crear y mantener un sitio web personal con el mínimo esfuerzo en 10 sencillos pasos. Porque, si bien nos encanta programar, también nos encanta pasar tiempo lejos de la computadora. 🌳🤸🍝

Usaré mi sitio web que recientemente reconstruí en React como ejemplo. Puede encontrar el código fuente en mi repositorio de GitHub .

Los siguientes consejos y trucos asumen un sitio web estático súper simple que solo consta de una parte frontal. Sin embargo, podría extender fácilmente estos conceptos a proyectos más complejos, incluidos un backend, una base de datos u otras piezas de infraestructura.

No entraremos en detalles para ninguna de las tecnologías mencionadas, sino que daremos una descripción general de alto nivel para mantenerlo independiente de la tecnología.

1. Configurar un repositorio

Elija una plataforma de desarrollo como GitHub o GitLab y configure un repositorio nuevo y vacío. Asegúrese de incluir una licencia y agregue un archivo README, para que la comunidad sepa qué pueden hacer con su código.

2. Elija un marco JS

Elija un marco o biblioteca de JavaScript como React, Vue o Svelte para usar en la creación de su sitio web. O no lo haga, y vaya con Vanilla HTML y JavaScript si eso es algo que quiere probar.

Al elegir qué marco elegir, lo más importante es que sea algo con lo que disfrute trabajar.

Este es su sitio web, y puede usar las herramientas que desee. Podrías elegir algo que ya conoces y te gusta, o probar algo completamente nuevo que te haya despertado la curiosidad.

Construí mi primera página de inicio personal en Vue.js. Aproximadamente un año después, lo reconstruí en React porque quería obtener más experiencia práctica en React y probar algunas bibliotecas de React.

Utilice las herramientas de compilación de su marco JS para generar un código repetitivo y obtenga un ejemplo simple al estilo de Hello World servido en localhost.

3. Elija una biblioteca de componentes de interfaz de usuario

Este paso es opcional, pero dado que estamos hablando de mantener el esfuerzo mínimo aquí, recomendaría incluir una biblioteca de componentes de UI como Material UI o Bootstrap en su proyecto. Elegí Chakra UI para mi sitio web.

Estas bibliotecas vienen con un conjunto de componentes de la interfaz de usuario, así como utilidades para el diseño y el estilo, y le permiten construir muy rápido.

Asegúrese de elegir una biblioteca de componentes bien documentada, que le parezca visualmente atractiva, que incluya muchos componentes y que pueda personalizarse fácilmente. Para personalizar la apariencia de la biblioteca en su sitio web, puede ser divertido jugar con fuentes y combinaciones de colores. 🎨

4. Construye algo súper simple

Piense en las piezas de información que desea mostrar en su página de inicio y luego siga adelante y cree algo utilizando los componentes de la biblioteca de componentes de la interfaz de usuario. No lo pienses demasiado.

El objetivo principal ahora es sacar algo en vivo rápidamente, y como Voltaire ya sabía, la perfección es enemiga de lo bueno.

Si tiene mucho que decir y muchas ideas sobre qué mostrar en su sitio web, ¡genial! Continúe y cree, pero primero haga un plan sobre cómo organizar su contenido: piense en enrutamiento, diferentes vistas, secciones, diseño, navegación, etc.

Pero si eres como yo, podrías preguntarte, en este punto, qué poner en tu página de inicio y por qué deberías crear una porque ¡¿A QUIÉN LE IMPORTARÁ?! 😳

Tus sentimientos son totalmente válidos, pero déjame decirte que no necesitas el permiso de nadie ni contenido sofisticado para tener presencia en línea.

Manténgalo súper simple y simplemente comparta algunas cosas sobre usted que se sienta cómodo compartiendo con los visitantes (que puede ser cualquier persona con acceso a Internet, tenga eso en cuenta).

Para mi sitio web, lo mantuve bastante minimalista con una imagen y un eslogan sobre mí, una lista de mi pila tecnológica, algunas cosas que me gustan y algunas recomendaciones de libros. 📚 También incluí enlaces a mi LinkedIn y GitHub.

5. Agrega algo divertido

En el Paso 4, construimos algo súper simple, pero simple no debería significar aburrido. Así que ahora, pongámonos interactivos. 🚀

Trate de pensar en algunas maneras fáciles de hacer que la visita a su sitio web sea más divertida e interesante. Eso podría incluir cosas como animaciones, interacciones del usuario o cambios en el esquema de color. Sin embargo, no reinventes la rueda.

Si tiene una idea de qué hacer, es probable que ya exista un paquete npm que haga exactamente eso.

Opté por una animación de desplazamiento para la barra de navegación, un botón para alternar entre el modo oscuro y claro con una transición agradable y un botón de icono que inicia una fiesta de confeti sorpresa usando

reaccionar-confeti .

Y eso es todo, ¡te has creado un sitio web! 🥳 Veamos a continuación cómo implementarlo y mantenerlo.

6. Implementar

Hay muchas opciones sobre cómo implementar su sitio web en Internet completamente gratis, como Netlify, Vercel o GitHub Pages.

Los pasos exactos dependerán del proveedor que elija, así que siga las guías hasta que su sitio web esté activo bajo alguna URL.

Fui con Netlify y lo encontré increíblemente fácil de configurar.

Como paso opcional, puede decidir comprar un nombre de dominio personalizado y conectarlo con el DNS de su proveedor para reemplazar la URL arbitraria que obtuvo. No es necesario que haga eso, pero creo que un nombre de dominio personalizado es un buen toque, y comprar un dominio no debería costar mucho más de 10 $ al año.

7. Configurar CI/CD

Ahora que su sitio web está activo en Internet, desea asegurarse de no romperlo accidentalmente con confirmaciones futuras. También desea implementar automáticamente la última versión de su rama main .

Es posible que su plataforma de desarrollo ya venga con herramientas de CI/CD integradas, como GitHub Actions o GitLab CI/CD.

Estoy usando GitHub Actions ya que mi repositorio vive en GitHub.

Para la integración continua, puede configurar algunas comprobaciones automáticas para cada solicitud de extracción y cada fusión con la rama main . Eso podría incluir controles como linting & formateo o pruebas unitarias.

También hay muchas plantillas disponibles, por ejemplo, uso una GitHub Action preconstruida para descubrir vulnerabilidades con CodeQL.

Para la implementación continua, puede configurar su propio script de implementación que se ejecuta en cada envío a main después de que se hayan completado todas las comprobaciones. Pero dependiendo del proveedor de alojamiento que elija en el Paso 6, es posible que no tenga que hacer nada.

Netlify, por ejemplo, se integra muy bien con GitHub para que la rama main se implemente automáticamente.

8. Use Dependabot para mantener sus dependencias actualizadas

Construimos un sitio web, lo pusimos en marcha y ahora todo lo que queremos hacer es relajarnos. Pero el ecosistema JS evoluciona rápidamente, al igual que sus vulnerabilidades.

Queremos asegurarnos de que nuestras dependencias estén actualizadas para mantener nuestra aplicación segura, pero la administración de dependencias de npm puede ser dolorosa y, ciertamente, no queremos buscar actualizaciones todos los días.

Afortunadamente, existe una pequeña herramienta brillante llamada Dependabot que puede encargarse de todo eso por nosotros. 🤖 Dependabot es una herramienta creada por GitHub para actualizaciones de dependencia automatizadas. Ahora también hay disponible una versión para GitLab.

Todo lo que tiene que hacer es agregar un archivo dependabot.yml y GitHub creará automáticamente solicitudes de extracción cuando esté disponible una nueva versión de los paquetes que usa. Puede configurar Dependabot en el archivo YAML, para establecer, por ejemplo, el Asignatario de PR y la cantidad máxima de PR abiertos.

Dado que configuramos algunas verificaciones automáticas para PR en el Paso 7, estas se ejecutarán con cada PR de Dependabot, y podemos estar seguros de que una nueva versión no dañará nuestro sitio web.

En la configuración de seguridad del repositorio, también puede configurar dependabot para que le avise sobre cualquier vulnerabilidad en sus dependencias.

9. Comprueba si hay problemas de accesibilidad

La accesibilidad es un tema tan extraño: es muy importante, pero a menudo se descuida, a pesar de que hay muchas cosas al alcance de la mano cuando se trata de mejorar la accesibilidad de un sitio web.

Si usa un marco JS y una biblioteca de componentes de interfaz de usuario, su puntaje de accesibilidad no debería ser completamente terrible. Probablemente aún se pueda mejorar, especialmente si incluyó fuentes personalizadas o esquemas de color.

Puede ejecutar una herramienta como Lighthouse en Chrome Dev Tools para descubrir posibles mejoras. Lighthouse generará un informe para usted y sugerirá cambios para mejorar la accesibilidad.

Estas sugerencias suelen ser fáciles de implementar, como aumentar el tamaño de la fuente, cambiar el contraste entre el texto y el fondo o reorganizar el orden de los elementos HTML en el DOM.

Lighthouse también puede generar informes de rendimiento, mejores prácticas y SEO. 🆒

10. Ejecute un trabajo Cron para hacer ping a su sitio web

Después de configurar mi sitio web, sentí la necesidad de verificar al menos una vez al día si todavía estaba allí. 🕵️‍♀️

Al principio, me alegraba cada vez que veía que mi sitio web aún estaba disponible, pero luego se volvió aburrido rápidamente.

Para asegurarse de recibir una notificación automática si su sitio web deja de funcionar por cualquier motivo, puede configurar un trabajo cron que simplemente haga ping a la URL de su sitio web a intervalos regulares.

Si su proyecto incluye un backend y una base de datos, también puede configurar algunas pruebas de humo básicas que ejecutan, por ejemplo, algunas solicitudes GET en su API.

En mi caso, acabo de configurar otra acción de GitHub que se ejecuta una vez al día y hace ping a mi página. Aumente la frecuencia según lo considere adecuado para su página de inicio y el tipo de tráfico que espera.

Conclusión

¡Y hemos terminado! Por ahora al menos.

Para mí, mi sitio web sirve ante todo como un patio de recreo para probar tecnologías que me interesan, por lo que me gusta modificarlo de vez en cuando. Te animo a que revises regularmente el código de tu sitio web y te diviertas con él. 💃

Espero que esta guía le haya dado una idea de lo fácil que puede ser crear y mantener una página de inicio personal. Probablemente podrías construir algo simple en 1 o 2 días (si eres como yo, agrega otros dos días para obtener el diseño CSS correcto 🙄).

La implementación de su sitio web y la adición de algo de automatización para facilitar el mantenimiento se pueden realizar en menos de 2 horas.

¡Espero ver todos los increíbles sitios web que crearás! 🤩