Un blog ?
Quand nous nous sommes décidés avec mon ami Sébastien (
coucou si tu passes par là) à organiser un roadtrip, nous avons bien sûr commencé par tant bien que mal essayer de planifier un itinéraire et des "endroits clefs" à visiter.
Notre itinéraire en Angleterre avec un passage au Pays de Galle.
Mais j'ai aussi tout de suite eu l'idée de coder un petit blog pour garder une trace de ce voyage et permettre à tous nos proches de nous suivre et voir quelques photos tous les jours.
Je n'avais pas encore eu l'occasion de tester le générateur de site statique Jekyll, c'était donc un petit projet idéal pour le faire et aussi imaginer un design simple et rapide à mettre en place.
Le personnage
J'ai eu pour idée d'illustrer ce blog personnel en créant un personnage me ressemblant le plus possible. J'ai donc créé le personnage en vectoriel sur sketch puis l'ai exporté en format svg pour qu'il s'affiche correctement à tous les formats possibles.
Le personnage qui me ressemble, avec une carte et un sac pour l'aspect voyage.
Page d'accueil
La page d'accueil, avec la mascote et les articles.
Sur l'accueil, on retrouve le personnage et le titre du blog dans un header puis la liste des articles du plus récent au plus ancien.
Du côté des polices, j'ai utilisé Futura pour les titres et les boutons et la navigation et Garamond Pro pour le texte des articles.
Les articles
Deux articles avec des images.
Les articles ont un aspect classique :
- Le titre
- La date de publication
- Le temps estimé de lecture (par rapport au nombre de mots)
- Le contenu (avec des images)
La police Garamond Pro offre un bon confort de lecture pour le corps des articles et la variante italique est élégante pour mettre en avant certains éléments.
Jekyll
Le blog est entièrement statique c'est-à-dire que dans la version sur le serveur, il n'y a que des fichiers HTML et CSS. Tout est généré par Jekyll, les posts sont écrits en markdown et ensuite converti en HTML suivant le patron pour les articles.
J'ai utilisé un préprocesseur scss et ai découpé les différents composants du site en fichiers facilitant ainsi la maintenance.
Le petit utilitaire calculant la durée de lecture des posts a été écrit en Ruby (langage utilisé par Jekyll).
N'hésitez pas à aller faire un tour sur le blog du roadtrip