Comment créer un bon site web personnel

Que vous soyez un étudiant en informatique à la recherche du premier stage ou que vous vouliez vous lancer dans le secteur des technologies, disposer d'un site web personnel est un excellent moyen de faire connaître votre nom aux entreprises et aux recruteurs. Cependant, un site Web personnel est beaucoup plus qu'un CV; il représente votre propre coin d'Internet avec lequel les visiteurs peuvent interagir. Les bons sites Web personnels ont une apparence soignée et transmettent efficacement des informations clés sur vous-même et sur vos réalisations.

Par où je commence?

Si vous avez de l'expérience dans le développement Web ou si vous avez déjà créé votre propre site Web personnel, vous pouvez ignorer cette section et aller à la section «Directives».

Il existe de nombreuses ressources en ligne pour vous aider à démarrer à chaque étape de la création d'un site Web, de la sélection d'un modèle à la publication de votre création. Voici quelques points importants à prendre en compte lors de la création de votre propre site Web personnel et de sa mise à la disposition du public sur Internet.

Devrais-je utiliser un modèle?

Si vous essayez de créer un site Web entièrement à partir de rien, cela prendrait des heures et des heures d'efforts pour le rendre beau. Vous devrez mettre en œuvre une conception adaptative pour les écrans mobiles, gérer les nombreuses bizarreries de CSS et réfléchir à la conception de chaque aspect du site.

Vous n'êtes pas obligé de faire tout ce travail. Sauf si vous êtes vraiment intéressé par chaque complexité de la pile frontale typique, vous devriez envisager de partir d'un modèle. HTML5Up fournit gratuitement un grand nombre de modèles de haute qualité. Avec quelques connaissances de base en HTML et CSS, vous pouvez personnaliser le modèle pour mettre en valeur vos réalisations professionnelles.

Devrais-je utiliser un générateur de site statique?

Logos Jekyll et Hugo.

Si vous pensez que modifier manuellement le HTML est trop désagréable et que vous êtes prêt à consacrer un peu de temps pour apprendre de nouvelles choses, ou si vous envisagez également de maintenir un blog, vous devriez envisager d'utiliser un générateur de site statique. Les générateurs de sites statiques prennent les fichiers de configuration et de Markdown et les appliquent à un thème (constitué de dispositions et de modèles) pour générer une structure de fichiers HTML. David Walsh a écrit un article exhaustif présentant le concept de générateur de site statique. c'est une lecture indispensable avant d'explorer cette option plus avant.

Les deux moteurs de génération de sites statiques les plus populaires sont Jekyll et Hugo. GitHub a un support intégré pour Jekyll et de nombreux blogueurs l'utilisent, mais cela nécessite l'installation de Ruby. D'autre part, le moteur Hugo lui-même est un simple fichier exécutable autonome. C'est l'une des raisons pour lesquelles je préfère utiliser Hugo plutôt que Jekyll.

Personnellement, je préférerais utiliser un générateur de site statique que d’éditer les modèles HTML5 à la main; Cependant, c’est finalement à vous de décider.

Où puis-je héberger mon site web personnel?

GitHub Pages est le moyen le plus simple de mettre votre contenu en ligne. Ils fournissent des tutoriels pour que même un débutant complet puisse obtenir leur site web en un rien de temps. Vous pouvez même configurer votre site Web pour qu'il apparaisse sur un domaine personnalisé au lieu de votre domaine de pages GitHub par défaut: $ {GITHUB_USERNAME} .github.io. Pour cela, vous devrez enregistrer un nom de domaine. De nombreux hackathons proposent des domaines gratuits via Namecheap, Domain.com ou GoDaddy, mais j'utilise personnellement Name.com.

Si vous ne pouvez pas accéder à un nom de domaine gratuit, l’achat d’un nom de domaine n’est de toute façon pas onéreux. Généralement, ils coûtent entre 10 et 20 USD avec des frais de renouvellement annuels similaires. Parfois, vous pourrez peut-être profiter de remises sur les enregistrements de domaine, alors cherchez avant d'acheter votre nom de domaine.

Des lignes directrices

Alors, qu'est-ce qui rend un site Web personnel vraiment bien? Après avoir passé en revue les conseils du groupe Facebook «Sites Web HH et curriculum vitae», j'ai élaboré ces lignes directrices. Elles ne sont pas censées être des règles strictes, comme c’est le cas, et il existe probablement des exceptions à ces directives, mais elles doivent tout simplement être prises en compte lors de la création ou de la mise à jour de votre site Web personnel.

Fournissez des liens vers votre CV, LinkedIn et GitHub

Deux sites Web essentiels pour établir votre présence en ligne dans le secteur des technologies.

Les liens vers votre présence professionnelle en ligne sont indispensables sur tout site Web personnel axé sur la technologie. Pour le secteur de la technologie, il s’agirait de liens vers votre CV, votre profil LinkedIn et votre compte GitHub. Tant que votre site Web personnel les met bien en évidence, les recruteurs peuvent facilement consulter vos réalisations plus en détail.

N'ayez pas peur de montrer un peu de personnalité

Sur un CV, vous êtes limité à une représentation textuelle de vos réalisations. Mais ces restrictions ne s'appliquent pas aux sites Web. Sur votre site Web personnel, vous avez la possibilité de vous exprimer et de définir vos intérêts et vos passe-temps.

Prenez-vous des photos sympas avec votre appareil photo reflex numérique? Fais-tu de la dope beat pendant ton temps libre? Ou écrivez-vous des articles de blog inspirants sur les événements de la vie? Montrez-les sur votre site Web et fournissez également des liens pertinents! J'ai vu des gens inclure des liens vers des profils sur ces sites.

  • Gazouillement
  • Quora
  • Moyen
  • Dribbble
  • Instagram
  • VSCO
  • Pinterest
  • Spotify

Rendez votre site Web adapté aux mobiles

Selon Google Analytics, 21% des visiteurs de mon site en juillet se trouvaient sur des appareils mobiles. C’est un nombre important de personnes, et cela pourrait aussi inclure certains recruteurs. Il est donc important que votre site Web soit esthétique sur les smartphones et les tablettes, ainsi que sur les ordinateurs de bureau.

Heureusement, vous pouvez facilement tester votre site Web sur différentes tailles d'écran à l'aide de devtools de Chrome. Si votre site Web a l'air moche sur de petits écrans, vous devriez envisager de le vider de l'écran ou de modifier la disposition dans le code HTML et / ou CSS. Par exemple, j’ai inclus cette règle CSS sur ma page de destination afin d’ajuster la taille des polices d’écran sur des écrans de 420 pixels de large ou moins.

Écran @média et (largeur maximale du périphérique: 420px) {
    h1 {
        taille de police: 56px; / * Normalement 70px * /
    }
si un {
        / * Cible les icônes font-awesome * /
        taille de police: 22px; / * Normalement 26px * /
        padding-left: 6px; / * Normalement 12px * /
        padding-right: 6px; / * Normalement 12px * /
    }
}

Évitez l'obésité et la paresse des sites Web

Illustration de Jr Casas.

Au cours des deux dernières années, la taille des pages des sites Web a connu une tendance à la hausse. Maciej Cegłowski a expliqué cette crise de «l'obésité des sites Web» dans un article de blog de 2015; Son principal argument est que de plus en plus de sites Web à base de texte, tels que les sites Web personnels, chargent trop lentement les connexions mobiles, car elles consomment trop de bande passante. Il note que ces sites Web l'emportent souvent sur les plus longs livres de la littérature russe, connus pour leur "lourdeur".

Je soutiens que la taille des sites Web textuels ne devrait pas dépasser celle des principaux ouvrages de la littérature russe. C'est un critère généreux. J'aurais pu choisir de la littérature française, remplie de petits livres minces, mais j'y suis allé intentionnellement avec des romans russes et leur réputation de lourdeur.
- Maciej Cegłowski

Réduire la taille des actifs de votre site - images, CSS et JavaScript - améliorera définitivement le temps de chargement de votre site. Vous ne devriez pas avoir de petites icônes pesant des centaines de kilo-octets lorsque vous pouviez les réduire, économisant ainsi 90% de la bande passante utilisée. Et vous ne devriez certainement pas avoir une image d'arrière-plan animée de dix mégaoctets sur votre site lorsqu'une image fixe suffirait littéralement à * un pour cent * de cette taille.

Désormais, vous n'avez plus besoin d'optimiser votre utilisation de la bande passante ni votre temps de chargement, et essayez de trouver la qualité de compression JPG exacte pour vos images, mais essayez au moins de faire attention aux visiteurs ayant une mauvaise connexion Internet.

Voici quelques directives à suivre pour lutter contre l'obésité et la morosité sur les sites Web.

  • Gardez vos images petites; leurs tailles s'additionnent assez rapidement et peuvent consommer beaucoup de bande passante, en particulier avec une mauvaise mise en cache. Idéalement, chaque image devrait peser moins de 150 à 200 kilo-octets.
  • Utilisez un réseau de diffusion de contenu (CDN) pour que votre site Web se charge plus rapidement pour les visiteurs du monde entier. Je suggère Cloudflare car il est gratuit et adapté aux débutants. Karan Thakkar a écrit un excellent article sur FreeCodeCamp sur la configuration de votre site Web avec le CDN de Cloudflare.
  • Réduisez votre CSS et votre JavaScript pour qu'ils pèsent moins et utilisent moins de bande passante. Le tutoriel de Karan devrait également couvrir cela.
  • N'importez pas trop de bibliothèques JavaScript. Très probablement, votre site ne devrait nécessiter que jQuery et Bootstrap. Vous n’avez probablement pas besoin d’utiliser React, Angular ou un autre framework JavaScript du jour pour votre site.

Inclure les balises Open Graph

Si quelqu'un souhaite partager votre site Web sur Facebook, l'aperçu du lien sera absolument horrible à moins que vous n'ayez spécifié les balises Open Graph dans la balise du site Web. Ici, cinq propriétés sont particulièrement importantes.

  • og: image - Spécifie l'URL absolue de l'image d'aperçu. Le positionnement de l'image dépendra de ses dimensions. Son comportement est défini dans les meilleures pratiques de partage de Facebook pour les sites Web.
  • og: titre - Spécifie le titre de l'aperçu.
  • og: description - Spécifie la description de l'aperçu. Si elle est vide, la description de l'aperçu correspond par défaut au premier texte rencontré dans le code HTML, qui peut ne pas représenter avec précision le contenu de votre site.
  • og: url - Spécifie l’URL du site Web sans paramètres de chaîne de requête.
  • og: type - Spécifie le type de contenu à cette URL. Pour les sites Web personnels, cela devrait être «site Web».
Un diagramme annoté de l'aperçu du lien de mon site Web personnel, andrewyang.xyz

Les balises Open Graph pour cet aperçu ressemblent à ceci:





Vous pouvez tester les balises Open Graph sur votre site en utilisant l’outil de débogage Open Graph de Facebook. Il montre même à quoi ressemblerait l'aperçu du lien si quelqu'un partageait la page en ce moment.

Spécifiez Google Structured Data pour un meilleur référencement

Habituellement, votre site Web ne sera vu que par les recruteurs. Toutefois, si vous souhaitez vous efforcer d’améliorer le référencement de votre site sur Google, vous devez spécifier Données structurées à l’aide de JSON-LD (JSON pour Données liées) dans ; étiquette. Voici les données structurées pour ma page de destination: