Cómo crear un buen sitio web personal

Ya sea que sea un estudiante de ciencias de la computación en busca de la primera pasantía o alguien que intente ingresar a la industria de la tecnología, tener un sitio web personal es una excelente manera de dar a conocer su nombre a empresas y reclutadores. Sin embargo, un sitio web personal es mucho más que un currículum; representa su propio rincón de Internet con el que los visitantes pueden interactuar. Los buenos sitios web personales se ven pulidos y transmiten de manera efectiva información clave sobre usted y sus logros.

¿Dónde empiezo?

Si tiene experiencia en desarrollo web o ya ha creado su propio sitio web personal, puede omitir esta sección e ir a la sección "Directrices".

Hay muchos recursos en línea para ayudarlo a comenzar en cada paso de la creación de un sitio web, desde seleccionar una plantilla hasta publicar su creación. Aquí hay algunas cosas importantes a tener en cuenta al crear su propio sitio web personal y ponerlo a disposición del público en Internet.

¿Debo usar una plantilla?

Si intentas construir un sitio web completamente desde cero, tomaría horas y horas de esfuerzo hacer que se vea bien. Tendría que implementar un diseño receptivo para pantallas móviles, lidiar con las muchas peculiaridades de CSS y pensar en diseñar cada aspecto del sitio.

No tienes que hacer todo este trabajo. A menos que esté realmente interesado en cada complejidad de la pila típica de frontend, debe considerar comenzar desde una plantilla. HTML5Up proporciona un montón de plantillas de alta calidad de forma gratuita. Con algunos conocimientos básicos de HTML y CSS, puede personalizar la plantilla para mostrar sus logros profesionales.

¿Debo usar un generador de sitio estático?

Jekyll y Hugo logos.

Si crees que editar HTML manualmente es demasiado desagradable y estás dispuesto a dedicar algo de tiempo para aprender algunas cosas nuevas, o si también planeas mantener un blog, deberías considerar usar un generador de sitio estático. Los generadores de sitios estáticos toman Markdown y archivos de configuración y los aplican contra un tema, que consiste en diseños y plantillas, para generar una estructura de archivos HTML. David Walsh escribió un artículo completo que presenta el concepto de un generador de sitio estático; es una lectura obligada antes de explorar esta opción más adelante.

Los dos motores generadores de sitios estáticos más populares son Jekyll y Hugo. GitHub tiene soporte incorporado para Jekyll y muchos bloggers lo usan, pero requiere que instales Ruby. Por otro lado, el motor Hugo en sí es un simple archivo ejecutable independiente, que es una de las razones por las que prefiero usar Hugo sobre Jekyll.

Personalmente prefiero usar un generador de sitio estático que editar plantillas HTML5 a mano; Sin embargo, en última instancia depende de usted decidir.

¿Dónde alojo mi sitio web personal?

GitHub Pages es la forma más fácil de obtener su contenido en línea. Proporcionan tutoriales para que incluso un principiante completo pueda poner en funcionamiento su sitio web en poco tiempo. Incluso puede configurar su sitio web para que aparezca en un dominio personalizado en lugar de en su dominio predeterminado de páginas de GitHub: $ {GITHUB_USERNAME} .github.io. Para eso, deberá registrar un nombre de dominio. Muchos hackatones ofrecen dominios gratuitos a través de Namecheap, Domain.com o GoDaddy, pero yo personalmente uso Name.com.

Si no puede obtener acceso a un nombre de dominio gratuito, comprar uno no es prohibitivamente costoso de todos modos. Por lo general, cuestan entre 10 y 20 dólares por adelantado con una tarifa de renovación anual similar. A veces puede obtener descuentos en los registros de dominio, así que busque antes de comprar su nombre de dominio.

Pautas

Entonces, ¿qué hace que un sitio web personal sea bueno? Después de analizar los consejos del grupo de Facebook "Sitios web y currículums vitae de HH", se me ocurrieron estas pautas. No están destinados a ser reglas estrictas como si estuvieran establecidas en piedra, y probablemente existan excepciones a estas pautas, pero simplemente deben considerarse al crear o actualizar su sitio web personal.

Proporcione enlaces a su currículum, LinkedIn y GitHub

Dos sitios web esenciales para establecer su presencia en línea en la industria tecnológica.

Los enlaces a su presencia profesional en línea son imprescindibles en cualquier sitio web personal orientado a la tecnología. Para la industria tecnológica, estos serían enlaces a su currículum vitae, su perfil de LinkedIn y su cuenta de GitHub. Mientras su sitio web personal los destaque, los reclutadores pueden ver fácilmente sus logros con más detalle.

No tengas miedo de mostrar un poco de personalidad.

En un currículum vitae, está restringido a una representación de sus logros en gran parte solo de texto. Pero estas restricciones no se aplican a los sitios web. En su sitio web personal, tiene la oportunidad de expresarse y seleccionar sus intereses y pasatiempos.

¿Tomas fotos geniales con tu cámara réflex digital? ¿Haces ritmos de droga en tu tiempo libre? ¿O escribes publicaciones de blog inspiradoras sobre acontecimientos en la vida? ¡Muéstralos en tu sitio web y proporciona enlaces relevantes también! He visto personas que incluyen enlaces a perfiles en estos sitios web.

  • Gorjeo
  • Quora
  • Medio
  • Regatear
  • Instagram
  • VSCO
  • Pinterest
  • Spotify

Haga que su sitio web sea móvil

Según Google Analytics, el 21% de los visitantes de mi sitio en julio estaban en dispositivos móviles. Esa es una cantidad significativa de personas, y también podría incluir algunos reclutadores. Por lo tanto, es importante que su sitio web se vea bien en teléfonos inteligentes y tabletas, así como en computadoras de escritorio.

Afortunadamente, puedes probar fácilmente tu sitio web en varios tamaños de pantalla usando las herramientas de desarrollo de Chrome. Si su sitio web se ve feo en pantallas pequeñas, debe buscar ordenar la pantalla o ajustar el diseño en HTML y / o CSS. Por ejemplo, incluí esta regla CSS en mi página de destino para ajustar los tamaños de fuente en pantallas de 420 píxeles de ancho o menos.

@media screen y (max-device-width: 420px) {
    h1 {
        tamaño de fuente: 56px; / * Normalmente 70px * /
    }
i.fa {
        / * Se dirige a los iconos de fuente impresionante * /
        tamaño de fuente: 22px; / * Normalmente 26px * /
        relleno-izquierda: 6px; / * Normalmente 12px * /
        relleno derecho: 6px; / * Normalmente 12px * /
    }
}

Evite la obesidad y la lentitud del sitio web

Ilustración de Jr Casas.

En los últimos años, ha habido una tendencia creciente en los tamaños de página de los sitios web. Maciej Cegłowski explicó esta crisis de "obesidad en el sitio web" en una publicación de blog de 2015; Su punto principal es que cada vez más sitios web basados ​​en texto, como los sitios web personales, se cargan muy lentamente en las conexiones móviles porque consumen demasiado ancho de banda. Señala que estos sitios web a menudo superan a los libros más largos de la literatura rusa, conocidos por su "pesadez".

Sostengo que los sitios web basados ​​en texto no deben exceder en tamaño las principales obras de la literatura rusa. Este es un criterio generoso. Podría haber escogido literatura francesa, llena de pequeños libros delgados, pero fui intencionalmente con novelas rusas y su reputación de pesadez.
- Maciej Cegłowski

Reducir el tamaño de los activos de su sitio (imágenes, CSS y JavaScript) definitivamente mejorará el tiempo de carga de su sitio. No debería tener iconos pequeños que pesen cientos de kilobytes cuando podría reducirlos, tal vez ahorrando 90% en el ancho de banda utilizado. Y ciertamente no debería tener una imagen de fondo animada de diez megabytes en su sitio cuando una imagen fija literalmente * un por ciento * de ese tamaño sería suficiente.

Ahora no tiene que hiperoptimizar el uso del ancho de banda y el tiempo de carga, y sacar el pelo tratando de encontrar exactamente la calidad de compresión JPG correcta para sus imágenes, pero al menos trate de ser considerado con los visitantes con malas conexiones a Internet.

Aquí hay algunas pautas a seguir para combatir la obesidad y la lentitud del sitio web.

  • Mantenga sus imágenes pequeñas; sus tamaños se suman bastante rápido y pueden consumir mucho ancho de banda, especialmente con un mal almacenamiento en caché. Idealmente, cada imagen debería pesar menos de 150–200 kilobytes.
  • Use una red de entrega de contenido (CDN) para que su sitio web se cargue más rápidamente para los visitantes de todo el mundo. Sugiero Cloudflare porque es gratuito y apto para principiantes. Karan Thakkar escribió una gran publicación en FreeCodeCamp sobre cómo configurar su sitio web con el CDN de Cloudflare.
  • Minimice su CSS y JavaScript para que pesen menos y consuman menos ancho de banda. El tutorial de Karan también debería cubrir esto.
  • No importe demasiadas bibliotecas de JavaScript. Con toda probabilidad, su sitio solo debería necesitar jQuery y Bootstrap. Probablemente no necesite usar React, Angular u otro framework JavaScript del día para su sitio.

Incluir etiquetas de gráfico abierto

Si alguien quiere compartir su sitio web en Facebook, la vista previa del enlace se verá absolutamente horrible a menos que especifique etiquetas Open Graph en la etiqueta del sitio web. Aquí, hay cinco propiedades que son especialmente importantes.

  • og: image: especifica la URL absoluta de la imagen de vista previa. El posicionamiento de la imagen dependerá de sus dimensiones; su comportamiento se define en las mejores prácticas de intercambio de Facebook para sitios web.
  • og: title: especifica el título de la vista previa.
  • og: description: especifica la descripción de la vista previa. Si está vacío, la descripción de la vista previa por defecto es el primer texto encontrado en el HTML, que puede no representar con precisión el contenido de su sitio.
  • og: url: especifica la URL del sitio web sin parámetros de cadena de consulta.
  • og: type: especifica el tipo de contenido en esta URL. Para sitios web personales, este debería ser "sitio web".
Un diagrama anotado de la vista previa del enlace para mi sitio web personal, andrewyang.xyz

Las etiquetas de Open Graph para esa vista previa se verían así:





Puede probar las etiquetas de Open Graph en su sitio utilizando la práctica herramienta de depuración de Open Graph de Facebook. Incluso muestra cómo se vería la vista previa del enlace si alguien compartiera la página en este momento.

Especifique datos estructurados de Google para un mejor SEO

Por lo general, su sitio web solo será visto por los reclutadores. Sin embargo, si desea hacer un esfuerzo para mejorar el SEO de su sitio en Google, debe especificar los datos estructurados, utilizando JSON-LD (JSON para datos vinculados), en el ; etiqueta. Aquí están los datos estructurados para mi página de destino:


En este ejemplo, hay dos objetos de datos estructurados declarados: uno que contiene información sobre mí utilizando el esquema "Persona" y otro que contiene información sobre el sitio web que utiliza el esquema "Sitio web". Para la página de inicio y las publicaciones de mi blog, utilizo los esquemas "Blog" y "Página web", respectivamente, en lugar del esquema "Sitio web".

Hacer esto correctamente permitirá a Google analizar mejor su sitio web y hacer que se vea mejor en los resultados de búsqueda de Google.

¡Un agradecimiento especial a Abhinav Seelan por sugerir esto!

Corrector ortográfico

Por último, pero no menos importante, revise la ortografía de todo en su sitio web. No querrá escribir mal algo en su currículum y, de manera similar, no querría escribir mal nada en su sitio web. Considera reclutar a un amigo para que te ayude con el esfuerzo.

¡Espero que esta guía te ayude! He tenido la intención de escribir esta publicación desde que comenzó el verano, pero solo he llegado a escribirla recientemente. Volví a publicar esto desde mi blog, así que no te olvides de suscribirte y seguirme en Medium.

Recursos

  • Sitios web personales de Hackathon Hackers: una lista de sitios web personales enviados por miembros de Hackathon Hackers para su inspiración
  • HTML5Up: una lista de plantillas HTML5
  • Introducción a las páginas de GitHub: una guía para principiantes para configurar páginas de GitHub con Jekyll
  • Temas de Jekyll: una lista de temas para Jekyll
  • Inicio rápido de Hugo: una guía para principiantes sobre Hugo
  • Temas de Hugo: una lista de temas para Hugo
  • Cómo usar las herramientas de desarrollador de Chrome: una guía completa sobre el uso de las herramientas de desarrollador de Chrome para depurar su sitio web
  • Referencia de CSS de Mozilla Developer Network: referencia para todo lo relacionado con CSS: propiedades, selectores, etc.
  • Uso de un dominio personalizado en páginas de GitHub: una guía sobre cómo configurar su sitio web para usar un dominio personalizado
  • Herramienta de depuración de gráficos abiertos de Facebook: una excelente herramienta de depuración para ver cómo se ve la vista previa de su sitio cuando alguien lo comparte en Facebook
  • Introducción a los datos estructurados: una guía para principiantes sobre los datos estructurados de Google
  • Herramienta de prueba de datos estructurados de Google: una excelente herramienta de depuración para validar datos estructurados
  • Google PageSpeed ​​Insights: la herramienta de análisis de rendimiento web de Google, que sugiere optimizaciones para su sitio web
  • Prueba de velocidad del sitio web de Pingdom: una herramienta para analizar el tiempo de carga y el uso de ancho de banda de su sitio web con gran detalle
  • Una guía ilustrada para configurar su sitio web usando Github y Cloudflare: una guía para configurar su sitio web de páginas GitHub para usar CloudFlare para un soporte HTTPS fácil y un mejor rendimiento del sitio ... ¡gratis!
  • Sitios web y currículums de HH - sitio web personal y críticas de currículum