• Home  / 
  • SEO
  •  /  Concours SEO Alsace du Cricetus: le choix des technos

Concours SEO Alsace du Cricetus: le choix des technos

By KrustyHack / last year

Phase importante d’un projet: le choix des technos. Il ne faut pas le prendre à la légère. Etant #DevOps dans la société Proximis, j’avais les bonnes compétences pour bien choisir ce qu’il fallait.

J’ai donc opté pour la mise en place d’un Docker WordPress sur un serveur Kimsufi avec l’interface Tutum. Combo gagnant sur la plupart de mes projets web. Facile à mettre en place et fiable, c’était la solution la plus logique dans ma stratégie.

Je t’ai donc concocté une première partie basée sur les technologies utilisées et indispensables à mon succès. Au menu, mes plugins WordPress, mon thème pour le concours, ma méthode de mise en place d’un WordPress et l’hébergement que j’utilise pour tous mes projets.

Toutes mes astuces sans cachotteries.

WordPress, l’incontournable

Je l’utilise pour tous mes projets, que ce soit pour moi ou pour mes « clients ». Même si de base je le trouve un peu lent, avec quelques plugins ça envoie du pâté ! Simple à prendre en main, il permet également de le customiser facilement et d’obtenir au final LE site que l’on veut vraiment.

Même si je ne suis pas trop fan de PHP, WordPress reste mon choix numéro 1 dans mes projets. J’avais pensé passer sous Ghost, le système de blog avec NodeJS, mais pour l’instant WordPress reste la plateforme la plus pratique et la plus facile à utiliser.

Ci-dessous, la liste de tous les plugins utilisés lors de ce concours :

Les plugins

  • 410 for WordPress: renvoie un code HTTP 410 (Gone) pour lesp ages qui n’existent plus sur le blog
  • AMP: ajout du support AMP
  • CM Tooltip Glossary: permet de gérer un glossaire avec la gestion auto des termes à répertorier
  • Column Shortcodes: permet de mettre en page ses articles avec un système de colonne
  • Eggplant 301 Redirects: permet de gérer les redirections
  • Featured Images in RSS w/ Size and Position: permet de gérer les images dans le flux RSS du blog. Ça m’a servi surtout pour MailChimp
  • Yoast SEO: tout le monde le connaît. Permet de gérer avec efficacité tout ce qui touche au SEO du blog
  • WP Lightbox 2: pour avoir des popins lors de clics sur les images
  • SumoMe: l’incontournable boîte à outil que j’utilise pour les boutons de partage et la smart bar pour catcher du mail
  • WP Review: permet de mettre des rich snippets sur certains articles. Exemple avec le livre « Miracle sur Strasbourg »
  • Internal Link Manager: un must have. Permet de faire du linking interne automatiquement
  • Jetpack par WordPress.com: également un must have sur tous mes projets. Tout le monde le connaît
[alert-announce]Il y aura des articles pour la mise en place des ces plugins, pas d’inquiétudes. Avec des explications sur leur paramétrage. Les inscrits du blog seront notifiés en priorité. ;)[/alert-announce]

Le thème

Alors là j’ai vraiment joué la carte du « je ne m’emmerde pas plus que ça » avec un bon petit Twenty Twelve des familles. Quelques modifications par-ci par-là histoire de l’optimiser encore un peu plus et ça suffit. Bon c’est vrai que niveau #UI c’est vraiment pas le top. Le thème est moche (enfin c’est mon avis) et j’avais pas assez de place dans ce foutu menu. Mais bon, il a fait le taff.

Arrivé vers la moitié du concours je me suis tâté à changer le thème pour avoir un truc un peu plus nice. Mais comme le site était bien positionné j’ai préféré jouer la carte de la sûreté et ne rien changer.

Niveau optim’, j’ai un peu touché au thème en « optimisant » le header (pour la balise h1 et les schemas des comptes sociaux) et en modifiant quelques parties HTML par-ci par-là. Rien qui ne vaut un article entier sur le sujet. 🙂

Voici ma modif’ pour les réseaux sociaux (schema.org), que j’ai ajoutée en plus entre <head></head>, comme le recommande Google:

<script type="application/ld+json">
{
  "@context" : "http://schema.org",
  "@type" : "Organization",
  "name" : "Cricetus Alsace",
  "url" : "https://www.le-cricetus.alsace",
  "sameAs" : [
    "https://twitter.com/lecricetus",
    "https://plus.google.com/+LecricetusAlsace67",
    "https://plus.google.com/117692745207899301203",
    "https://www.facebook.com/cricetus.alsace"
 ]
}
</script>

N’oublie pas de changer les valeurs des « sameAs » hein ! :p

Kimsufi, l’offre OVH abordable

L’offre hosting d’OVH avec des prix vraiment sympathiques. On peut avoir un serveur dédié à partir de 10€. Je l’utilise pour tous mes sites et mes projets, sauf exceptions. Je suis client chez OVH depuis 5 ans maintenant (je crois) et je n’ai jamais été déçu par leurs offres et leurs services.

D’autant plus que je ne suis pas un novice dans la gestion de serveur. Donc pourquoi m’embêter avec un mutu ou un truc du genre ? J’ai un dédié à dispo, il fera l’affaire.

Pour ceux qui ne peuvent s’offrir le luxe d’un dédié, parce que c’est trop cher ou parce que vous n’avez pas de compétences en gestion de serveur, un mutu OVH fera largement l’affaire pour votre WordPress. En tout cas pour démarrer. Le plus important c’est de s’assurer que les services de base tels que PHP, MYSQL et compagnie soient là. Mais avec l’offre OVH Mutu WordPress pas de questions à se poser. T’achètes, tu cliques, ça marche.

Tu auras, pour un prix raisonnable, la possibilité de déployer votre WordPress en quelques clics, sans connaissances techniques particulières. C’est comme ça que j’ai commencé dans le web, quand j’avais 14 ans. Je payais encore mes mutu par allopass (#oldgeekmemories). Bref, pour ceux qui veulent débuter, c’est la meilleur solution. Toutefois, si tu utilises un mutu, les prochaines explications sur Docker risquent de ne pas te concerner car il est nécessaire d’avoir un accès ssh et de pouvoir installer des paquets Linux (apt-get) sur ton serveur.

Mais il existe également d’autres solutions pour héberger son site #indacloud ! Je pense par exemple à Amazon ou Digital Ocean. Les prix restent corrects mais bon, un minimum de connaissances est nécessaire. Dans un prochain article (et oui encore) je te montrerais comment déployer ton WordPress en quelques clics, sans coder et #indacloud ! Oui môssieur/môdame !

L’avantage de passer dans le cloud avec Docker ? Des ips différentes, la possibilité de « clusteriser » facilement les différentes applications avec Docker et Docker Cloud (par exemple), pouvoir lancer/arrêter des serveurs à la demande, …

Docker,  « mettre en boîte » pour mieux gérer

La on attaque la plus grosse partie (après la configuration de mes plugins, à venir dans les prochains articles): la mise en place de WordPress en 30 secondes ! Alors oui, avant j’ai un peu préparé le terrain, mais une fois que la base est là, tu peux créer des WordPress à la volée. Mais ça aussi ça fera l’objet d’autres articles.

Docker est mon outil de travail principal même si je ne l’utilise pas dans tous mes projets. Il me sert à paramétrer puis déployer à la volée des containers pour mes applications, comme ici, pour WordPress. Il m’a suffit d’un fichier YAML de 28 lignes pour déployer et configurer ma base de données et mon WordPress, automatiquement !

Pour expliquer un peu le concept de Docker, imagine-toi que c’est comme une boîte où à l’intérieur tu va ranger des choses qui sont liées. Par exemple vos rollers avec vos protections et votre casque. Et le jour où vous avez envie de faire du roller, vous avez tout dans le même carton, prêt à l’utilisation. Docker et les containers c’est un peu la même chose. Ce sont des boîtes qui rassemblent des applications, des services, des outils. Dans mon cas, j’avais 2 containers (donc 2 boîtes): un MYSQL et un WordPress.

Dans le container MYSQL on peut retrouver tous les packages Linux nécessaires pour faire tourner le serveur MYSQL (mysql-server et compagnie). Dans le container WordPress, on peut retrouver tous les packages Linux nécessaires pour faire tourner WordPress (PHP, Nginx et compagnie).

J’ai ensuite dit à Docker que ces 2 containers étaient liés: le container WordPress a besoin de Mysql.

Pour la suite du programme, je t’invite à installer Docker afin de pouvoir faire au fur-et-à-mesure le tutorial suivant.

Docker-compose, l’outil magique de Docker

Pour cela, j’utilise docker-compose, un outil Docker qui me permet de décrire plusieurs services dans un fichier nommé docker-compose.yml. Pour installer docker-compose, rien de plus simple:

╭─root@krustyhack ~  
╰─➤ curl -L https://github.com/docker/compose/releases/download/1.6.0/docker-compose-`uname -s`-`uname -m` > /usr/local/bin/docker-compose
╭─root@krustyhack ~  
╰─➤ chmod +x /usr/local/bin/docker-compose
╭─root@krustyhack ~  
╰─➤ docker-compose --version
docker-compose version: 1.6.0

Docker WordPress: so easy !

Maintenant que le tout est installé, on se trouve un répertoire sur sa machine, on créé notre fichier docker-compose.yml et on y colle ça:

wordpress:
 image: tutum/wordpress-stackable:latest
 links: 
   - db
 ports:
   - "80:80"
 environment:
   DB_NAME: wordpress
   DB_USER: admin
   DB_PASS: "**ChangeMe**"
 volumes:
   - '/home/docker/wordpress/wordpress/wp-content:/app/wp-content'
db:
 image: tutum/mysql:5.5
 environment:
   MYSQL_PASS: "**ChangeMe**"
 volumes:
   - '/home/docker/wordpress/mysql/lib:/var/lib/mysql'

Avec ce fichier, je décris à docker-compose la façon dont il va me gérer la mise en place d’un WordPress et d’une base de données. Je ne vais pas rentrer dans les détails, ça serait trop long. Juste une petite parenthèse sur:

volumes:
  - '/home/docker/wordpress/mysql/lib:/var/lib/mysql'

volumes:
  - '/home/docker/wordpress/wordpress/wp-content:/app/wp-content'
[alert-note]Ces deux « instructions » disent à docker de partager tout ce qui est dans /var/lib/mysql et /app/wp-content avec la machine hôte. Comme ça, il est facilement possible de backuper les fichiers de la base de données et les fichiers de WordPress qui sont ajoutés au fur-et-à-mesure dans les médias, les plugins, les thèmes, … De plus, cela évite de tout perdre si on redémarre ou supprime le container ![/alert-note]

On lance le bordel (je vous ai évité l’output du docker-compose pull qui est légèrement trop gros):

  1. docker-compose pull: on rapatrie les images Docker Mysql et Docker WordPress
  2. docker-compose up -d: on lance notre application en mode daemon
  3. docker-compose logs: on check l’output pour voir si tout roule
╭─root@krustyhack 
╰─➤ docker-compose pull && docker-compose up -d && docker-compose logs
[...]
Starting docker_db_1
Starting docker_wordpress_1
Attaching to docker_wordpress_1, docker_db_1
[...]
db_1 | Version: '5.5.47-0ubuntu0.14.04.1' socket: '/var/run/mysqld/mysqld.sock' port: 3306 (Ubuntu)
wordpress_1 | => Creating database wordpress
wordpress_1 | => Done!

Va maintenant à l’adresse http://localhost (ou l’ip de ton serveur) sur le port 80 et admirez:

interface installation wordpress

Interface d’installation de WordPress (après docker-compose)

Elle est pas belle la vie ? Tout est prêt, y a plus qu’à finaliser l’installation de votre WordPress. C’est fait ? Super ! Connecte-toi à l’administration maintenant. Il reste un peu de taff avant d’avoir un WordPress qui s’affiche (tu peux checker http://localhost, normalement il y a une page blanche).

C’est normal car lorsqu’on a monté le volume wp-content de WordPress, Docker à pris comme référence notre dossier sur la machine hôte. Dossier où il y avait que dalle, alors que normalement sur une installation de base de WordPress il y a les dossiers themes, plugins et compagnie. Pas de stress, voici ma solution: préparer le dossier /home/docker/wordpress/wordpress/wp-content avec l’architecture de base du dossier wp-content de WordPress.

En général j’utilise un git privé où j’ai mon architecture de base pour tous mes WordPress avec mes plugins de base, mes thème préinstallés, … Mais tu peux tout à fait cloner le repo officiel de WordPress dans /home/docker/wordpress/wordpress et tout supprimer pour ne garder que wp-content. Ainsi tu auras l’architecture de base, sans fioritures.

Si tu as ajouté le contenu du dossier wp-content APRES avoir démarré votre container WordPress, il te suffit de le redémarrer (docker-compose restart) pour que le dossier soit bien pris en compte dans le volume de ton container. Enfin moi c’est ce que j’ai du faire. Une histoire de droits sûrement.

Bref, voici le résultat final:

wordpress installation docker

WordPress fraîchement installé avec Docker

Maintenant, à toi d’ajouter les plugins que tu veux, avec ceux que je t’ai fourni dans la première partie de ce tutorial.

Tutum, pour gérer les containers Docker

L’interface de déploiement de containers Docker par excellence. Elle est encore en beta mais a déjà atteint une stabilité permettant de l’utiliser en production. Elle permet de déployer et de gérer une multitude de containers Docker sur une multitude de serveurs. Très pratique pour la mise en place de services et leur mise à jour. Mon objectif est de passer tous mes services (blogs, web apps, …) persos sous Tutum (Docker Cloud) et donc de les « containeriser ».

Pour simplifier le bordel, Tutum te permet via une interface GUI de gérer des services/applications basées sous Docker. Tu peux déployer un ensemble de services grâce à des fichiers du même genre que celui qu’on a vu au-dessus (docker-compose.yml) ou de façon unitaire. Je ne vais pas rentrer dans les détails mais tu peux consulter un de mes précédents articles sur le sujet: Load balancing CouchDB avec HAproxy et Tutum. Par contre Tutum n’est plus accessible au public, mais Docker Cloud est exactement pareil (en fait je pense que c’est l’évolution de Tutum). En plus pour un node (un serveur géré) c’est gratos !

En resumé

Donc, pour résumer, je me suis basé sur un petit ensemble de technos pour gérer le site du concours. Je sais que cela peut paraître assez technique, mais comme dit, si tu préfères quelque chose de plus simple, pars sur du mutu pas cher, installe ton p’tit WordPress en quelques clics et ajoute les quelques plugins de ma liste. Vous aurez déjà une bonne base pour commencer votre site.

Pense également à toujours, mais alors vraiment TOUJOURS, vérifier le thème que tu installes. Vérifie les h1, les balises utilisées, le code (qu’il soit pas trop dégueulasse), … J’ai déjà eu quelques surprises avec des thème pourtant basiques. N’aies pas peur de modifier toi-même le thème, en ayant fait une sauvegarde auparavant. Au début j’étais aussi peu sûr de moi, j’aimais pas trop mettre les mains dans le code. Mais au fur-et-à-mesure tu apprendra les bases, puis les trucs un peu plus techniques. Et un jour, je l’espère, tu pourra créer tes propres templates/plugins WordPress ! Et là, c’est la liberté !

Si tu as des questions, contactes-moi sur FacebookTwitter, via le formulaire de contact (je crois qu’il marche…) ou via les commentaires en bas de page. Je me ferais un plaisir de te répondre. 🙂

Nicolas Hug, KrustyHack

Leave a comment: