Converting a dynamic site into static HTML documents

Its been two times now that I’ve been asked to make a website that was running on a CMS and make it static.

This is an useful practice if you want to keep the site content for posterity without having to maintain the underlying CMS. It makes it easier to migrate sites since the sites that you know you won’t add content to anymore becomes simply a bunch of HTML files in a folder.

My end goal was to make an EXACT copy of what the site is like when generated by the CMS, BUT now stored as simple HTML files. When I say EXACT, I mean it, even as to keep documents at their original location from the new static files. It means that each HTML document had to keep their same value BUT that a file will exist and the web server will find it. For example, if a link points to /foo, the link in the page remain as-is, even though its now a static file at /foo.html, but the web server will serve /foo.html anyway.

Here are a few steps I made to achieve just that. Notice that your mileage may vary, I’ve done those steps and they worked for me. I’ve done it once for a WordPress blog and another on the [email protected] website that was running on ExpressionEngine.

Steps

1. Browse and get all pages you think could be lost in scraping

We want a simple file with one web page per line with its full address.
This will help the crawler to not forget pages.

  • Use a web browser developer tool Network inspector, keep it open with “preserve log”.
  • Once you browsed the site a bit, from the network inspector tool, list all documents and then export using the “Save as HAR” feature.
  • Extract urls from har file using underscore-cli

    npm install underscore-cli
    cat site.har | underscore select ‘.entries .request .url’ > workfile.txt

  • Remove first and last lines (its a JSON array and we want one document per line)

  • Remove the trailing remove hostname from each line (i.e. start by /path), in vim you can do %s/http:\/\/www\.example.org//g
  • Remove " and ", from each lines, in vim you can do %s/",$//g
  • At the last line, make sure the " is removed too because the last regex missed it
  • Remove duplicate lines, in vim you can do :sort u
  • Save this file as list.txt for the next step.

2. Let’s scrape it all

We’ll do two scrapes. First one is to get all assets it can get, then we’ll go again with different options.

The following are the commands I ran on the last successful attempt to replicate the site I was working on.
This is not a statement that this method is the most efficient technique.
Please feel free to improve the document as you see fit.

First a quick TL;DR of wget options

  • -m is the same as --mirror
  • -k is the same as --convert-links
  • -K is the same as --backup-converted which creates .orig files
  • -p is the same as --page-requisites makes a page to get ALL requirements
  • -nc ensures we dont download the same file twice and end up with duplicates (e.g. file.html AND file.1.html)
  • --cut-dirs would prevent creating directories and mix things around, do not use.

Notice that we’re sending headers as if we were a web browser. Its up to you.

wget -i list.txt -nc --random-wait --mirror -e robots=off --no-cache -k -E --page-requisites \
     --user-agent='User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/40.0.2214.94 Safari/537.36' \
     --header='Accept-Language: fr-FR,fr;q=0.8,fr-CA;q=0.6,en-US;q=0.4,en;q=0.2' \
     --header='Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8' \
     http://www.example.org/

Then, another pass

wget -i list.txt --mirror -e robots=off -k -K -E --no-cache --no-parent \
     --user-agent='User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/40.0.2214.94 Safari/537.36' \
     --header='Accept-Language: fr-FR,fr;q=0.8,fr-CA;q=0.6,en-US;q=0.4,en;q=0.2' \
     --header='Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8' \
     http://www.example.org/

3. Do some cleanup on the fetched files

Here are a few commands I ran to clean the files a bit

  • Remove empty lines in every .orig files. They’re the ones we’ll use in the end after all

    find . -type f -regextype posix-egrep -regex '.*\.orig$' -exec sed -i 's/\r//' {} \;
    
  • Rename the .orig file into html

    find . -name '*orig' | sed -e "p;s/orig/html/" | xargs -n2 mv
    find . -type f -name '*\.html\.html' | sed -e "p;s/\.html//" | xargs -n2 mv
    
  • Many folders might have only an index.html file in it. Let’s just make them a file without directory

    find . -type f -name 'index.html' | sed -e "p;s/\/index\.html/.html/" | xargs -n2 mv
    
  • Remove files that has a .1 (or any number in them), they are most likely duplicates anyway

    find . -type f -name '*\.1\.*' -exec rm -rf {} \;
    

Conférence: Comment évaluer le niveau de qualité d’un site web selon les techniques d’intégration web d’actualité

Sur scène durant ma présentation donnée au Web-In 2013 quelques mois avant le WAQ

Cette semaine, je fait une conférence pour la deuxième fois de ma présentation qui décrit les pratiques en intégration web qui sont d’actualités.

La première fois que j’ai présenté c’était pendant le WebIn 2012, et cette-semaine c’est à Québec pendant la conférence Web à Québec 2013 (WAQ).

Cette fois-ci, j’aurai l’honneur de présenter tout juste avant une personne que j’admire; Jonathan Snook.

Audience

L’audience de cette présentation est principalement les gens qui travaillent avec le web, qui engagent des programmeurs/intégrateurs et qui veulent comprendre les dernières tendances et le pourquoi elles sont populaires.

Comme une valeur ajoutée, j’illustre avec des exemples concrêts et compare les outils vis à vis leur utilité.

 

Synopsis

La façon de concevoir des sites Web a beaucoup évolué au cours des deux dernières années. Concevez-vous encore vos sites comme en 2009? Trouvez-vous vos sites lents? Êtes-vous web-responsable? Imaginez si vous étiez capable de gagner du temps.

Comment pouvez-vous être certain que votre pigiste, employé ou fournisseur fait un travail de qualité?

Nous allons couvrir des techniques clé qui permettent d’optimiser le travail, comment être plus efficace avec votre équipe technique et savoir jauger le son niveau d’expérience.

L’objectif de la séance est de donner des outils pour évaluer le niveau de qualité d’un site web; des pistes pour en améliorer la performance et s’assurer de pouvoir en entretenir le code après plusieurs révisions.

 

Trois questions qui seront répondues dans la conférence

  1. Que faire pour optimiser la communication lors de l’établissement du cahier de charge
  2. Quelles techniques ont été découvertes pour éviter le gaspillage lors de la réalisation
  3. Indicateurs de qualité qu’on peut retrouver dans le HTML/CSS

 

Les «slides»


Télécharger en format PDF

 

Réception

Je ne m’attendait pas vraiment au succès de ma présentation durant la conférence, c’était une belle surprise.

Mon ami François Légaré a pris cette photo:

Il y avait foule lors de ma présentation au Web à Québec

 

Merci à

  1. @gabiviana: Gabi Viana pour les visuels
  2. @joplam: Josée Plamondon pour la révision
  3. @cybik: Renaud Lepage pour la révision
  4. @vivrass: Martin Provencher pour l’inspiration de l’angle technique à couvrir.

Réalisation de l’intégration du site de Jean Émond [2008]

Pour ajouter a ma collection de billets de mon Portfolio professionnel j’ai fait en 2008 ce petit site.

J’ai de la difficulté à trouver des mots pour decrire ce projet. Un pamphlet publicitaire est le nom le plus près de ce que je peit utiliser pour decrire.

Contrairement aux autres clients que j’ai eu je n’ai pas rencontré le client directement.

Intégration HTML/CSS

Le but était principalement de refaire la brochure PDF en version web. Il a été fait en deux itérations comme vous pouvez le voir sur les captures d’écran.

Captures d’ecran

Voir le site Jean Emond.ca

Réalisation site Manoir Saint-Francis faits avec GéraniumCMS [2007]

Manoir Saint-Francis : Page avec images cartes généré par GéraniumCMSDans ma série d’articles ou je parle des sites que j’ai fait dans le passé. J’ai mentionné quelques fois que j’utilisait GéraniumCMS. Le projet du site du Manoir Saint-Francis à Magog, est l’un des derniers déployés.

Derniers sites faits avec GéraniumCMS

J’était en emploi chez TechSolCom Groupe informatique depuis quelques temps déjà et un ancien client de Inexis a voulu que je fasse un site pour lui.

Le contexte général du projet est comme il l’est souvent. Un graphiste me fournit des planches Photoshop et je dois le rendre identique en HTML.

Gallerie d’images

Bug trouvé et corrigé sur un thème WordPress rtTheme

Depuis que nous avons fondé EVOCATIO Solutions technologiques nous avons pris une position d’experts dans le domaine des acrobaties techniques. C’est ce qu’on faisait dans nos journées de tout les jours avant.

Ce que j’avait pas pensé c’est que je trouverait de la demande pour des tâches pointues et qu’on devait  «faire marcher». L’une d’elles a été fait, justement, pour un ami que je respecte beaucoup: Geoffroi Garon.

Avec sa permission je publie ici comment j’ai réglé un petit bug Javascript. Rien d’extraordinaire mais quand même bête lorsqu’on s’attend a ce que de quoi fonctionne qu’on a acheté et qu’il ne fonctionne pas. Finalement, tout juste avant de publier ce billet, j’ai réalisé que, l’auteur (@ftolgacan) a réparé le code. Comme quoi j’ai pris trop de temps avant de le publier.

Il s’agit d’un thème adapté qui a été acheté sur ThemeForest pour un site fait en WordPress. Étant donné que le thème fourni n’a pas vraiment d’endroit ou proposer les correctifs j’ai décidé de publier sur mon blogue.

Je contribue en français mais ferai une courte explication de ma correction en anglais sur l’item précis sur le site officiel.

Pour voir le démo du thème, allez dans la section “Preview” puis dans la section “products” du site qui est illustré.

Continue reading “Bug trouvé et corrigé sur un thème WordPress rtTheme”

Réalisation du Micro-site de l’Initiative Environnementale de la Ville de Sherbrooke [2006]

Environnement * Ville de Sherbrooke : Accueil

Ce micro-site était une manière d’afficher aux citoyens de la Ville de Sherbrooke les ressources disponibles (en 2006) pour participer aux précautions relatives aux matières résiduelles domestiques et commerciales du territoire. Le site actuel est maintenant partie intégrante du portail officiel.

Le travail avait été donné a Tatou communication visuelle de s’occuper du projet et Inexis Solution Web Inc était l’exécutant qui devait intégrer les maquettes graphiques pour les transformer en documents HTML.

Continue reading “Réalisation du Micro-site de l’Initiative Environnementale de la Ville de Sherbrooke [2006]”

Plugin MODx pour générer automatiquement les balises ABBR et autres pour chaque page

Il s’agit d’un plugin que j’ai fait, en PHP 4 il y a deux ans pour MODx 0.9.6.3, pour un site web et je pense qu’il vaut la peine que je partage le code avec la communauté.

Le plugin sert a entourer des mots définis dans un fichier CSV (séparé par des virgules) dans le contenu qui est retourné par le CMS.

 

LA SITUATION

Lorsque je travaillait sur ce site web, mon employeur et mon collègue nous étions donné comme objectif de paufiner l’Ergonomie et l’Accessibilité du contenu. Ce qui est dommage c’est qu’il n’a jamais été évalué par AccessibilitéWeb. J’ai pourtant reçu la formation pour évaluer les sites… mais je préfère, personnellement, programmer des applications.

 

Continue reading “Plugin MODx pour générer automatiquement les balises ABBR et autres pour chaque page”

Script bash pour transférer une base de donnée MySQL d’un serveur à l’autre

Il m’est arrivé récemment de devoir transférer plusieurs dizaines de sites web d’un serveur à l’autre manuellement.

Dans ce billet j’expliquerai le processus que j’ai utilisé pour en finir par produire un script bash qui pourrait vous être utile.

à propos du projet

Considérant que certains sites avaient plus d’une base de données il était hors de question de faire a bras les lignes mysqldump, ssh (en fait le transfert se fait en compressant le fichier et le copiant via une redirection gzip avec cat), mysql pour, en ordre, dumper la base de données, la transférer, et la restaurer…. sans oublier les CREATE users pour chaque.

Je me suis dit: faisons-en un script!

 

Continue reading “Script bash pour transférer une base de donnée MySQL d’un serveur à l’autre”

Réalisation d’une application d’échange de cadeau avec RED L’agence le «club échangiste» [2009]

Il s’agit d’une réalisation que j’ai effectuée en deux semaines pour RED L’agence. L’idée vient de François Sauvé lors d’une rencontre pour un autre projet. Il m’a dit: «J’ai une idée de fou. Je ne sais pas si on pourrait faire ça rapidement mais…».

C’est le genre de situation que j’aime!  Une question, la possibilité de me laisser aller, et hop!

RED voulait faire offrir un cadeau à chacun de ses clients privilégiés d’une façon hors de l’ordinaire. Les participants étaient invités a visionner leur cadeau par une petite carte de noël reçue par la poste (devant, dos) avec une adresse web et un code.

Le concept graphique était, selon moi, bien rendu. Un club échangiste avec les lumières tamisés, rien d’offensant mais tellement bien choisi pour le jeu.

Le site web devait permettre aux participants de voir leur cadeau et de pouvoir «Participer au club échangiste» en volant le cadeau d’un autre participant. Chaque participant qui se faisait voler son cadeau reçevait un courriel qui lui annonçait qu’il s’était fait voler et qu’il pouvait aller le récupérer.

Continue reading “Réalisation d’une application d’échange de cadeau avec RED L’agence le «club échangiste» [2009]”

Réalisation (jamais publiée) du site de Savon des Cantons [2005]

Savon des cantons : logo Il s’agit d’une de mes dernières réalisation avant un an et demi sans produire de sites web sous la tutelle de Inexis Solution web Inc.

Avec le recul, j’ai réalisé que ce site m’a appris une bonne leçon: Savoir les conditions et les deal-breakers possibles avant de commencer a produire quoi que ce soit!. C’est pour cette raison que j’avait arrêté Inexis Solution web: Je ne pouvait plus travailler seul.

Continue reading “Réalisation (jamais publiée) du site de Savon des Cantons [2005]”

Réalisation du site et de l’Image «branding» de Beebox [2008]

beebox.ca : Page Accueil

 

Comme j’en ai parlé dans ce billet j’ai eu plusieurs rôles dans la réalisation du logiciel beebox. L’un d’eux était de m’occuper de l’image du produit.

Pour résumer l’usage du produit je vous laisser aller visiter le site web (beebox.ca) mais pour ce qui me concerne j’ai conçu et entretenu l’image du produit jusqu’en 2009.

 

Continue reading “Réalisation du site et de l’Image «branding» de Beebox [2008]”

Réalisation du site Musé des Beaux Arts de Sherbrooke [2005]

Extrait de la page d'Accueil

 

Dans la lignée de vouloir apporter a mon blogue l’accumulation de mes réalisations j’ai pensé vous montrer mon travail avec le Musé des Beaux Arts de Sherbrooke. J’ai fait ce site en 2005. Encore ici je n’ai pas conservé de rapport sur la durée du travail que j’ai investi dans ce mandat car à l’époque je ne faisait pas de suivi là dessus.

Détails
Graphisme Tatou Communication visuelle
Date de réalisation Septembre 2005
Nom de domaine mbas.qc.ca

Continue reading “Réalisation du site Musé des Beaux Arts de Sherbrooke [2005]”

Réalisation de l’Interface logiciel Beebox [2007]

Rapports de séquence
Rapports de séquence

J’ai eu la chance de travailler sur l’interface d’un logiciel fait en Java avec Struts.

A quoi sert le logiciel

Ce logiciel sert pour automatiser les déploiements des versions selon l’idéologie du Développement en mode «Intégration continue». Bref il est utilisé pour créer des suites d’actions programmables qui peuvent être répétées au besoin.

Histoire brève

Au début le logiciel s’appelait TSCM et était utilisé chez quelques clients dont Téléfilm Canada et la Banque Nationale du Canada dans un département que je ne mentionnerai pas. Dans le but de le rendre plus grand public nous avons changé le nom et remonté l’image.

Continue reading “Réalisation de l’Interface logiciel Beebox [2007]”

Réalisation du site de Remises Réal Lamontagne [2004]

Page fabriquez votre remise
Page fabriquez votre remise

Parmi les sites que j’ai fait dans les dernières années. Celui de Remises Réal Lamontagne était parmi les plus agréables a travailler. L’équipe de IMACOM (sherbrooke) avait fait un très beau travail. Chacun avait sa tâche de fait et mon travail consistait qu’a intégrer en html valide le code.

C’est aussi l’un des derniers sites que j’ai fait en utilisant Macromedia Dreamweaver.

Continue reading “Réalisation du site de Remises Réal Lamontagne [2004]”

Réalisation du site de Câble Axion [2006]

Voir la consommation modem
Voir la consommation modem

Dans la série de billets sur mes réalisations j’aimerai donner mon avis sur le travail que j’ai fait pour Câble Axion.

Contexte

J’ai travaillé là pendant un an entre Octobre (environ) 2005 et Novembre 2006. Mon emploi était dit comme étant programmeur d’applications pour améliorer les processus de travail de l’entreprise du point de vue support technique pour les départements de services Internet et télé numérique.

J’ai donc travaillé sur les bases de données accès en Microsoft Access puis ensuite j’ai fait un travail d’intégration sur le site corporatif (ce 30 octobre 2009, c’est encore mon travail qui est aparent pour une bonne partie).
Continue reading “Réalisation du site de Câble Axion [2006]”

inexis.net 2004 sur Flickr



inexis.net 2004 et aussi

Originally uploaded by renoirboulanger

Wow!!! Je me sens bizz d’avoir retrouvé ça!!

Dommage que je n’ai pas pris en screenshot le flash bruyant qu’il avait sur la page d’accueil.

J’avait aussi (l’icone Géranium) mon logiciel que j’ai fait, Géranium, qui était connecté au site….

Je pouvait gérer ma clientele, factures, échéances, relation avec mes clients, les nouvelles du site web, par Géranium…..

Ce site là est l’ancêtre de GéraniumCMS

inexis.net 2003

… Ah. Cette époque.

Ça me fait réaliser qu’il faut que je fasse une section Portfolio dans mon site.

Aujourd’hui je ne le supporte plus et j’ai arrêté de faire des sites web pour ces entreprises.

Il n’y a plus tant de sites que ça qui ont été faits par mes soins qui sont encore en-ligne.

La vie continue!

Voir la suite de mon Portfolio.

Réalisation Gestionnaire de service à la clientèle pour Câble Axion [2006]


Gestionnaire des décodeurs
Avant Après

Voici un projet que j’ai fait pour Câble Axion [edit: en plus de celui du site web]. Lorsque j’avait été engagé on m’avait spécifié que je travaillerait a améliorer les processus de travail de plusieurs départements: Soutient technique, Service à la clientèle, et même l’inventaire. C’était un projet très intéressant. Sur ce mandat j’ai du faire avec le choix technologique actuel et supporter ce qui était déjà en place: des bases de données Microsoft Access.

(PS: J’ai fait le site web aussi, c’est celui là qui est encore en-ligne. Voir le billet correspondant.).

Continue reading “Réalisation Gestionnaire de service à la clientèle pour Câble Axion [2006]”