PROJET AUTOBLOG


De l’épice pour la pensée

Site original : De l’épice pour la pensée

⇐ retour index

 Blog statique, bye bye Blogotext

samedi 26 mai 2018 à 08:39

 Blog statique, bye bye Blogotext

Après 8 ans d'existence, mon blog sera désormais “statique” et disponible à l'adresse https://yeuxdelibad.net/Journal. Vous pouvez en suivre les nouveautés avec n'importe quel lecteur de flux grâce au flux atom.

Ce “déménagement” a lieu pour plusieurs raisons :

J'aime toujours autant Blogotext et continue de l'utiliser sur d'autres blogs. Mais avoir un site statique présente des avantages certains :

Ça m'a permis de remettre le nez dans le code de swx, le générateur de site statique, mais j'en reparlerai dans un autre billet.

Grâce à Blogotext, j'ai pu exporter tous mes articles et commentaires au format json. Après un peu de bidouille en python, j'ai pu recréer tout le contenu afin de faciliter les redirections de l'ancien blog vers le nouveau.

Ensuite, un peu de CSS pour l'apparence, du javascript pour rigoler et ça suffira bien.

Pour ceux qui veulent continuer à lire mes bafouilles, n'oubliez pas de vous abonner au nouveau flux atom.

swx - static site generator

vendredi 25 mai 2018 à 19:23

swx - static site generator

swx is now here : swx.

This page in french

swx is a tool to generate a static website from a file tree written in [markdown http://daringfireball.net/projects/markdown/syntax], [txt2tags http://txt2tags.org/] or any other markup language.

It does'nt require any other tool except usal commands (cp, sed…) and the markup parser.

Inspired by sw, swx will generate you html pages, create links between them in a menu. You cas use simple css and templates that will be included in your pages.

Features

Example : source tree

/home/user/site/
    |style.css
    |--------------directory/
    |-----------------------index.md
    |-----------------------file1.md
    |-----------------------image.jpg
    |--------------directory2/
    |-----------------------index.t2t
    |-----------------------article.md

will become in output

/home/user/site.static/
    |style.css
    |--------------directory/
    |-----------------------index.html
    |-----------------------file1.html
    |-----------------------image.jpg
    |--------------directory2/
    |-----------------------index.html
    |-----------------------article.html

Install

Download files here here

Using

Simple run :

./swx directory_containing_website

then, push you site the way you prefer with mercurial, git, rsync or even ftp

Configuration

To configure, edit swx.conf

You can change uppercase variables to fit your needs

Modyfy how your site looks with style.css

Example

mkdir dossier
cd dossier
wget http://dev.yeuxdelibad.net/swx.tgz
tar xvzf swx.tgz
mkdir monsite
vim monsite/index.md
vim monsite/page1.md
mkdir monsite/dossier1
vim monsite/dossier1/index.md
./swx/swx monsite 

Appears monsite.static containing every pages converted to html and a new file swx.log containing the list of news pages (used later)

RSS feed

Use swx_rss to generate feed.xml

./swx_rss > DESTDIR/feed.xml

Replace DESTDIR the path to the output directory

Site map

Generate a list of pages in your site with

    ./swx_plan DESTDIR > DESTDIR/Divers/map.html

And replace of course : DESTDIR

Sitemap generator

    ./swx_sitemap DESTDIR > DESTDIR/sitemap.xml

Then, you can compress it :

    gzip --best -c DESTDIR/sitemap.xml > DESTDIR/sitemap.gz

Don’t forget to edit robots.txt

User-agent: *
Disallow:
Sitemap: http://votredomaine.net/sitemap.gz

Makefile

Example Makefile to edit to fit your needs:

SOURCEDIR=$(CURDIR)/example
DESTDIR=$(CURDIR)/example.static
all:
    ./swx $(SOURCEDIR)
    ./swx_gopher $(SOURCEDIR)
    ./swx_sitemap  $(DESTDIR) > $(DESTDIR)/sitemap.xml
    gzip --best -c $(DESTDIR)/sitemap.xml > $(DESTDIR)/sitemap.gz
    ./swx_plan $(DESTDIR) > $(DESTDIR)/siteplan.html
    ./swx_rss > $(DESTDIR)/feed.xml
    ./swx_blog $(DESTDIR)/index.html
clean:
    rm -rf *.static
    rm swx.log
force:
    find Rendez-vous_sur_Arrakis -exec touch {} \;
    make all
serve:
    cd $(DESTDIR) && python3 -m http.server && x-www-browser http://localhost:8000

Then, just run :

The end

Most of script can be improved, and simplified.

Avoid weird file names (use detox!)

Do not hesitate to contact me for any suggestion here

swx - générateur de site statique

vendredi 25 mai 2018 à 19:23

swx - générateur de site statique

swx est maintenant maintenu par le collectif 3hg : nouvelle page pour swx.

This page in english

swx permet de créer un site statique à partir d'une arborescence de fichiers écrits au format txt2tags ou markdown. Notez toutefois que n'importe quel autre convertisseur et langage markup, (pandoc…) peut être utilisé.

Mis à part ce convertisseur, aucun outil spécial n'est nécessaire, on n'utilise que les commandes de base du système (sed, cut, echo…)

Il s'agit en fait d'un kit de scripts qui ont pour chacun une tâche précise. “Diviser pour mieux régner” qu'ils disaient… Au moins, chaque script fait son boulot, et le fait bien.

Inspiré par sw, swx générera vos pages html, créera des liens entre elles sous forme de menu, et au lieu d'utiliser des modèles avec jinja, vous pouvez utiliser des simples feuilles de style css et préciser au script des morceaux de html que vous voudriez voir dans chaque page.

Fonctionnalités

Exemple : Si votre répertoire source est ainsi :

/home/user/site/
    |style.css
    |--------------directory/
    |-----------------------index.md
    |-----------------------file1.md
    |-----------------------image.jpg
    |--------------directory2/
    |-----------------------index.t2t
    |-----------------------article.md

Il deviendra en sortie

/home/user/site.static/
    |style.css
    |--------------directory/
    |-----------------------index.html
    |-----------------------file1.html
    |-----------------------image.jpg
    |--------------directory2/
    |-----------------------index.html
    |-----------------------article.html

Installation

Téléchargez tous les fichiers présents ici

Installez de quoi traiter votre langage markup (markdown, discount, txt2tags…)

Utilisation

Le script se lance simplement ainsi, dans le répertoire qui contient le dossier contenant votre site :

./swx repertoire_contenant_le_site

Ensuite, libre à vous de copier votre site ou le mettre à jour de la façon que vous préférez

Configuration

La configuration se déroule dans le fichier swx.conf

Vous pouvez modifier le contenu des variables (en majuscule) pour définir:

Vous pouvez définir l'apparence souhaitée en modifiant le fichier style.css. Un exemple est fourni avec swx.

Exemple d'utilisation

C'est parti, voyons en quelques étapes comment utiliser toutes les fonctionnalités de swx.

Tout d'abord, on va créer un dossier pour pouvoir travailler :

mkdir dossier
cd dossier

On télécharge swx, on le décompresse :

wget http://dev.yeuxdelibad.net/swx.tgz
tar xvzf swx.tgz

On crée un nouveau dossier qui contiendra notre site, puis on y crée quelques pages

mkdir monsite
vim monsite/index.md
vim monsite/page1.md
mkdir monsite/dossier1
vim monsite/dossier1/index.md

On génère une première fois notre site :

./swx monsite 

Apparaît alors un dossier monsite.static qui contient toutes les pages converties en html, et un nouveau fichier swx.log qui contient la liste des nouvelles pages (ça nous servira plus tard).

Ajout d'un flux rss

Pour ajouter un flux rss, on va créer un fichier feed.xml à la racine du site.

On utilise le script swx_rss fournit avec swx ainsi :

./swx_rss > DESTDIR/feed.xml

Remplacez DESTDIR par le dossier qui contiendra le site. Dans notre exemple, c'est monsite.static

Ajout d'un page type blog

Vous pouvez créer une page de type blog, contenant les articles récents. Il faut lancer :

./swx_blog DESTDIR/page.html

Si le fichier page.html contient “%%%BLOG%%%” (ou ce que vous aurez définit dans la configuration), alors cette ligne sera remplacée par la liste des articles récents.

Ajout d'une page de plan de site

Pour générer un plan de votre site que les visiteurs pourront utiliser afin de le parcourir, vous pouvez utiliser le script swx_plan fournit avec swx.

Pour l'utiliser :

    ./swx_plan DESTDIR > DESTDIR/Divers/Plan_du_site.html

Remplacez DESTDIR par le dossier qui contiendra le site. Dans notre exemple, c'est monsite.static

N'hésitez pas à éditer le script pour modifier l'apparence de la page générée. Il utilise par défaut le style.css de votre site.

Ajout d'une page de plan de site lisible par les robots

Tout simplement, pour créer un sitemap lisible par les moteurs de recherche :

    ./swx_sitemap DESTDIR http://yoursite.com > DESTDIR/sitemap.xml

Que vous pouvez compresser ensuite ainsi :

    gzip --best -c DESTDIR/sitemap.xml > DESTDIR/sitemap.gz

N'oubliez pas de rajouter dans le fichier robots.txt ceci :

User-agent: *
Disallow:
Sitemap: http://votredomaine.net/sitemap.gz

Automatiser le tout

Vous pouvez soit utiliser un script appelant les commandes précédentes, ou bien un fichier Makefile, qui vous permettra de faire tout ça avec simplement la commande make.

Exemple de fichier Makefile, à adapter selon le chemin de vos fichiers (variables DESTDIR, SOURCEDIR, et le nom du dossier contenant le site (ici Rendez-vous_sur_Arrakis)) :

SOURCEDIR=$(CURDIR)/example
DESTDIR=$(CURDIR)/example.static
all:
    ./swx $(SOURCEDIR)
    ./swx_gopher $(SOURCEDIR)
    ./swx_sitemap  $(DESTDIR) > $(DESTDIR)/sitemap.xml
    gzip --best -c $(DESTDIR)/sitemap.xml > $(DESTDIR)/sitemap.gz
    ./swx_plan $(DESTDIR) > $(DESTDIR)/siteplan.html
    ./swx_rss > $(DESTDIR)/feed.xml
    ./swx_blog $(DESTDIR)/index.html
clean:
    rm -rf *.static
    rm swx.log
force:
    find Rendez-vous_sur_Arrakis -exec touch {} \;
    make all
serve:
    cd $(DESTDIR) && python3 -m http.server && x-www-browser http://localhost:8000

Voici ce que vous pourrez faire avec ce fichier présent dans votre dossier contenant swx :

Pourquoi un autre générateur de site statique?

Bonne question. Ceux qui ont suivi ont pu voir que j'avais écrit auparavant pwg . Cependant il était mal fichu : tout dans un seul fichier, du coup dès que je voulais modifier quelque chose j'étais contraint de me replonger dans le code. C'était vraiment pas facile à maintenir. De plus, le python me limitait au markdown

Mais qu'en est-il des autres générateurs de site statiques? Ben oui, pour ne citer que les plus connus pelican, jekyll… À mon goût, ils faisaient bien trop de choses. Pour déployer un site, il m'aurait fallu reprendre toutes mes pages, y ajouter des tags, reprendre les templates du site…

Le mot de la fin

Évitez les fichiers avec des noms bizarres, des espaces… Pour vous en débarrasser, pensez à la commande detox (paquet debian du même nom)

Si vous souhaitez contribuer, suffit de demander

Formulaire de recherche sur votre site

vendredi 25 mai 2018 à 17:44

Formulaire de recherche sur votre site

Si vous souhaitez ajouter un formulaire de recherche sur votre site, vous pouvez insérer le code html suivant :

Avec duckduckgo :

<form action="https://duckduckgo.com/" method="get">   <label for="q">Cherche sur votresite.tld</label>  <input type="text" name="q" value="">   <input type="hidden" name="sites" value="votresite.tld">    <input type="hidden" name="ia" value="web"> <input type="submit" value="search"></form>

Avec qwant :

<form method="GET" action="https://www.qwant.com" id="form" onsubmit="addSiteSearch()"><label for=q >Chercher sur votresite.tld</label><input type="text" name="q" id="query" size="31" maxlength="255" value=""><input type="hidden" name="l" value="fr"><input type="submit" name="btnG" value="?"></form><script type="text/javascript">        function encodeHTML(s) {        return s.replace(/&/g, '&').replace(/</g, '<').replace(/"/g, '"');}        function addSiteSearch() {        document.getElementById('query').value = encodeHTML(document.getElementById('query').value) + " site:votresite.tld";}</script>

Dans chaque exemple, pensez à modifier le champ "votresite.tld".

Le formulaire de qwant nécessite l'activation de javascript... Ce n'est pas du code exotique, mais ça peut en chagriner certains.

À vous ;)

Formulaire de recherche sur votre site

vendredi 25 mai 2018 à 17:44

Formulaire de recherche sur votre site

Si vous souhaitez ajouter un formulaire de recherche sur votre site, vous pouvez insérer le code html suivant :

Avec duckduckgo :

<form action="https://duckduckgo.com/" method="get">   <label for="q">Cherche sur votresite.tld</label>  <input type="text" name="q" value="">   <input type="hidden" name="sites" value="votresite.tld">    <input type="hidden" name="ia" value="web"> <input type="submit" value="search"></form>

Avec qwant :

<form method="GET" action="https://www.qwant.com" id="form" onsubmit="addSiteSearch()"><label for=q >Chercher sur votresite.tld</label><input type="text" name="q" id="query" size="31" maxlength="255" value=""><input type="hidden" name="l" value="fr"><input type="submit" name="btnG" value="?"></form><script type="text/javascript">        function encodeHTML(s) {        return s.replace(/&/g, '&').replace(/</g, '<').replace(/"/g, '"');}        function addSiteSearch() {        document.getElementById('query').value = encodeHTML(document.getElementById('query').value) + " site:votresite.tld";}</script>

Dans chaque exemple, pensez à modifier le champ "votresite.tld".

Le formulaire de qwant nécessite l'activation de javascript... Ce n'est pas du code exotique, mais ça peut en chagriner certains.

À vous ;)