Les outils employés pour réaliser ce site.

Ce site est rédigé en markdown puis « compilé » en html avec gulp. Quelques autres outils et pas mal d’autres services sont impliqués, et j’indique également quelques uns des sites qui ont pu inspirer le design de ce site.

Les sources de ce site sont disponibles sur demande.

Logiciels

Ce site est édité à l’aide de divers logiciels libres constitutifs de Debian, comme pandoc, Geany, atom ou emacs. Les titres, les manicules ainsi que les aldines sont composés en EB Garamond 12 points. La mise en ligne du site s’effectue à l’aide d’Unison (j’en parle par-là).

Ce site est « compilé » grâce à image_optim, yui-compressor et lesscpy, et tout ce petit monde est synchronisé par un Makefile qui ressemble à ça:

MARKDOWNFILES:=$(shell find src/ -type f -name '*.md')
JSFILES:=$(shell find src/ -type f -name '*.js')
LESSFILES:=$(shell find src/ -type f -name '*.less')
PNGFILES:=$(shell find src/ -type f -name '*.png')
JPEGFILES:=$(shell find src/ -type f -name '*.jpeg')
SVGFILES:=$(shell find src/ -type f -name '*.svg')

HTMLTARGETS:=$(MARKDOWNFILES:src/%.md=build/%.html)

PNGTARGETS:=$(PNGFILES:src/img/%.png=build/web/img/%.png)
JPEGTARGETS:=$(JPEGFILES:src/img/%.jpeg=build/web/img/%.jpeg)
SVGTARGETS:=$(SVGFILES:src/img/%.svg=build/web/img/%.svg)
IMGTARGETS:= $(PNGTARGETS) $(JPEGTARGETS) $(SVGTARGETS) 


TARGET= $(HTMLTARGETS) build/web/js/script.js build/web/ccs/style.css build/web/fonts/ $(IMGTARGETS)

all: $(TARGET)

build/%.html: src/%.md
    @mkdir -p $(dir $@)
    pandoc --email-obfuscation=references --section-divs --toc --toc-depth=2 --template=./src/templates/template.html $< -o $@

build/web/js/script.js: $(JSFILES)
    @mkdir -p build/web/js/
    cat $(JSFILES)  | java -jar /usr/share/yui-compressor/yui-compressor.jar --type js -o $@ --charset utf-8
    #   [ ! -e "build/web/js/jquery-3.5.1.min.js" ] && wget -nc -O build/web/js/jquery-3.5.1.min.js https://code.jquery.com/jquery-3.5.1.min.js && \

build/web/ccs/style.css: $(LESSFILES)
    @mkdir -p build/web/ccs/
    lesscpy $(LESSFILES) > $@

# build/web/fonts/: src/web/fonts/
#   @mkdir -p build/web/
#   cp -u -r src/web/fonts/ build/web/fonts/

build/web/img/%.png: src/img/%.png
    @mkdir -p $(dir $@)
    cp -u $< $@
    image_optim --no-svgo --cache-dir .cache/img/ $@

build/web/img/%.jpeg: src/img/%.jpeg
    @mkdir -p $(dir $@)
    cp -u $< $@
    image_optim --no-svgo --cache-dir .cache/img/ $@

build/web/img/%.svg: src/img/%.svg
    @mkdir -p $(dir $@)
    cp -u $< $@

Services

J’utilise au quotidien des services libres comme ceux proposés par framasoft. Une page recence les outils propres à la collaboration scientifique. Quant à ce site, il emploie de très nombreux services, parmi lesquels :

Tests

Ce site est testé avec une batterie de sites, parmi lesquels :

Inspirations

Archive

Ce site était « compilé » (passage de less à CSS, de markdown à html, compression, concaténation, etc.) grâce à gulp, qui repose lui-même sur Node.js. J’ai migré principallement parceque la dernière version de gulp cassait tout mon fil de composition, et qu’il m’a paru plus simple de migrer que de le réparer.

Ce dernier s’installe avec

root# curl -sL https://deb.nodesource.com/setup_14.x | bash -
root# apt-get install -y nodejs

Une fois gulp installé, on l’initialise ensuite avec

user$ npm install --save-dev gulp

Ce site utilise tout un tas de modules, installés avec

root# npm install -g gulp autoprefixer gulp-concat gulp-css-base64 gulp-html-extend gulp-html-minifier gulp-imagemin gulp-less gulp-minify-css gulp-pandoc gulp-postcss gulp-sitemap gulp-uglify

puis liés avec

user$ npm link gulp autoprefixer gulp-concat gulp-css-base64 gulp-html-extend gulp-html-minifier gulp-imagemin gulp-less gulp-minify-css gulp-pandoc gulp-postcss gulp-sitemap gulp-uglify

Pour un simple site, cette méthode paraît préférable au recours à packages.json.