Créer un site statique avec Frank

[Sephi-Chan]

Créer un site statique avec Frank

Depuis pas mal de temps, je cherche un outil sympa pour créer de petits sites, pour documenter un projet, présenter quelque chose. J'en ai testé plusieurs et j'ai découvert Frank.

Frank est donc un générateur de site statiques écrit en Ruby (ne partez pas, ça ne vous oblige pas à en écrire !) et capable de vous fournir tous les super outils qu'on utilise pour créer un site dynamique comme les URL sexy, les layouts, les vues partielles, les moteurs de template (notamment Haml), CoffeeScript, SCSS, etc. puis de le compiler sous forme d'un site statique.

Voici par exemple un site statique réalisé avec Frank : presentation.seeli.es.
Le code source pour générer ce site est disponible sur GitHub : github.com/Sephi-Chan/Seelies-Presentation.

Voici l'arborescence du site, à l'heure où j'écris ces lignes.

.

├── README

├── dynamic

│   ├── _liste_mecanismes.haml

│   ├── _topbar.haml

│   ├── demo

│   ├── deroulement-du-jeu.haml

│   ├── index.haml

│   ├── mecanismes

│   │   ├── appel-aux-armes.haml

│   │   ├── batiments.haml

│   │   ├── betes.haml

│   │   ├── but-du-jeu.haml

│   │   ├── carte.haml

│   │   ├── combats.haml

│   │   ├── commerce.haml

│   │   ├── communication.haml

│   │   ├── conquete.haml

│   │   ├── defense.haml

│   │   ├── diplomatie.haml

│   │   ├── dressage.haml

│   │   ├── index.haml

│   │   ├── monde.haml

│   │   ├── reputation.haml

│   │   ├── ressources.haml

│   │   └── vols.haml

│   ├── scripts

│   │   └── application.coffee

│   └── styles

│       └── application.scss

├── helpers.rb

├── layouts

│   ├── default.haml

│   └── mecanismes

│       └── default.haml

├── setup.rb

└── static

    ├── favicon.ico

    ├── images

    │   └── map-preview.png

    ├── scripts

    │   └── jquery.min.js

    └── styles

        └── bootstrap.min.css

Comme on peut le voir, on trouve 5 éléments à la racine du projet (en plus du README) :

• Le répertoire dynamic/ qui contient le contenu… Dynamique du site. Typiquement les pages qui nécessitent des traitements. C'est le cas des fichiers Haml, CoffeeScript et SCSS, qui doivent être compilés pour produire respectivement du HTML, du Javascript et du CSS.
  
• Le fichier helpers.rb, qui va permettre de définir des fonctions (en Ruby) qu'on pourra appeler dans les vues. C'est très utile si on souhaiter générer une partie du contenu dynamiquement à partir des données d'un Webservice (ou même d'une base de données) par exemple.
  
• Le répertoire layouts/ qui contient les layouts, c'est à dire les parties de pages qui encadrent généralement le reste, où l'on met les balises html, head, body, etc.
  
• Le fichier setup.rb, qui contient les réglages du site (le serveur à utiliser, les éventuelles information de publication, etc.). On reviendra dessus après.
  Le répertoire static/, qui contient les données statiques : ça peut être des pages HTML (mais ça n'a pas trop d'intérêt), mais surtout vos images, vos scripts qui n'utilisent pas CoffeeScript (les framework, généralement), vos feuilles de styles qui n'utilisent pas de précompilateur.
  

Parmi la liste des fichiers du répertoire dynamique, on en trouve de curieux dont le nom commence par un underscore. Ce sont des vues partielles. On s'en servira pour insérer des parties qui reviennent souvent ou pour découper le site de manière assez logique (ici une liste et la barre du haut).


Exemple avec le fichier layouts/mecanismes/default.haml, écrit en Haml. Ce layout emballe toutes les pages qu'on appelle, ce qui explique son nom default.haml :

!!!5

%html

  %head

    %title Seelies

    %meta{ charset: "utf-8" }

    %link{ rel: "stylesheet", href: "/styles/bootstrap.min.css" }

    %link{ rel: "stylesheet", href: "/styles/application.css" }

    %script{ src: "/scripts/jquery.min.js" }

    %script{ src: "/scripts/application.js" }

  %body

    = render_partial "topbar"

    

    

    .container

      .content

        .row

          .span4

            .well

              = render_partial "liste_mecanismes"

              

          .span12

            = yield

            = refresh

Outre la syntaxe de Haml qui peut être nouvelle pour certain, on trouve notamment plusieurs lignes qui commencent par un signe égal. Cela permet de dire à Haml d'exécuter du code Ruby, en l'occurrence des helpers prédéfinis par Frank.

Le premier qu'on rencontre render_partial permet de rendre une vue partielle dont on spécifie le nom (sans le underscore). Frank ira chercher le fichier correspondant dans le répertoire dynamic/.

Le helper suivant est yield. Il permet d'inclure le contenu de la page courante dans le layout. Du coup, dans nos vues, on n'aura pas à s'occuper de réécrire ce qu'il y a dans le layout : on ne se concentrera que sur le contenu de la page souhaitée.

Le dernier helper est refresh. Il permet de rafraichir la page automatiquement quand son contenu change. C'est très utile pendant le développement ! Et d'ailleurs, ce n'est utile que pendant le développement puisque quand on exporte le site, Frank vire cette partie.


Intéressons-nous maintenant à page de contenu, en l'occurrence dynamic/index.haml. C'est la page qui sera appelée par défaut

.hero-unit

  %h1

    Seelies

    %small Le jeu de stratégie communautaire par navigateur

    

  %p Seelies est un jeu de stratégie…

  %p.read-more

    %a.btn.primary{ href: "/mecanismes/" } En savoir plus sur les mécanismes du jeu

    

    

.row

  .span8

    %h3 Gestion des ressources

    %p Le monde est couvert de ressources…

    %p Les Seelies dressent des bêtes pour…

    %p.read-more

      %a{ href: "/mecanismes/ressources" } En savoir plus sur les ressources

On y voit encore du Haml, et notamment quelques liens ! Comme on peut le voir, les URL sont propres et on peut s'organiser en répertoire ! Ici, j'ai un répertoire mecanismes/ qui a son propre fichier index et son propre layout défini dans layouts/mecanismes/default.haml (en son absence, c'est le layout layouts/default.haml aurait été rendu).

Comme vous pouvez vous y attendre, si vous suivez le lien vers /mecanismes/ressources, c'est la vue dynamic/mecanismes/ressources.haml qui est rendue.

Concernant les fichiers CoffeeScript et SCSS, vous devez inclure les version compilées, pensez-donc à utiliser les extensions extension js et css.



Bon, maintenant que vous êtes séduit par cet outil très sympa, voyons comment l'installer et l'utiliser.

Tout d'abord, il vous faut Ruby et Rubygems. Installer ensuite la gem Frank grâce à la commande gem install frank. Il va installer quelques dépendances et ce sera bon.

Créez ensuite un projet de base avec la commande frank new mon_super_site et Frank construira une arborescence de base (qu'on pourra personnaliser grâce aux templates, car gentil comme je suis j'en ai préparé pour vous, cf. plus bas !).

Vous pourrez ensuite lancer la commande frank server qui va lancer un serveur de développement (vous pouvez utiliser mongrel, thin ou webrick. Le plus simple étant d'utiliser webrick puisqu'il est livré avec Ruby, ça se configure dans le fichier setup.rb).

Une fois le serveur lancé, allez sur http://localhost:3601 et admirez le résultat.

Pour compiler le site, utilisez la commande frank export (ou la forme raccourcie frank e) (si vous vous fichez des jolies URL) frank export --production (si le .html dans les URL vous pique les yeux). Un répertoire exported/ sera crée et contiendra votre site statique, que vous pouvez ensuite mettre sur un serveur FTP !

Si vous disposez d'un serveur dédié avec un accès SSH, vous pouvez même déployer le site via SCP en tapant juste frank publish (ou frank p) ! Pour cela, configurez les identifiants de votre compte dans setup.rb.

Dans mon cas :

Frank.publish.host = "jeuweb.org"

Frank.publish.path = "./"

Frank.publish.username = 'romaintribes'

Comme ma clé SSH est connue du serveur, je n'ai même pas besoin de tapper de mot de passe ! Le site est compilé et envoyé sur le serveur.


Comme je le disais plus haut, on peut créer des templates Frank pour mettre en place plus rapidement un site. Frank en propose un par défaut mais il n'est pas très bien, mieux vaut créer le sien !

J'en ai créé deux très neutres, l'un intègre jQuery, l'autre ajoute Bootstrap. Pour installer ces templates, mettez les dans votre dossier personnel ~/. Vous pouvez les trouver sur GitHub.

Ainsi, quand vous commencerais un projet Frank avec la commande frank new mon_site, celui-ci vous demandera de choisir quel template utiliser.


Si vous voulez en savoir plus, consultez la page Github de Frank !

[Dexyne]

C'est plutôt sympa comme truc, enfin me semble en avoir déjà mais je pense qu'avec ruby et surtout haml ça rends plus intéressant l'écriture des fichiers.
Le SCSS aidera aussi mais si on utilise un template ça limite quand même notre css (sauf si on veut vraiment changer le template à notre goût) et pour Coffeescript je n'en ai pas encore utiliser donc je ne sais pas - bien qu'ayant vu quelques bout de code - mais je suppose c'est plus simple aussi.

[Sephi-Chan]

Pour moi, le principal intérêt, ce sont les layouts et les partials. Les URL propres sont plutôt bienvenues également.

Les langages de templates Haml, SCSS et CoffeeScript sont des atouts conséquents, mais rarement autant que dans le cadre d'un site dynamique riche en interactions, dans lequel CoffeeScript excelle.

Après, que ce soit du Ruby, du Python ou autre importe peu dans la mesure où la plupart des gens n'auront rien à écrire dans ce langage.

[Viciousity]

Meilleur outil de conception pour un webdesigner

[Sephi-Chan]

Pour ceux qui se demandaient à quel point CoffeeScript pouvait être utile, il n'y a qu'à voir ce que donne mon expérimentation de Backbone, réalisée avec Frank.

Le code source sont disponibles sur GitHub et on peut facilement voir que sur certains fichiers (ici, là, ou sur les vues en général), le gain de lisibilité est conséquent.