Pourquoi avoir son site perso ?

• Parce que tout le monde en a un
• Visibilité :
  • De vous
  • De votre travail
• Accès à vos publications
• Enseignement :
  • Listing
  • Horaires / Salles
  • Cours (plutôt qu'un pdf)
• Informations pour vous contacter
• Liens vers vos projets (ANR, Équipe Inria, ...)
• CV

Méthode actuelle : héritage

Tiens, voilà le code séculaire qui te permet d'avoir un site. Surtout, ne change rien, celui qui a codé cela est maintenant à la retraite...

• Maintenance laborieuse (si existante)
• Non "responsive" (mobile / tablette )
• [possibles] Failles de sécurité
• Design parfois douteux

Développement web : c'est un métier...

• Nombreux Langages :
  • HTML (sémantique)
  • CSS ("design")
  • JavaScript (horrible)
• Veille technologique
  • Framework (Bootstrap, ...)
  • Bibliothèques (Javascript (ou pas))
  • ...
• Accessibilité

Séparer contenu et mise en page

1. Déléguer aux personnes compétentes la technique et le design

2. Se concentrer sur le contenu (notre valeur ajouté)

Remarques

1. Le contenu ne dépend pas du thème (aux méta-données près)
2. Similaire à LaTeX : séparation contenu / mise en page (design)

Contenu

Des Méta-données

+++
...
name = "Batman"
role = "Justicier masqué"
organizations = [ { name = "Wayne Enterprises", url = "#" } ]
...
+++

Du Markdown ("LaTeX en plus simple")

Exemple de fichier Markdown .md (Plus d'info ) :

# Section
## SubSection
### SubSubSection
Je **suis en gras**
Tu es en *italique*
[Ceci est un lien vers url](url)
Voilà des math :$x = 2$

Thème : Hugo-Academic pensé pour les académiques

1. Contient l'agencement du code HTML (layout) et le design (CSS)

2. Design modern et responsive, code maintenu (en tout cas en 2018)

3. Fonctionnalités :

   • "About" :
     • CV / Domaine d'intérêt / Bio / ...
     • Liens "sociaux" (researchgate, google scholar, github, ...)
   • Listes de vos ...
     • Publications + lien vers pdf/DOI/code/slides/projet/...
     • Talks + lien vers pdf/DOI/code/slides/projet/...
   • Pages pour vos
     • Projets (ANR, ERC, ...)
     • Enseignements
   • Informations pour vous contacter
   • Cours / Documentation logicielle
   • Cadeau bonus : LaTeX $$\int_{\Omega} u(x) = 1$$

Moteur : Hugo (générateur de sites statiques)

• Transforme le code Markdown en code HTML selon le thème
• Séparation du code (.md) et du résultat (.html)
• Un peu comme LaTeX qui sépare le code (.tex) du résultat (.pdf)

Arborescence/Structure du code "forcé" et pré-déterminé

.
├── config.toml      # Vos paramètres globaux
├── content          # Vos contenus
    └── home           # Homepage
    └── publication    # Vos publis
          └── publi1       # publi 1
               └── index.md       # fichier principal
               └── featured.jpg   # image illustration
               └── publi1.pdf     # pdf
               └── publi1.bib     # bibtex
          └── publi2       # publi 2
          └── ...          
    └── talks          # Vos talks
    └── projects       # Vos projets
    └── courses        # Vos cours
    └── ...    
├── data           # Données (tableau, ...)
├── layouts        # Vos layouts persos
├── static         # Vos fichiers annexes (images, ...)
    └── css        # Vos fichiers css persos
    └── img        # Vos images
└── themes         # Code du thème : SURTOUT Ne Pas toucher !
    └── academic      
          └── exampleSite # Exemples pratiques
          └── ...

All you need is love Hugo ...

Mac OS (installez brew)

brew update        # Mise à jour de la base de données
brew install hugo  # Installer Hugo (une fois pour toute)

Pour mettre à jour Hugo :

brew update       # Mise à jour de la base de données
brew upgrade      # Mise à jour des logiciels

Linux / Windows (/ Mac OS)

1. Téléchargez le dernier binaire
2. Placez le dans un dossier accessible "partout", e.g. /opt/hugo/hugo
3. Remarques :
   • ⚠ Package Linux hugo obsolète ! À éviter ! ⚠
   • Compilation possible (⚠ dernière version de Go)

.. And the Theme Sources

Issue de la documentation

Fortement recommandé : avec Git

• Git : "une fois pour toute", non obligatoire pour la suite
• Remarque : le nom du dossier webpage est un choix perso

git clone https://github.com/sourcethemes/academic-kickstart.git webpage
cd webpage
git submodule update --init --recursive

Moins recommandé : à la main (mises à jour futures compliquées)

Téléchargez et dézippez :

• Base du thème dans webpage (par ex.)
• Source du thème dans webpage/themes/academic

Générez le site localement

1. Lancez le serveur Hugo dans un terminal (et laissez le tranquille !) :

   cd Dossier/Du/Site
   hugo serve

2. Naviguez sur http://localhost:1313
3. Mise à jour automatique du code, rafraichissez la page web

Déployez votre site sur le serveur

• Générez votre site (construit un dossier public):

  hugo

• Déployez le sur le serveur du labo (évitez la commande scp) :

  rsync -avz --delete public/ username@web.ljll.math.upmc.fr:~/public_html

La commande est barbare mais il suffit de la copier/coller

Vous devriez avoir ceci :

Votre photo

1. "Petite" taille : 400px x 400px est suffisant
2. Placez la dans /static/img/portrait.jpg (⚠ gardez le même nom)
3. [Possible] Relancez le serveur hugo (CTRL + C et hugo serve)

Options globales du site : /config.toml

1. TomL: Un commentaire est précédé du signe #
2. Remplissez les cases qu'il convient (name, ...)
3. Le menu principal est ici :

[[menu.main]]
  name = "Home"
  url = "#about"
  weight = 1     # Les plus légers en premiers, les plus lourds à la suite
[[menu.main]]
  name = "Mon Ajout"
  url = "lien_vers_cette_page"
  weight = 10

Le contenu ? Dans content/...

1. Chaque fichier Markdown (.md) sera transformé en .html
2. Sauf mention contraire : content/truc/machin.md devient monsite.com/truc/machin.html
3. Chaque fichier .md possède :
   • une en-tête avec les méta-données (e.g authors) séparé par +++
   • le contenu en MarkDown
4. Pour ne pas "transformer" un fichier en html :
   • Supprimer le
   • Modifiez la méta-donné :
     • draft = true
     • ou (pour les widgets de home) : active = false

+++
# About/Biography widget.
widget = "about"
active = false
date = 2016-04-20T00:00:00
# Order that this section will appear in.
weight = 5
+++
Contenu : Je suis vraiment un geek

Homepage divisée en widgets : content/home/

Arborescence

.
├── content          # Vos contenus
    └── home            # Homepage
          └── about.md          # Bio
          └── contact.md        # Contact info
          └── features.md       # Fonctionnalités (pour un logiciel)
          └── hero_carousel.md  # Images bannières du site défilantes
          └── hero.md           # Image bannière du site
          └── posts.md          # Vos posts (blog)
          └── projects.md       # Vos projets
          └── publications_featured.md # Vos publis mises en avant
          └── publications.md   # Listing de vos publications
          └── search.md         # bouton "rechercher"
          └── skills.md         # Compétences
          └── tags.md           # Tags du site (recherche "horizontale")
          └── talks.md          # Listing de vos présentations
          └── ...

Remarque : le "html" des Widgets est dans /themes/academic/layouts/partials/widgets

Widgets usuels

• Majoritairement à contenu "vide" mais remplis de méta-données
• Choisi dans les méta-données
• Le widget custom permet d'afficher simplement ce que vous voulez

+++
...
widget = "custom"          # <---- Choix du widget 
active = true             # <---- Publié ou non ?
date = 2016-04-20T00:00:00 #<- Ne sera pas publié si date dans futur
...
+++

Widget page

• Créer une page avec ses propres "widgets" (comme la homepage) est possible

Publications : /content/publication

Arborescence

Une publication = un dossier

.
├── config.toml      # Vos paramètres globaux
├── content          # Vos contenus
    └── home            # Homepage
    └── publication       # publis
          └── publi1         # publi 1
               └── index.md       # fichier 
               └── featured.jpg   # image illustration
               └── publi1.pdf     # pdf
               └── publi1.bib     # bibtex
          └── publi2         # publi 2
          └── ...

Nouvelle publication

Depuis un fichier .bib

Avec Academic Admin (non testé !)

Simple mais efficace

Copiez/Collez dans content/publication/fourier64/index.md

• Une public existante à vous
• Ou dans /themes/academic/exampleSite/content/publication/

Mieux mais buggué (waiting for Hugo 0.50)

hugo new --kind publication publication/<my-publication>

Méta-données

• authors
• publication_types
• publication (=nom du journal)
• featured : Mise en avant (widget "publication_featured") ?
• url_XXX : lien vers XXX (pdf, slide, projet, ...)
• doi : renseignez le numéro DOI
• math = false : Autoriser LaTeX dans le contenu (laisser false si non)
• [image] : image d'illustration (featured.jpg)

BibTeX, Pdf et image ?

Dans le dossier de la publi, placez :

• Fichier .bib (peu importe le nom)
• Document .pdf avec le même nom que le dossier
• Une image featured.jpg (ratio plutôt 1600x400)

Remarque : similaire pour les talks

Listing des publications/talks/projects/...

https://votresite.com/projects
https://votresite.com/talks
https://votresite.com/publications

Le listing avec toutes vos publications est fourni avec un système de filtre...

Projecteur sur le Widget Projects

• Affichage par "cards" plutôt agréables
• Réutilisable. Exemple pour l'enseignement :

# Fichier content/home/teaching.md
+++
# Projects widget.
widget = "projects"         # Choix du widget projects
active = true
date = 2016-04-20T00:00:00
title = "Teaching"          # Nom à afficher sur la Homepage
subtitle = ""               # sous titre
# Order that this section will appear in.
weight = 60
# Content.
# Display content from the following folder.
# For example, `folder = "project"` displays content from `content/project/`.
folder = "teaching"
...

Layout d'une page web

Layouts fournis

post (blog), publication, talk, project, docs (doc logiciel / cours)

Définir le layout d'une page

• Choix automatique selon le nom du dossier ...

  Dossier content/publication implique layout publication

• ... Ou forcé dans l'en-tête

  +++
  ...
  type = "docs"  # par exemple !
  ...
  +++

Read The Nice Manual

• Documentation très (très) exhaustive et maintenue (sisi !) notamment la partie Writing your content
• Jetez un coup d'oeil dans /themes/academic/exampleSite
• Venez nous voir et/ou regardez les issues
• Souscrivez à la mailing list locale

MÀJ du thème (régulièrement mais pas trop !)

sh ./update_academic.sh

1. Re-Téléchargez la dernière version de Hugo
2. Possible "break" !
3. Ne pas le faire le vendredi soir avant de partir en week-end

Bricoler hors des sentiers battus ?

Possible mais attention à la maintenance

Automatisation avec Git

Rappels : quelques commandes

• git status = statut du dépôt

  git status

• git add = tracker un nouveau fichier

  git add monfichier

• git commit = faire une "sauvegarde" du code

  git commit -m "message" -a

• git push = envoie du code sur le serveur

  git push

Services externes : Netlify

• Nécessite un compte Gitlab.com ou gihub ou bitbucket
• Netlify génère et déploie un site en quelques secondes après votre push
• Rediction en plaçant un fichier .htacess dans public_html :

  Redirect 301 /username https://votresite.netlify.com

Remarques :

• Github : Le code du site sera alors public. Demandez alors le student developper pack (gratuit pour les académiques)
• N'utilisez surtout pas un email @protonmail.com (snif)

En interne avec le Gitlab du labo

En cours !