Créer un site web personnel gratuit avec GitHub, Hugo, Netlify et TinaCMS
Publié le 2 mars 2023 par Andrew Owen (9 minutes)
Mon premier article de blog de 2022 portait sur la création d’un site web personnel gratuit avec GitHub, Hugo, Netlify and Forestry. Mais Forestry doit être abandonné à la fin de ce mois. Il s’agit donc d’un remaniement de cet article qui utilise le successeur de Forestry, TinaCMS. Si vous avez besoin de migrer, un outil et un guide sont disponibles. Vous pouvez aussi le faire à la dure et suivre mon article du début de l’année.
J’ai passé la majeure partie de l’année dernière à défendre les intérêts des développeurs, et j’ai pensé que mon site web personnel devait être une solution plus moderne que WordPress. Dans un précédent emploi, j’avais construit un portail pour les développeurs avec Hugo et j’avais parlé à des gens de Netlify et de Forestry. J’avais également un compte GitHub. Ce qui rendait cette solution particulièrement attrayante, c’est que, hormis les frais de nom de domaine, elle ne coûtait rien. Hugo est un logiciel libre. Et GitHub, Netlify et TinaCMS ont tous un niveau gratuit pour les sites web personnels.
Ensuite, j’ai dû 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. Je recommande de trouver un thème hébergé sur GitHub avec l’option de déploiement sur Netlify. Vous pouvez forker le dépôt (créer une exemplaire dans votre adéquat dépôt) et le déployer automatiquement. Il ne vous se repose plus qu’à ajouter le support de TinaCMS.
TinaCMS a parcouru un long chemin depuis sa sortie de la version bêta en novembre 2022. Au fur et à mesure que les utilisateurs l’adoptent, il devient de plus en plus mature. Et cela se reflète également dans la documentation. Je m’attendais à devoir écrire un guide pour configurer Hugo sur Tina, mais cela a déjà été fait.
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 simple 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 en Tina Cloud.
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 ne s’affichaient pas, 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, vous pouvez vous concentrer sur la rédaction de votre blog en Tina Cloud. Si vous avez besoin d’apporter des modifications au site, vous pouvez le faire localement dans TinaCMS. Ce qui, pour un site personnel, signifie que vous pouvez vous passer de la mise en scène et déployer vers votre dépôt principal à GitHub.
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 dans des applications web comme Tina Cloud 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 sur TinaCMS à 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. Après quelques commentaires d’utilisateurs, j’ai aussi fixé la taille de la police de base à 17 pixels.
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. Vous n’avez plus besoin d’utiliser un shortcode, et TinaCMS vous permet de sélectionner la balise lorsque vous entrez le Markdown pour commencer un bloc de code.
Une fois le site opérationnel, j’ai apporté quelques modifications au thème:
All dans le portfolio (le tagging ne fonctionnait pas d’emblée).Hugo a un support RSS intégré. 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.
Il existe de nombreuses options pour ajouter une recherche, mais je pense que la solution de Victoria Drake, qui utilise Lunr, est la meilleure pour un site personnel: https://victoria.dev/posts/add-search-to-hugo-static-sites-with-lunr/. La seule chose que j’ai eu à 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.
Il est bon de savoir qui est votre public et quels sont les sujets de blog qui suscitent le plus d’intérêt. Je vous recommande d’ajouter Google Analytics. Après avoir ouvert un compte, il vous suffit d’indiquer votre identifiant de suivi dans votre fichier de configuration et d’ajouter un court code au fichier partiel head.html. Vous pouvez également l’ajouter en tant que snippet à Netlify (j’ai trouvé que c’était l’approche la plus fiable).
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. Vous pouvez les ajouter en première page dans votre collection TinaCMS (sous forme de liste). L’ajout de tags aux articles remplit la page des tags, mais n’affiche pas les tags sur les 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>
La dernière chose que j’ai ajoutée est une page 404 personnalisé. Après cela, tout est prêt.
Netlify a récemment ajouté un support pour les déploiements planifiés. Cependant, comme j’utilise déjà GitHub, il est beaucoup plus facile d’utiliser les GitHub Actions et les web hooks. J’ai trouvé un excellent guide sur le blog de MC Naveen. Pour résumer, dans Netlify, allez dans Settings > Buld & Deploy > Build hooks et ajoutez un build hook. Copiez l’URL. Ensuite, créez cette action GitHub:
name: Trigger Netlify Build
on:
schedule:
# Run at 0000 daily
- cron: '0 0 * * *'
jobs:
build:
name: Request Netlify Webhook
runs-on: ubuntu-latest
steps:
- name: Curl request
run: curl -X POST -d {} URL_GOT_FROM_NETLIFY
Vous pouvez obtenir de l’aide sur la syntaxe cron à Cron Helper.
Comme d’autres avant moi, j’ai cherché un moyen d’ajouter un bouton de copie aux blocs de code chromatique dans Hugo. J’ai trouvé la solution originale de Danny Guo et d’autres solutions dérivées. Mais ce n’est que lorsque j’ai lu ce blog article que j’ai pu le faire fonctionner sur mon site. La principale modification que j’ai apportée a été d’utiliser button.innerHTML au lieu de button.innerText pour utiliser une icône Font Awesome à la place des mots, éliminant ainsi le besoin de traduction.
Image: Original par Toa Heftiba. J’ai utilisé l’une des images de Toa fournie avec le thème Kross dans le article original, donc je voulais mettre en valeur son travail à nouveau. L’image précédente n’était pas exactement une forêt. Celle-ci n’est pas précisément un alpaga.
J’ai adapté la solution d’Ashish Lahoti pour les icônes sociales. La partie cruciale était de savoir comment former les URLs requises par les différentes APIs.
J’ai utilisé l’adaptation d’Atanas Yonkov du code de Dan Abramov. Il s’agit d’intervertir la classe sur la balise body. Cela fonctionne très bien, mais il a fallu un certain temps pour régler le CSS et le valider avec Lighthouse pour l’accessibilité. J’ai dû abandonner l’indication de texte et les ombres. Par défaut, ma solution utilise les paramètres du système d’exploitation, mais vous pouvez basculer n’importe quelle page entre clair et foncé.
TinaCMS a récemment mis en place un système de recherche. Pour l’activer, vous devez créer un jeton de recherche et mettre à jour votre fichier de configuration.
J’utilise périodiquement un vérificateur de liens brisés pour valider les liens internes et externes. Malheureusement, au fil du temps, les liens externes valides se brisent et il est justifié de créer un lien vers la version Wayback Mahine au lieu de l’original. L’inconvénient est que vous n’êtes alors pas sur la dernière version. Si seulement nous avions eu Projet Xanadu à la place.