Créer un site web personnel gratuit avec Forestry, GitHub, Hugo et Netlify
Publié le 6 janvier 2022 par Andrew Owen (7 minutes)
En mai 2021, j’ai entamé une nouvelle carrière en tant que défenseur des développeurs. J’ai enregistré mon domaine pour la première fois dans les années 1990, mais il n’a été qu’un simple emplacement jusqu’à présent. Il a également pris de l’âge. De plus, un défenseur des développeurs n’a pas vraiment intérêt à gérer son propre site web sur WordPress, à moins qu’il ne l’héberge lui-même.
Lorsque j’étais rédacteur d’API, j’ai construit un portail pour les développeurs en utilisant Hugo, et bien que nous ayons fini par nous héberger nous-mêmes, j’avais parlé à Forestry et à Netlify. En tant que développeur, je suis aussi un utilisateur de longue date de GitHub. Je savais donc que c’était la solution que je voulais choisir. En prime, ils proposent tous un niveau gratuit pour les sites web personnels.
Ensuite, je devais trouver un thème Hugo de style portfolio qui s’intégrerait à tous ces services. Après quelques recherches, j’ai décidé d’utiliser Kross, un thème gratuit sous licence MIT de Themefisher. Il est construit sur Bootstrap, HTML5 et CSS3.
Il existe de nombreux tutoriels sur ce type d’installation, je ne mentionnerai ainsi que le principal problème que j’ai trouvé. Vous devez cliquer sur l’option déployer vers Netlify et ensuite configurer manuellement Forestry.
Vous aurez un site opérationnel très rapidement, mais vous voudrez changer le texte et les images de remplacement. J’ai trouvé que la façon la plus facile de remplacer les images était de passer directement par l’interface web de GitHub. Pour remplacer les SVG d’illustration, j’ai dû éditer manuellement les fichiers dans VS Code pour définir la taille d’affichage correcte. Pour le texte, épargnez-vous la douleur des erreurs de construction induites par YAML et faites le tout dans Forestry.
Le formulaire de contact semble dépendre d’un service non libre, je l’ai donc désactivé pour l’instant et fourni un lien mailto à la place. Il paraît également y avoir un bug dans la section Portfolio où, avec les tags activés, certains contenus n’étaient pas rendus, ainsi pour l’instant j’ai supprimé les tags.
Je n’étais pas complètement satisfait de la typographie, mais à l’origine le thème Kross entier est hérité en tant que sous-module, et je n’ai fait que surcharger les illustrations. De cette façon, si le thème était mis à jour, mon site serait automatiquement mis à jour aussi. Cependant, il y avait des changements que je devais faire et après environ une semaine, j’ai remplacé le sous-module par une copie locale du thème.
La majeure partie du contenu statique étant maintenant en place, je peux me concentrer sur la rédaction d’un blog DevRel. Et avec l’éditeur graphique de Forestry, ce sera super facile, à peine un inconvénient.
J’ai eu un problème avec le certificat SSL/TLS. Je l’ai résolu en faisant d’andrewowen.net le domaine primaire et de *.andrewowen.net le domaine de redirection dans les paramètres de Netlify.
Un outil que je trouve inestimable lorsque je travaille sur des applications web comme Forestry est LanguageTool. Il s’agit d’un correcteur grammatical, stylistique et orthographique multilingue. Le seul bémol est qu’il ne semble pas vérifier le texte de Forestry à l’intérieur des guillemets. Si vous l’utilisez, veillez donc à effectuer la vérification avant d’appliquer le style de guillemets.
L’autre chose que j’ai apprise après le lancement est que j’aurais dû vérifier comment le thème rend tous les styles. Il faisait des choses bizarres avec l’accentuation et les extraits de code, ce qui a nécessité quelques changements dans le thème. Heureusement, je n’ai eu qu’à modifier le fichier style.css dans le thème.
Si vous utilisez le thème Kross, je vous suggère d’effectuer les modifications suivantes:
ol {
list-style-type: decimal;
margin: 0
}
ul {
list-style-type: disc;
margin: 0
}
.content strong {
font-weight: 700;
color: #4c4c4c;
font-size: 15px;
line-height: 1.8;
font-family: Roboto, sans
}
Sinon, les numéros et les puces sont absents des listes et le style gras (strong) utilise la police de l’en-tête. J’ai également décidé de remplacer toutes les polices par IBM Plex, une alternative gratuite à Helvetica.
J’ai modifié le fichier layouts/index.html pour augmenter la taille des icônes des médias sociaux:
<!-- social icon -->
<ul class="list-unstyled ml-5 mt-3 position-relative zindex-1">
{{ range .Site.Params.social }}
<li style="font-size:32px" class="mb-3"><a class="text-white" href="{{.URL | safeURL }}"><i class="{{.icon}}"></i></a></li>
{{ end }}
</ul>
<!-- /social icon -->
J’ai également supprimé le contenu relatif à l’adresse électronique, au numéro de téléphone et à l’adresse du pied de page. Je m’attends à ce que la plupart des gens me contactent en utilisant l’un des liens vers les médias sociaux sur la page d’accueil. J’ai agrandi les icônes et ajouté le support de Font Awesome. La coloration syntaxique est prise en charge automatiquement dans Hugo avec Chroma, mais vous devez l’activer.
Comme note de suivi, à un moment donné, j’ai rencontré un problème de connexion entre Forestry et GitHub, ce dernier se plaignant de l’utilisation d’un certificat SHA-1. J’ai réajouté le repo à Forestry et supprimé l’autre version, et cela semble avoir résolu le problème.
Voici d’autres changements que j’ai effectués depuis mon article original:
All du portfolio (le balisage ne fonctionnait pas).L’une des choses sur ma liste de choses à faire était le support RSS. Il s’avère que c’est déjà le cas. Il suffit d’ajouter /index.xml au niveau où vous souhaitez que le flux soit généré. Par exemple: https://andrewowen.net/fr/blog/index.xml. Cependant, cela ne fonctionnera pas si vous avez baseurl="/" dans votre fichier config.toml. Vous devez définir votre URL de base réelle.
Une autre chose à ajouter était la recherche sur l’ensemble du site. Il y avait beaucoup d’options, mais je pense que la solution de Victoria Drake utilisant Lunr était la meilleure pour un site personnel: https://victoria.dev/blog/add-search-to-hugo-static-sites-with-lunr/. La seule chose que j’ai dû faire en plus des instructions a été d’ajouter le formulaire de recherche à la barre de navigation et de styliser la page de résultats pour qu’elle corresponde au reste du site.
J’ai finalement ajouté Google Analytics. Une fois que vous avez ouvert un compte, tout ce que vous avez à faire est de fournir votre ID de suivi dans votre fichier de configuration et d’ajouter un court code au head.html partiel. Vous pouvez également l’ajouter en tant que snippet à Netlify.
Maintenant que le blog DevRel est opérationnel depuis un certain temps, j’ai publié des articles sur Twitter et LinkedIn, en utilisant des tags pour aider les gens à découvrir mes articles. Mais jusqu’à présent, je n’ai pas utilisé de tags sur le site lui-même. Hugo prend en charge les taxonomies dès le départ. Sans rien faire, je peux voir une page tags.html. Mais je n’avais pas activé les tags sur les articles. Pour ce faire, j’ai édité le modèle d’article dans Forestry et j’ai ajouté des balises. Cela remplit la page des tags, mais n’ajoute pas les tags aux articles eux-mêmes. Pour ce faire, vous devez ajouter ce code à votre page single.html par défaut:
<div class="tags-list">
{{- with .Params.tags -}}
{{- if ge (len .) 1 -}}
{{- range . -}}
<a href="{{ $.Site.BaseURL }}tags/{{ . | urlize }}/">#{{ . }}</a>
{{ end -}}
{{- end -}}
{{- end -}}
</div>
Avec l’analyse activée, je peux voir que mon public est principalement basé aux États-Unis, à Taiwan, en Inde, en Corée du Sud et en Allemagne. Pour élargir cette audience, je vais devoir ajouter la localisation en français (parce que c’est la seule langue, à part l’anglais, dans laquelle je peux à peu près me débrouiller).
L’arrêt de Forestry est prévu pour fin mars 2023. Les utilisateurs actuels se verront offrir un chemin de migration vers TinaCMS, un CMS headless de nouvelle génération des créateurs de Forestry. Il est prévu de partager l’outil de migration à la mi-janvier.
Image: Original par Toa Heftiba.