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 {} \;
    

Procédure pour avoir un environnement de dévelopement local facile à configurer avec Apache

Je ne sais pour vous, mais je ne peut plus programmer sans avoir l’environement serveur localement sur ma machine. Changer ou ajouter un fichier VirtualHost pour chaque nouveau projet est assez répétitif. Il doit y avoir une façon automatique de le faire?

Oui.

Ça s’appelle VirtualDocumentRoot

J’ai ce tutoriel qui traîne dans mon Wiki personnel depuis des lustres, et c’est maintenant que je commence a migrer mes projets sous NGINX que je décide de le mettre en ligne. Il n’est jamais trop tard pour publier.

Cette méthode de configuration répond exactement au besoin précis de ne pas avoir a configurer un hôte virtuel apache pour chaque projet.

Avec cette procédure, vous n’aurez qu’a maintenir votre fichier hosts, le reste suivra tout seul.

Vous pouvez appliquer cette technique avec n’importe quelle version du serveur http “Apache”. Cette procédure peut même être faite si vous développez sous Windows ou Mac OS avec les distributions du serveur HTTP Apache sous Windows telles que MAMP, XAMPP, et EasyPHP.

Pourtant avec un serveur web local, ce type de configuration est possible depuis longtemps, il faut simplement savoir comment ça s’appelle: VirtualDocumentRoot.

Voici comment je configure mon environnement LAMP depuis quelques temps.

Procédure

Établissement du standard

Tout commence par une certaine convention. Avec celle-ci, tout devrait suivre automatiquement.

L’idée est de pouvoir accéder a un l’espace de travail du projet A du client B sur ma machine locale. L’adresse locale n’est plus localhost, mais quelque chose de plus explicite.

Ce que j’apprécie le plus de cette méthode car elle permet de conserver dans un dossier parent tout ce qui est spécifique pour le projet et le client. Le code a exécuter qui soit dans un sous-dossier ne feait que du sens.

Par exemple, un projet appelé projectname du client client serait classé dans un dossier sous le chemin /home/renoirb/workspace/client/projectname.

Le code du projet web serait accessible via le serveur web à l’adresse http://projectname.client.dev/ qui pointe vers l’adresse IP de la station de travail locale.

L’espace de travail du projet

IMPORTANT
Il faut que les noms de dossiers soient en minuscule et aucun espace, ni caractères accentués, sinon le serveur Apache risque de ne pas trouver le dossier. Principalement parce que l’adresse entrée dans le navigateur est convertie en bas de case, et que généralement un système d’exploitation qui se respecte fait une différence entre, par exemple ‘Allo’ et ‘allo’.

La convention suggérée va comme suit:

  • chaque projet est classé dans un chemin prévisible, similaire à /home/renoirb/workspace/client/projectname
  • le projet a un dossier web/
  • les autres dossiers au même niveau que web/ peuvent être n’importe quoi d’autre.

Idéalement, la logique applicative ne devrait pas être visible publiquement de toute façon. Seulement le fichier principal appelle l'”autoloader” en dehors du DocumentRoot.

De cette façon le vous pouvez classer tout vos projets du même client, et séparer par projets.

La procédure tient aussi en compte
* L’utilisateur courrant puisse écrire dans son dossier workspace/ avec Apache2 comme s’il était son propre utilisateur avec mpm-itk
* Le nom de domaine utilisé définit dans quel dossier de l’utilisateur chercher

Procédure

  • Assurer que les modules sont chargés
     sudo a2enmod vhost_alias
  • Ajouter le fichier default a la config de apache
     sudo vi /etc/apache2/ports.conf
  • Vérifier qu’il y a ceci:
    NameVirtualHost *:80 
    Listen 80 
    UseCanonicalName Off
  • Modifier le fichier de config du VirtualHost par défaut
  • Fichier de configuration par magique
    sudo vi /etc/apache2/sites-available/default
  • Verifier qu’il y a ce bloc dans <VirtualHost ...>:
    <IfModule mpm_itk_module>
        AssignUserId renoirb users
    </IfModule>
  • Remplacer la mention DocumentRoot par ce format:
    VirtualDocumentRoot /home/renoirb/workspaces/%1/%0/web

Sources

devLAB Montréal c’est maintenant parti!

Je l’avait annoncé. Nous avons particié a des événements, joints d’autres. Maintenant, depuis Janvier 2011, à tous les mercredis, nous vous invitons a vous joindre a nos rencontres. Donc,depuis cinq semaines maintenant nous hébergeons au public nos ateliers de travail qu’on appelait nos GeekNights maintenant surnommé devLAB.

Comment devLAB a commencé?

Tout a commencé en 2006. Le besoin est né après plusieurs mois à discuter de technologie a deux (avec Etienne) a prendre une bière au 3Brasseurs et de parler de binaire, netmask… vous savez, des trucs de Geeks. Nous avons joins notre  vieil ami Stephan et nous avons officialisé le pacte que nous avons tenu de 2006-2009. Une fois par semaine tous les Mercredis soir nous suivions ce concept:

  1. Se rencontrer peu importe la charge de travail au bureau
  2. Faire avancer une idée
  3. Utiliser quelque chose qu’on a jamais utilisé avant
  4. Pratiquer les méthodologies pour prendre les plis qu’on ne pouvait pas toujours prendre au bureau

Parfois nous en faisions des CodeFests qui duraient une fin de semaine complète. D’autres fois nous invitions des amis a jouer avec nous sur des sujets divers.

Continue reading “devLAB Montréal c’est maintenant parti!”

Article publié sur devLAB – Community Partner Spotlight: DevLAB Montreal

Origine de l’article

Il s’agit d’un article qui

Community Partner Spotlight: DevLAB Montreal

This year MWNW will be having a codefest portion co-hosted by the coolest geeks in town, DevLab Montreal. The folks at devLab MTL are very passionate about new technologies and Open Source, so we’re thrilled to have them on board with Make Web not War. We asked Renoir Boulanger , Co-Founder of DevLab MTL, a few questions:

What is devLab Montreal?

devLab Montreal is the natural movement toward the open-source community because it first started as friends gathering together every week only to play with technologies. Be it: Virtualization, Trying stuff with frameworks, Optimizing a minimal Linux virtual machine or computer, playing with monitoring, and so on. During the years, we talked about our gatherings and people got interested in joining, so we started to get out with the Open-source community and meet people that loves as much open source software as we do. Then it came naturally. When we founded Evocatio, we HAD to put some structure in it and bring something that’s missing in the Montreal’s events scene… something for us, geeks. devLab is our way to give back to the community. We scheduled meetings through the next year so we could teach and learn from each other. Each meeting will have a theme. Stored procedures optimization with either MySQL or Microsoft SQL. Database modeling and normalization. Bugwacking sessions on projects of our choice.

Why did you want to get involved with MWNW?

We want to get involved with MWNW because we have that passion to make things work together. Be it OpenLDAP, Active Directory or Tivoli or a SOAP WebService connecting to either MySQL or Microsoft SQL. In today technology landscape we cannot ignore either side. People will want software that fits their needs and as it happens many times Open source software have to work with Proprietary software. We embrace Microsoft initiative to listen to what we have to say as Open Source Enthusiasts.

Sign up for the codefest if you want to hack out some code with the devLab folks at MWNW.

Trois Geeks cherchent un nouveau Loyer sur Montréal

Un escargot avec sa maison par David Sones

Ça y est nous en sommes rendus là. Ça fait un bout qu’on est dans ce petit 5 1/2 et nous voulons voir si ce serait pas mieux ailleurs.

C’est super cool avoir un salon de la mort avec toutes nos choses installés pour travailler, nous voulons voir si il n’y aurait pas plus grand et plus central.

Ce qu’on cherche

Si vous avez des «plugs» pour un logement pour trois hommes, qui aurait:

  • Trois grandes chambres
  • Beaucoup de fenêtres
  • Près du Centre-ville, ou sur le Plateau
  • Endroits de stationement réservés possible
  • Espace Laveuse-Sécheuse

Pour qui?

Nous trois, les Geeks: Stéphan, Etienne, et moi.

Vos suggestions

Contactez moi via le formulaire et je ferai le suivi avec chacun d’entre vous.

Introduction de notre nouveau projet-événement intitulé DevLab

devLabMtl.orgMoi et mes compagnons d’arme des GeekNights (Etienne et Stephan) planifions un projet qu’on a baptisé DevLab.

Nos GeekNights étaient bien plaisants a nous trois mais nous voulons partager avec d’autres passionnés. C’est l’origine de l’idée du DevLab.

Nous avons choisi le nom «Lab», parce que l’idée est d’augmenter ses capacités avec des gens expérimentés et de partager lors d’une soirée ou une fin de semaine, pour le plaisir. Nous ne voulons pas nous limiter qu’a un seul projet Open-Source.

L’idée

  • UN site web pour prendre connaissance des sessions
  • Plusieurs types de sessions pour travailler les divers aspects et faire avancer le projet
  • UNE rencontre aux trois mois ou quelque chose de la sorte.
  • On va lancer le nouveau projet pour la semaine WebCom, lors du FTW (vers le 25 mai) .

Qui est invité à participer a l’organisation

Quiconque est intéressé a participer a l’organisation peut nous en faire part.

Le projet

Un nouveau software de comptabilité open-source

Ce que nous allons fournir

  • l’infrastructure
  • SVN/Git,
  • Bugtracker
  • Wiki de collaboration
  • L’entretien du code et de l’Infrastructure
  • Notre expérience de lab

Les buzzwords

  • PHP 5.3+
  • MySQL 5.1+
  • Virtualisation
  • Intégration Continue
  • Modèle Agile
  • Extreme Programming
  • … peut être même pas de Framework (a voir!)
  • OOP

Quand?

Le projet ne sera pas lancé tout de suite mais nous sommes en train de monter les alliances pour permettre ce type d’événement d’une façon récurrente. Si vous êtes intéressés, contactez nous. Je tiendrai cette page à jour.

Première sortie publique

MonDev Open Source Week MontrealNous serons présents lors de la première de MonDev et nous participerons aussi à la compétition «For the Web coding competition» sponsorisé par Microsoft Canada. Venez nous en parler!

Appel a la collaboration

Nous avons l’idée et les capacités de produire le logiciel. Mais notre intérêt ici est de partager nos connaissances et de créer un événement par des développeurs pour des développeurs qui désirent apprendre et partager leur connaissances.

Si vous êtes intéressés, manifestez-vous sur le fil de commentaire. Plus on est de fous plus on rit.

Nous allons vous tenir au courrant sur Twitter et sur cette page de l’évolution du projet.