Sommaire

  1. Pré-requis
  2. Mise en place
    1. Ouvrir un compte chez Ouvaton
    2. Accéder à l'interface de gestion de votre compte "OuvAdmin"
    3. (facultatif) Créer une boîte de courrier électronique
    4. Créer un espace web
    5. Installer un CMS
    6. Accéder à l'interface d'administration de votre site web
    7. Sécuriser l'accès à votre site (HTTPS)
  3. Configuration et utilisation (exemple de Dotclear)
    1. Configuration de votre profil utilisateur et de votre interface
    2. Configuration du CMS
    3. Configuration et personnalisation de votre blog
    4. Création de contenu
  4. Documentation et assitance

1. Pré-requis

  • Une adresse mél fonctionnelle.
  • Une connexion Internet.
  • (facultatif) Un nom de domaine.

2. Mise en place

L'espace web fait partie d'un ensemble de services proposés par la coopérative pour 42 €/an TTC.
Cette "plaque de base" contient :

  • un nombre illimité de boîtes mél et un nombre illimité de redirections (alias) ;
  • un domaine de listes de diffusion/discussion avec un nombre illimité de listes - voir notre tutoriel ;
    (L'espace disque pour les mél et les listes est limité à 5 Go.)
  • un espace web de 5 Go pour mettre en ligne votre ou vos site(s) web (avec une base de données et un choix de CMS installables "en un clic").
  • des statistiques de fréquentation AwStats pour vos sites web.
  • des certificats Let's Encrypt pour permettre l'accès sécurisé  à vos sites (sur vos domaines et sous-domaines).
  • un compte sur le cloud Nextcloud mutualisé avec 1 Go (il est aussi possible d'installer Nextcloud sur votre propre espace web).

Si vous avez besoin de plus d'espace, vous pouvez en acheter en supplément.

Étape 1 : ouvrir un compte chez Ouvaton

Vous bénéficiez d'une période d'essai de 30 jours. Au bout de cette période d'essai, si vous souhaitez continuer à utiliser le service, la première facture (annuelle) vous sera présentée.

Rendez-vous sur la page d'inscription : ouvaton.coop/hebergement/inscription
Lisez les instructions, remplissez vos coordonnées.
Choisissez un identifiant et un mot de passe pour votre compte.
Un mél vous est envoyé avec un lien pour valider votre inscription.

À noter : vous pouvez utiliser les services d'Ouvaton que vous ayez ou non un nom de domaine qui vous soit propre. Si vous disposez déjà d'un nom de domaine (loué chez un registrar) vous pourrez l'utiliser pour votre hébergement chez Ouvaton. Vous pouvez d'ailleurs commander directement votre nom de domaine chez Ouvaton qui le louera pour vous chez le registrar gandi.net (que nous recommandons).

Étape 2 : accéder à l'interface de gestion de votre compte "OuvAdmin"

Elle se trouve à l'adresse ouvadmin.ouvaton.coop

Connectez-vous avec votre identifiant et votre mot de passe.
Vous devez tout d'abord vérifier vos coordonnées. Dans le menu de gauche, cliquez sur la ligne de menu en rouge ou sur "Mes informations", puis enregistrez en bas de page, même si vous n'avez fait aucune modification.

Étape 3 (facultatif) : créer une boîte de courrier électronique (email)

Recommandé si vous ne possédez pas encore de compte de courriel éthique. En effet si vous diffusez vos messages depuis une adresse mél prise chez un fournisseur quelconque (et plus encore chez Google (Gmail), Yahoo ou Microsoft (Outlook, Live, Hotmail)) sachez que le contenu de vos échanges avec vos correspondants sera probablement analysé automatiquement à des fins de profilage et d'envoi de publicités ciblées.
Utiliser une telle adresse ne serait pas respectueux de vos correspondants.

(Pour choisir un fournisseur de courriel éthique, voyez ce billet.)

Procédure

Consultez si besoin la documentation de Ouvaton.

Allez dans la rubrique "Courriel" (menu horizontal, en haut).
Puis créez une nouvelle boîte mél en cliquant sur "Créer une nouvelle adresse e-mail".
Éventuellement créez ensuite une ou plusieurs redirections vers cette boîte (renseignez les champs, puis appuyez sur le bouton + situé en bout de ligne).

Voir ce billet pour une explication sur l'intérêt de créer des redirections.

Vous pouvez créer (et supprimer) autant de boîtes mél et de redirections que vous le désirez. Seul l'espace de stockage est limité à 5 Go.
Vous pourrez souscrire une option supplémentaire si vous avez besoin de plus de stockage. Néanmoins dans un souci de préservation des ressources il est plutôt recommandé de faire régulièrement le ménage en effaçant les courriels obsolètes (notamment ceux qui contiennent de volumineuses pièces jointes, comme des photos ou des diaporamas).

Vous pouvez accéder à votre nouvelle boîte mél depuis l'un des deux webmails mis à votre disposition : Roundcube ou RainLoop (deux logiciels libres).

Respectivement depuis rc.ouvaton.coop ou rl.ouvaton.coop

Si vous souhaitez utiliser votre mél depuis un courrielleur comme Thunderbird (pour ordinateur) ou K-9 Mail (pour ordiphone et tablette Android), vous trouverez dans cette page les informations pour le configurer. Voir aussi notre tutoriel pour ajouter un compte dans votre courrielleur.

IMPORTANT : afin de lutter contre les spammeurs il n'est pas possible d'envoyer des courriels depuis vos nouvelles boîtes mél pendant la période d'essai de 30 jours, à moins d'en faire la demande via l'assistance (lien accessible depuis l'interface OuvAdmin, menu de gauche).

Étape 4 : créer un espace web

Deux options s'offrent à vous : utiliser votre propre nom de domaine (l'adresse de votre site sera de la forme "https://mondomaine.tld") ou bien utiliser le domaine de Ouvaton (l'adresse de votre site sera de la forme "https://monsite.ouvaton.org")

Utiliser votre propre nom de domaine (facultatif)

Si vous avez déjà loué un nom de domaine chez un registrar, vous devrez indiquer à votre registrar les serveurs de noms (DNS) de Ouvaton.

Si vous n'avez pas encore loué votre nom de domaine, nous vous recommandons de le faire par le biais d'Ouvaton. (Ouvaton enregistre pour vous le domaine chez le registrar gandi.net a un tarif préférentiel.)

Voyez le détail dans la documentation de Ouvaton.

À noter : la prise en compte de la création du domaine ou du changement de serveur de nom prend plusieurs heures. Patientez.

Créer un espace web avec votre domaine ou celui d'Ouvaton

Voyez le détail dans la documentation de Ouvaton.

Lorsque vous choisissez l'adresse du site, vous avez une liste déroulante ou vous pouvez choisir "ouvaton.org" ou - le cas échéant - votre propre nom de domaine.

À noter : l'adresse "mondomaine.tld" est équivalente à "www.mondomaine.tld" : c'est le même espace web.

Une fois le nouvel espace web créé, il faut attendre environ 30 minutes pour qu'il devienne accessible sur le web.

Si vous souhaitez activer les statistiques sur un espace web, cochez la case. Voir le détail dans la documentation de Ouvaton.

Si vous utilisez votre propre domaine, Ouvaton génère pour vous un certificat Let's Encrypt pour permettre un accès sécurisé (HTTPS) à votre site. Voir détails à l'étape 7.

Vous pouvez créer autant d'espaces web que vous le souhaitez. Ce n'est que la quantité de données stockée sur l'ensemble de ces espaces qui est limitée.

Étape 5 : installer un CMS

Voyez le détail dans la documentation de Ouvaton.

Dans l'espace de configuration de votre espace web, vous avez le choix d'une liste de CMS à installer.
Ils sont de deux types : ceux qui nécessitent une base de données et ceux qui n'en ont pas besoin.

Pour choisir le CMS le mieux adapté à votre besoin, lisez notre tutoriel dédié.

Si vous avez choisi un CMS qui n'a pas besoin d'une base de données, sautez le paragraphe suivant.

Créer une base de données

La base de données doit être créé avant l'installation du CMS.

La première base de données est incluse dans la "plaque de base". Les bases supplémentaires sont facturées 2,52 €/an.

Allez dans le menu "MySQL" de Ouvadmin. Puis cliquez sur "Créer une nouvelle base MySQL".

L'identifiant (le nom), l'utilisateur (login), le serveur et le mot de passe vous serons demandés lors du processus d'installation du CMS.

Installer le CMS

Dans l'espace de configuration de votre espace web, cliquer sur le nom du CMS choisi. Puis lisez bien et suivez les instructions pour poursuivre (il s'agit d'accéder à l'adresse de votre site via le web, cela provoque le lancement de la procédure d'installation).

(Si vous êtes redirigé vers une autre adresse c'est que votre domaine n'est pas encore accessible, veuillez patienter et recommencer plus tard, après avoir vidé le cache de votre navigateur (sinon le fermer et le ré-ouvrir).)

Problème possible lors de l'installation de Wordpress, étape "Installation d'un CMS sur votre espace web" : lorsque vous cliquez sur le lien "Rendez-vous sur https://mondomaine.tld pour démarrer l'installation !", vous êtes dirigé vers https://mondomaine.tld/oci-wp.php. Si une liste de fichiers et dossiers s'affichent et qu'il ne se passe rien au bout d'une minute, effacer la partie oci-wp.php de la barre d'adresse et rechargez la page sur https://mondomaine.tld.

Dans l'écran qui s'affiche (celui de l'assistant d'installation) saisissez les informations demandées. Si une base de données est utilisée, celles-ci se trouvent dans l'interface de gestion de vos bases de données. Vous devez également donner un nom et un mot de passe pour le premier utilisateur du CMS (vous, en tant qu'administrateur du site web).

Noter bien l'adresse de l'interface d'administration de votre site web. En général c'est l'adresse de votre site suivi de /admin ou de /wp-admin (cas de Wordpress).

Étape 6 : accéder à l'interface d'administration de votre site web

Ouvrez la page de cette interface. Pour vous connecter, cliquez sur le bouton "Connexion" et entrez comme identifiant celui défini à l'étape précédente (l'administrateur du site web).

Attention, si vous utilisez un bloqueur de publicité et de traqueurs comme uBlock Origin, vous devez ajouter le domaine de votre site web en liste blanche sinon vous ne pourrez pas insérer de lien ou de media via l'éditeur.

Étape 7 : sécuriser l'accès à votre site (HTTPS)

L'avantage d'un site sécurisé est que cela assure que le contenu affiché par l'internaute est bien celui de votre site (pas de modification en cours de route). Si une tierce partie "écoute" votre connexion Internet elle ne pourra pas voir quelle page du site vous consultez (seulement le site lui-même). Enfin cela assure aussi que si des données sont transmises via un formulaire de votre site (message, mot de passe de connexion, données bancaires, etc.), elles seront chiffrées.

Attention toutefois, la sécurisation HTTPS n'est pas à l'épreuve d'organisations disposant de moyens de cyber-espionnage très sophistiqués...

La sécurisation est matérialisée par un cadenas affiché par votre navigateur web devant l'adresse URL de la page consultée.

Si votre site utilise le domaine "ouvaton.org", il est d'emblé sécurisé. Vous n'avez rien à faire.

Si vous utilisez votre propre nom de domaine, lisez ce qui suit.

Mise en place de la sécurisation

Elle nécessite l'acquisition d'un certificat.

Pour un site ordinaire, un certificat Let's Encrypt - généré automatiquement par Ouvaton - est suffisant. Cela peut prendre 2 à 3 jours avant d'être opérationnel.

Pour que la génération puisse être faite par Ouvaton il faut que votre domaine soit géré par Ouvaton, ou au moins que les serveurs de noms (DNS) soient ceux de Ouvaton. Si vous avez acquis votre domaine chez un registrar (comme gandi.net), vous devez indiquer à celui-ci que les serveurs de noms a utiliser sont ceux de Ouvaton. Vous les trouverez à la fin de cette page de la documentation de Ouvaton. Si vous aviez créé votre espace web avant de faire ce changement de serveurs de noms, demandez à Ouvaton de lancer manuellement la génération du ou des certificats via un ticket d'assistance, depuis l'interface OuvAdmin.

Si par contre vous faites de la vente en ligne, vous devez avoir un certificat plus sécurisé (qui assure que votre identité a été vérifiée par l'organisme de certification). Un tel certificat est payant. Pour en acquérir un, voyez la documentation de Ouvaton.

Si vous utilisez un CMS, vous devez lui indiquer que les liens internes doivent être sécurisés.
Une fois que le certificat a été généré (vous avez pu accéder à votre site en https sans rencontrer d'erreur), modifiez l'adresse de votre site en ajoutant un s derrière "http". Par exemple pour Dotclear, allez dans "Paramètres du blog", section "Paramètres avancés", "URL du blog". Pour Wordpress, allez dans "Réglages" > "Général", "Adresse web de Wordpress" et "Adresse web du site (URL)".

[Facultatif mais recommandé] Forcer l'accès sécurisé

En effet même si l'accès HTTPS est possible, si l'internaute tape directement l'adresse de votre site dans son navigateur - sans la faire précéder de https:// - il accèdera au site de façon non sécurisée (en http). Pour qu'il soit automatiquement redirigé vers un accès https cela nécessite une configuration. Il se peut qu'elle soit mise en place automatiquement par votre CMS, mais si ce n'est pas le cas (faite le test) vous devez mettre en place une redirection vous-même :

  1. Créez un fichier texte nommé .htaccess commençant par ces lignes :
    RewriteEngine On
    RewriteCond %{HTTPS} off
    RewriteCond %{HTTP:X-Forwarded-Proto} !https
    RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]
  2. Par transfert FTP, téléverser le fichier .htaccess dans le dossier /httpdocs
  3. Pour tester, entrer l'URL de votre site dans votre navigateur sans indiquer de protocole.

Plus de détails au bas de cette page de la documentation de Ouvaton.

3. Configuration et utilisation (exemple de Dotclear)

Dans cette partie nous utiliserons le CMS Dotclear version 2.16. Le principe est le même pour les autres CMS. Nous avons ajouté quelques remarques concernant des spécificités du CMS Wordpress.

Configuration de votre profil utilisateur et de votre interface

Une fois connecté à l'interface d'administration de votre site, cliquez sur "Mes préférences" (lien situé en haut à droite de l'interface).

Dans l'onglet "Mon profil" indiquez votre pseudonyme (il apparaîtra comme auteur de chacun de vos billets) et réglez le fuseau horaire.

Dans l'onglet "Mes options", assurez-vous d’utiliser l'éditeur dcCKEditor, nous vous recommandons de choisir le format d'édition xhtml. Activez la coloration syntaxique. Réglez la liste des mots clés à "Étendue" pour les afficher tous.

Dans l'onglet "Mon tableau de bord" vous pouvez notamment définir les raccourcis accessibles via le menu latéral ou via le lien "Mon tableau de bord" (situé en haut à droite de l'interface).

Configuration du CMS

Passez en revue les éléments de la section "Plugins". Dans Wordpress elle s'appelle "Extensions".

En particulier :

Plugin "Antispam" : si vous avez activé les commentaires (dans ce cas il est indispensable d'activer aussi la modération des commentaires) et que vous êtes envahis de commentaires indésirables rédigés en anglais, ajoutez les mots courants de la langue anglaise dans le filtre "Bad Words".
Vous pouvez obtenir une clé d'activation du service anti-spam Akismet (très efficace), gratuitement si votre site est non commercial et sans publicités, ou en payant.

Plugin "dcCKEditor" : cochez toutes les cases pour disposer du maximum de possibilités de mise en forme du texte.

Plugin "Maintenance" : réglez la fréquence des alertes, et faites-les s'afficher sur le tableau de bord, pour ne pas oublier d'effectuer des sauvegardes régulières du contenu et des paramètres de votre blog.

Passez en revue les éléments de la section "Réglages système".

  • Faites la mise à jour s'il elle vous est proposée.
  • Vous pouvez notamment ajouter d'autres rédacteurs.
  • Via la "Gestion des plugins" vous pouvez ajouter d'autres extensions à votre CMS ( pour utilisateur avancé). Exemples :
    • pour compter le nombre de lectures de chaque billet : postCount, et pour agglomérer ces données en statistiques : dcStats. Voir ce tutoriel, étape 5, exemple 1.
    • pour obtenir une notification par mél lorsqu'un nouveau commentaire est soumis par un internaute, installez le plugin emailNotification (Notification par e-mail)*.
    • pour créer un simple formulaire de contact installez le plugin contactMe (Contactez-moi)*. Alternative : créez une page spécifique acceptant les commentaires (cf. notre page de contact).

* Envoi de mél via Dotclear actuellement non fonctionnel, nécessite une configuration SMTP, possible en ajoutant la librairie PHPMailer. Voir cette discussion du forum Dotclear.

Voici quelques extensions utiles pour Wordpress : WPMail SMTP permet l'envoi de mél via Wordpress, WPForms* permet de créer des formulaires, notamment un simple formulaire de contact. Celui-ci peut être protégé contre les spammeurs à l'aide de hCaptcha. *Alternative : Contact Form 7 + protection Honeypot for Contact Form 7.

Pour connaître la version de Dotclear installée, passez la souris sur le lien "Dotclear" situé en bas à gauche de l'interface.

La version de Worpress est visible en bas à droite de l'interface d'administration.

Configuration et personnalisation de votre blog

Paramètres du blog

Définissez le nom et la description de votre blog, les informations de droit d'auteur ("copyright").

Indiquez si vous souhaitez accepter les commentaires et rétroliens (si oui, activez la modération).

Vous pouvez définir une page d'accueil statique (sinon l'accueil consiste en l'affichage des billets les plus récents).
Astuce : pour maintenir plusieurs articles en tête de liste, modifier leur date de création en mettant une date éloignée (par ex : 01 janvier 2030).

Définissez le nombre de billets affichés par page (affichés simultanément).

Éléments d'organisation du contenu

Définissez le contenu du menu principal "Menu simple".

Définissez vos "catégories" pour classer vos billets. Les "mots clés" se définissent au fur et à mesure de leur intégration dans des billets.

Les "Widgets de présentation" sont des blocs qui s'agencent autour du contenu principal. Ils peuvent contenir un champ de recherche interne au blog, un descriptif, la liste des pages, des catégories, des mots clés, des billets sélectionnés, des liens externes, etc.

Apparence du blog

Pour donner à votre blog l'apparence que vous souhaitez, vous pouvez sélectionner un thème. Une poignée sont déjà installés mais l'onglet "Ajouter des thèmes" vous permet d'en installer bien d'autres. Certains sont plus ou moins configurables à l'aide d'un menu "Personnaliser le thème".

Si vous avez des compétences avancées, vous pouvez modifiez ce thème (le squelette HTML, les feuilles de style CSS, les éléments graphiques) pour lui donner exactement l'apparence désirée : voir notre tutoriel pour un blog Dotclear.

Ajouter une icône de favori (favicon)

L'icône d'un site web apparaît dans le navigateur web, ainsi que dans les raccourcis que vous pouvez placer sur la page d'accueil de votre ordiphone (voir tutoriel pour faire cela). Elle fait partie de l'identité visuelle du site.

L'optimum est de créer une image carrée de 192 pixels de large, au format png (nommons-la favicon_192px.png). Pour les appareils de marque Apple, une image de taille 180 pixels est préférée (nommons-la favicon_apple.png).
Téléversez ces deux images à la racine de votre médiathèque.

Puis ajoutez le code suivant dans le modèle d'en-tête de votre blog (pour le thème Ductile, dans user_head.html) :

<link rel="shortcut icon" type="image/png" href="/public/favicon_192px.png" />
<link rel="apple-touch-icon" href="/public/favicon_apple.png"/>

Dans Worpress vous n'avez pas à ajouter de code car cette fonctionnalité est incluse dans le menu "Apparence" > "Personnaliser" > "Identité du site".

Ajouter une page d'erreur 404 hors CMS

L'erreur 404 est celle qui se produit lorsqu'une page n'est pas trouvée. Dans certains cas la page d'erreur 404 du CMS (pour le thème Ductile, il s'agit du fichier 404.html) n'est pas appelée. C'est une page standard (en anglais) qui apparaît, elle ressemble à ceci :

Not Found
The requested document was not found on this server.

Web Server at [nom du site]

Dans Wordpress, la page d'erreur 404 du CMS est toujours appelée, vous n'avez pas à faire ce qui suit.

Voici comment faire apparaître à la place une page d'erreur personnalisée (l'intérêt est de pouvoir rediriger l'internaute vers votre site, notamment vers la page d'accueil, la recherche ou les archives) :

  1. Créez votre page web personnalisée, appelons-la error404.htm (voici à titre d'exemple notre page : /error/error404.htm)
  2. Créez un fichier texte nommé .htaccess contenant la ligne :
    ErrorDocument 404 /error/error404.htm
  3. Par transfert FTP, ajouter un dossier error dans le dossier /httpdocs, y téléverser le fichier error404.htm et téléverser le fichier .htaccess dans le dossier /httpdocs
  4. Pour tester, faites suivre l'URL de votre site d'un / suivi d'un caractère quelconque.

Création de contenu

Il ne vous reste plus qu'à créer des pages et des billets (également appelés "articles" dans d'autres CMS).

Problème possible lors de la rédaction si vous utilisez votre propre nom de domaine et une connexion sécurisée (https) : lors de l'édition, les blocs "Extrait" et "Contenu" apparaissent vides.

  • Solution temporaire : passer en mode non sécurisé en enlevant manuellement le s de "https" dans la barre d'adresse, puis recharger la page. À noter : si vous avez utilisé le fichier .htaccess pour forcer le https (cf. chapitre 2, étape 7), vous devez y ajouter une exception en ajoutant cette ligne
    RewriteCond %{REQUEST_URI} !/admin/(.*)
    juste avant la ligne RewriteRule.
  • Solution définitive : dans le fichier config.php situé dans le dossier /httpdocs/inc/ changer http en https dans la ligne
    define('DC_ADMIN_URL','https://mondomaine.tld/admin/');
    et ajouter en dessous la ligne : define('DC_ADMIN_SSL', true);

Les pages apparaissent dans le bloc (widget) "Pages", dans l'ordre défini par vous.
Les billets apparaissent dans la colonne principale, dans l'ordre chronologique décroissant.

Voir notre démonstration pour l'usage de l'éditeur du CMS Dotclear.

4. Documentation et assistance

Concernant Ouvaton :

Concernant le CMS Dotclear :