Création d'une page sur le blog Alter Way

Nous allons voir comment créer des articles dans le blog Alter Way. Le process se calque sur nos workflow de production de code. Nous allons utiliser le serveur git d'Alter Way pour gérer nos articles et automatiser leurs publication.

Pré-requis

avoir : - Le client git installé - HUGO qui est un générateur de site statique à partir de fichier markdown - Un éditeur de texte, - Un peu de background en markdown : https://sourceforge.net/p/hugo-generator/wiki/markdown_syntax/ - Un navigateur WEB, - Un compte ldap Alter Way, - Accès au dépot de code du blog situé ici : https://git.alterway.fr/blog/alterway.hugo

Windows

MSysGit : https://git-for-windows.github.io/

Linux

apt:

sudo apt-get update && sudo apt-get install -y git

yum:

sudo yum install git

Mac

brew install git

Si vous avez Docker installé sur votre poste

Vous êtes un winner ! En une commande vous serez prêt à utiliser HUGO

docker login hub.alterway.fr
docker pull hub.alterway.fr/library/hugo
alias hugo='docker run -it --rm -u "$(id -u):$(id -g)" -p 1313:1313 -v $PWD:/var/www hub.alterway.fr/library/hugo server -b http://IP_SERVER_DOCKER/ -w --bind 0.0.0.0 --source /var/www'
# par exemple
alias hugo='docker run -it --rm -u "$(id -u):$(id -g)" -p 1313:1313 -v $PWD:/var/www hub.alterway.fr/library/hugo server -b http://$(docker-machine ip  docker110)/ -w --bind 0.0.0.0 --source /var/www'
# Vous pouvez mettre cet alias dans votre fichier profile de votre shell
hugo
# le site est accessible sur l'ip de votre dockerhost:1313

Si vous n'avez pas Docker installé

1. Téléchargez le binaire correspondant à votre plateforme à l'url suivante : https://github.com/spf13/hugo/releases. Prenez la version la plus récente.
2. Installez le programme et assurez vous qu'il soit bien dans votre PATH
3. Vous devez aussi installer Pygments pour avoir de la coloration syntaxique (pip install Pygments)

Préparation de l'environnement

1. Mettez dans le repertoire où vous vous sentez le plus confortable. ( moi : $HOME/dev/projects )
2. Clonez le repo alterway.hugo : git clone git@git.alterway.fr:blog/alterway.hugo.git
3. Si vous souhaitez voir ce que cela donne : allez dans le repertoire alterway.hugo et tapez hugo
4. Le site devrait être accecessible à l'utl suivante : http://localhost:1313/ ou http://ip_docker:1313/
5. Ouvrez un autre terminal et replacez vous dans le répertoire des sources
6. Decidez du nom de la branche que vous allez créer pour rédiger votre article

Prenez comme règle de nommage la suivante :

nom-de-la-branche = année-mois-jour-nom-de-l-article = année-mois-jour-nom-du-fichier-sans.html-et-sans.md

exemple :

    branche : 2016-04-14-comment-creer-une-page-de-blog
    nom du fichier : 2016-04-14-comment-creer-une-page-de-blog.html.md

1. donc on fait un git checkout -b 2016-04-14-comment-creer-une-page-de-blog pour créer une branche de travail.
2. ensuite aller dans le répertoire "content/post" et éditer le fichier 2016-04-14-comment-creer-une-page-de-blog.html.md
3. Vous devez créer impérativement une entête pour votre fichier pour q'hugo s'y retrouve : Voici un exemple d'entête et un début de texte, il vous faudra ldapter en fonction de votre billet.

lang: fr
Title: Comment créer un article sur le blog Alter Way
Date: 2016-04-14 12:00
Category: Alter Way
Summary: Description des étapes à suivre pour créer un article sur le blog Alter Way.
Authors: Herve Leclerc

bla bla bla c'est mon billet la syntaxe est en markdown. C'est trop bien !!!
bla bla bla ....
bla bla bla ....
bla bla bla ....

1. Si vous sauvegardez votre fichier vous remarquez que votre navigateur se rafraichi et vous présente un post dans la page d'accueil si vous cliquez sur ce post vous avez son contenu affiché en html.
2. Continuez à élaborer votre billet.
3. Quand vous serez content de votre production il suffira de :
   • faire un git add .
   • faire un git commit avec un commentaire judicieux
   • puis un git pull et enfin un git push
4. Quand vous souhaiterez que votre contenu soit publié il suffira de faire une demande de merge request dans le gitlab (https://git.alterway.fr)
5. Votre article sera validé et automatiquement (possé sur la brache master) "généré" sur le blog
6. that's it !

Maintenant il ne vous reste plus qu'à vous demander :

Questions / Réponses

Q: Je veux mettre des images dans mon article ou mettre les images ? R: dans le répertoire static/images/alter_way/[année en cours]/[mois en cours]/ exemple static/images/alter_way/2016. pour utiliser votre image référencez la par /images/alter_way/2016/03/nomdelimage.png

Q: Je veux mettre un lien vers un video youtube, comment faire ? R: Il suffit juste de mettre un shortcode du type :

{{< youtube w7Ft2ymGmfc >}}

le deuxième argument étant l'id de la video Vous pouvez utiliser youtube, vimeo pour les vidéos Par exemple l'url https://www.youtube.com/watch?v=1qlLUf7KtAw deviendra

{{< youtube 1qlLUf7KtAw >}}

et donnera : {{< youtube 1qlLUf7KtAw >}}