Jour 003 : Le site et quelques assets de plus

Tôt ce matin, Nicolas a pris le temps de réaliser rapidement ce site Internet. Voici ce qu’il en dit :

Mise en place du site

Jekyll

Je voulais un site internet simple et rapide. Quelque chose qui soit modifiable en Markdown parce que c’est un mode de saisie que j’apprécie, et surtout je voulais qu’il statique car je veux qu’il représente un minimum de ressource sur mon petit serveur local. Du coup je suis parti sur Jekyll. J’ai utilisé le theme Minimal Mistakes qui est très populaire.

Récemment, j’avais utilisé GRAV pour un autre projet et je voulais tester autre chose d’encore moins gourmand en ressources. Et je ne regrette pas !

Le résultat me convient tout à fait. Ca ne m’a pris que quelques heures pour le mettre en place et le personnaliser. Ce n’est pas du tout User Friendly à l’installation. Par contre une fois que c’est prêt, c’est très puissant. En une seule ligne de commande on peut publier un site sur un serveur distant très rapidement.

Mise en place et installation

J’aurais pu installer Jekyll sur le serveur mais finalement, j’ai préféré tout gardé sur mon poste de travail principal. Le but était de builder le site sur mon poste de travail et de le publier sur mon serveur. Ce dernier n’a donc rien à faire part le rendre accessible au public.

sudo apt-get install ruby-full build-essential zlib1g-dev
echo '# Install Ruby Gems to ~/gems' >> ~/.bashrc
echo 'export GEM_HOME="$HOME/gems"' >> ~/.bashrc
echo 'export PATH="$HOME/gems/bin:$PATH"' >> ~/.bashrc
source ~/.bashrc
gem install jekyll bundler
cd **/chemin/vers/mon/**
jekyll new **blog**
cd **/chemin/vers/mon/blog/**
bundle exec jekyll serve

Et voilà. le site fonctionne déjà sur http://localhost:4000. Les modifications effectuées sont appliquée en temps réel, et on a des logs d’erreur dans la console qui sert pour le serve

On peut ajouter des gems dans le Gemfile. A chaque fois qu’on fait ça, il faut exécuter ceci : bundle install

Ensuite, il faut relancer le serve. Si on modifie _config.yml, il faut aussi relancer le serve.

Personnellement, j’ai juste eu à ajouter ceci dans mon fichier Gemfile :

gem "jekyll-data"

Dans le group :jekyll_plugins do parce que le theme le demandait.

gem "minimal-mistakes-jekyll"

En bas du fichier pour activer le thème.

gem "jekyll-image-optim"

En bas du fichier pour me permettre d’optimiser les images

Ensuite j’ai récupéré quelques fichiers du thème ici pour le configurer.

• _config.yml
• _layouts/default.html
• _data/navigation.yml
• _pages/404.html
• _pages/category-archive.md
• _pages/tag-archive.md
• _pages/year-archive.md

Je les ai ouvert avec un editeur texte simple et personnalisés.

Publier un article

Je rédige mes articles avec Ghostwriter. Je peux faire ça hors ligne sur une interface ultra efficace. Je dépose mes articles au format .md dans le dossier des articles /_posts.

Pour les images, je les dépose dans /assets/images/. Dans mes posts, je fais des liens vers /assets/images/mon_image.jpg pour pouvoir voir mon image directement dans Ghostwriter. Et pour que les chemins ne soient pas cassés sur le site, je remplace tous les /assets/images/ par des /assets/images/. Pour faire, ça j’ai modifié le fichier _layout/default.html. J’ai remplacé { { content }}

par

{ { content | replace: "/assets/images/", "/assets/images/" }}

Et voilà. Mes images marchent bien en local hors ligne dans l’éditeur, dans l’émulateur serve, et en production.

Mettre en ligne le site

Quand j’ai terminé mes modifs, je peux lancer le build du site avec cette commande :

jekyll build

Le contenu statique de mon site est alors déposé dans le dossier _site/. Et je n’ai plus qu’à rendre se site accessible avec un apache ou nginx (Apache2 dans mon cas, sur un ubuntu server installé sur un vieux laptop).

Je me suis préparé un petit shellscript inspiré de celui-ci pour me permettre de publier directement sur mon serveur via ssh :

#!/bin/sh
# -----------------------------------------------------------
# commit-vps.sh
# -----------------------------------------------------------

# Variables

localjekyll="/chemin/vers/mon/blog/sur/mon/ordi"
remotewebroot="/chemin/du/blog/sur/le/serveur"
instancehost="host"
sshuser="user"
sshport="22"
sshidentity="~/.ssh/id_rsa"

# Execution

cd $localjekyll
# bundle install
jekyll build

echo "rsync to SSH host $instancehost ..."

rsync -vrhp -e "ssh -p $sshport -i $sshidentity" --exclude ".*" \
--rsync-path="sudo rsync" \
--delete-after \
--chmod=Du=rwx,Dg=rx,Do=rx,Fu=rw,Fg=r,Fo=r \
$localjekyll/_site/ $sshuser@$instancehost:$remotewebroot

echo "SSH connection closed. Done. Committed."

Bref, c’est hyper évolutif. Je pourrai facilement ajouter de nouvelles fonctionnalités par la suite.

Plus tard, je pense que je publierai les sources de mon site internet. Peut être sur Github ou sur un Gitlab perso. Ou simplement sous forme de zip. Je vais voir pour trouver la solution la plus sympa. (c’est dans la todo !)

La mise en place du travail collaboratif

On a commencé à mettre ça en place dès le début, mais on n’en a pas vraiment parlé encore. On utilise notre serveur Nextcloud familial pour partager nos fichiers entre nous. On peut donc travailler off line à la maison chacun sur notre post (en réseau local). Toutes les données sont partagées, mais restent chez nous.

Quelques nouveaux assets réalisés par Clément

Clément a bien avancé sur les assets. Voici ce qu’il nous en dit :

Aujourd’hui, je trouve que j’ai fait le plus important : finir les carrés de sols indispensables pour qu’on puisse faire les premiers essais (herbe, terre, sable, eau). Avec ça, on pourra réaliser des sentiers, des plaines pour guider le joueur.

J’ai fini les éléments qui font barrières (arbres, gros rochers, cailloux).

Prochainement quelques barrières de cailloux. Avec ça, on pourra limiter le jouer afin de ne pas lui permettre d’aller n’importe où. Aussi il faudra bientôt que j’ajoute des éléments d’histoire. Du genre les terriers des taupes farceuses 🤣

Les premiers brouillons pour les tiles d’eau et de sable

La première étape du dessin des rochers : Des aplats de couleurs.

Quelques détails d’ombres et de lumières ajoutés.

---