Portfolio

Ce projet propose de découvrir les bases de l’utilisation de systèmes de gestion de contenus appliquées à la création d’un portfolio simple. Le projet est basé sur le CMS [CMS: Content management system (système de gestion de contenu)] open-source (mais non gratuit) Kirby.

Les différentes version du code source du projet sont accessibles sur GitHub ou téléchargeables ci-dessous :

↗ github.com/jbidoret/portfolio

Pour les plus aventureux·ses, il est aussi possible d’utiliser git. Soit en ligne de commande (dans un terminal), soit via une application (Github Desktop ou Sourcetree).

# Allez dans le dossier racine de votre serveur de développement, par exemple :
cd /Applications/MAMP/htdocs/
# Puis “clonez” le dépôt :
git clone https://github.com/jbidoret/portfolio.git
# Ou, pour la version Nouveaux médias :
git clone https://github.com/jbidoret/portfolio/tree/newmedias.git

Prérequis

Un serveur de développement : MAMP ou XAMPP ;
MAMP ou XAMPP permettent d’installer sur un mac ou un pc un “serveur de développement” qui reproduit les conditions et la structure logicielle d’un “vrai” serveur web. En démarrant l’application, on lance plusieurs programmes (Apache, PHP, MySQL) qui permettent de “servir” des sites web localement (http://localhost).
Un hébergeur : Alwaysdata ou OVH ;
NB: les étudiants de l’ÉSAD Pyrénées peuvent bénéficier d’un compte Alwaysdata gratuit augmenté à 200 Mo en me contactant. De nombreux hébergeurs existent, commerciaux ou associatifs. Alwaysdata fournit un très bon service, mais est comparativement légèrement plus cher que d’autres (OVH, Gandi, 1&1, Amen…).
Un client FTP (Cyberduck, FileZilla) ;
Un client FTP est un logiciel qui permet de se connecter de manière sécurisée à un (vrai) serveur web pour y déposer les fichiers d’un site, afin de le publier en ligne.
Un éditeur de code : VS Code ou Atom ;
Un navigateur récent : Firefox ou Chrome.

Installation

Télécharger et décompresser le zip, et déplacez les fichiers à l’intérieur du dossier htdocs de MAMP (ou du dossier racine de votre serveur de développement, s’il est configuré différemment).

Vous pourrez ensuite :

afficher un finder (explorateur) contenant les fichiers
ouvrir l’ensemble du dossier htdocs/portfolio dans votre éditeur
accéder au site dans votre navigateur (http://localhost/portfolio/ ou http://localhost:8888/portfolio/)
accéder à l’interface d’administration du site dans un autre onglet (http://localhost/portfolio/panel/ ou http://localhost:8888/portfolio/panel/)
ouvrir un onglet avec le guide de Kirby et un autre avec la référence. NB : la documentation de Kirby est très précise et permet de résoudre la plupart des problèmes. À défaut, aller chercher dans le forum ou y poser vos questions.

→ Démarrer avec Kirby

Exemples

Une sélection de portfolios par en ligne Stéphane Elbaz sur are.na.
Le filtre “portfolio” sur hoverstat.es
Les portfolio générés à partir de Cargo.site