Comment bootstraper son projet en 2021 ?

Depuis plus de 14 ans (quatorze putain) que je fais du développement web, j'ai appris et découvert des tas de trucs. Aujourd'hui, je vais vous livrer quelques-unes de mes astuces pour mettre rapidement sur pied un site web en 2021. On ne vas pas parler de code, mais simplement établir une liste d'outils qui permettent d'accélérer la cadence.

Je pars ici du principe que vous êtes débutant en HTML/CSS. Comme pour le tuto sur le serveur LAMP, cet article s'adresse donc aux débutants, vous risquez de vous ennuyer un peu si vous êtes un développeur chevronné.

Le design

Moi, je suis développeur, pas designer. Alors le design de mes sites, il a toujours été catastrophique, j'ai du trouver des parades. L'outil le plus utilisé et efficace se nomme Bootstrap. Il ne fera pas votre design pour vous, mais les styles sont déjà pré-faits et les couleurs sont pré-définies. Ce ne sera pas forcément beau, mais ça ne sera pas moche.

Néanmoins, si vous voulez du pré-mâché comme moi, je vous recommande  https://html5up.net/ et https://startbootstrap.com/. Ces deux outils vous permettent de télécharger gratuitement des thèmes pré-faits, le second ne propose que des thèmes faits avec bootstrap, ce qui est un gros plus si vous voulez les modifier facilement, mais le premier propose à mon sens des thèmes plus jolis et plus travaillés.

Les icônes

On ne vas pas s'attarder la dessus trop longtemps : utiliser Font Awesome. C'est simple, gratuit, hyper intuitif et très joliment dessiné. Cela va de paire avec bootstrap et ça vous évite de devoir trouver une icône différente pour chaque besoin de votre site.

Cependant, si vous recherchez une icône bien précise ou un pictogramme, https://www.iconfinder.com/ pourra vous aider !

Les photos et illustrations

Besoin d'illustrer votre contenu avec des photos de qualité et libre de droits ? Parfait, https://unsplash.com est fait pour vous ! Des milliers de photos libres de droits de toutes les couleurs, dans tous les styles et tous les domaines.

Vous avez plutôt besoin d'une illustration aux couleurs de votre site ? Alors https://undraw.co/illustrations aura ce qu'il vous faut ! Entièrement conçues en SVG, les illustrations du site UnDraw peuvent être colorée de la couleur de votre choix, hyper pratique pour une landing page par exemple.

Les e-mails

Vous avez besoin d'envoyer des emails stylés pour confirmer l'inscription de vos membres ou tout simplement pour envoyer une newsletter ? Si vous avez un peu d'expérience en développement web, vous savez à quel point le HTML et le CSS dans les emails ne font pas bon ménage. Aucun client email ne fonctionne pareil, et la plupart sont restés bloqués à des versions moyen-âgeuses de HTML/CSS.

Alors pour remédier à ce problème, il existe https://app.bootstrapemail.com/editor ! BootstrapEmail vous permet d'écrire votre template d'email en bootstrap, et de le récupérer "traduit" dans un vieux HTML4 tout caca, mais qui fonctionnera partout !

Les CMS

Bien qu'ils soient souvent critiqués, les systèmes de gestion de contenus ne sont pas pour autant à négliger quand il s'agit de bootstraper une idée. Ce blog par exemple tourne grâce à https://ghost.org/ (en auto-hébergé), mais vous pouvez très bien utiliser leur version SaaS si vous ne vous sentez pas l'âme d'un technicien.

Du côté des "anciens", il existe toujours WordPress ou Prestashop, bien que je les déconseille vivement vu leur aspect "usine à gaz" et le nombre de vulnérabilités incroyable auxquelles ils font face.

Pour une boutique en ligne par exemple, https://www.shopify.fr/ fait très bien le travail. Vous aurez l'assurance d'une boutique solide, qui passe à l'échelle et qui fait ce qu'on lui demande : vendre.

Les outils no-code

Le no-code, c'est un mouvement qui consiste à développer des sites, applis ou plateformes sans avoir à écrire de code, et les CMS SaaS Ghost ou Shopify cités plus haut en font partie.

Je ne suis pas partisan du 100% no-code car cela rend trop dépendant des outils que l'on utilise, mais certains sont diablement efficace. Par exemple, coder un système de prise de rendez-vous est un vrai calvaire. Heureusement il existe https://calendly.com/fr qui permet de prendre des rendez-vous gratuitement.

Si vous créer un site pour un évènement, vous pouvez gérer toute la billetterie avec https://www.eventbrite.fr/.

Les Google Forms sont également un très bon moyen de récupérer une liste de personnes intéressés par votre produit ou service sans avoir à coder tout un système d’inscription.

Le no-code n'est donc pas à négliger lorsque l'on veut Bootstraper une idée à travers un site web. On peut également créer des sites entiers en no-code, grâce par exemple à Wix ou Webflow.

L'hébergement

Ça y est, votre site est fin prêt ! Vous avez un beau design, de belles icônes, des photos à couper le souffle pour illustrer vos contenus et des e-mails qui claquent ! Maintenant, il faut l'héberger. Et ça, ce n'est pas une mince affaire. Vous pouvez construire vous-même un serveur capable d'accueillir votre site à partir d'un VPS Ubuntu, ou alors vous pouvez utiliser Plesk.

Plesk est un panel de gestion de sites web, hyper intuitif et simple d'utilisation. Bien évidemment, il ne s'agit pas de payer une Licence Plesk et de l'installer soi-même, mais je vous conseille vivement de choisir un hébergeur qui propose cette solution. C'est le cas de PulseHeberg qui propose Plesk comme panel de gestion sur ses offres web. Le certificat SSL est inclus et le domaine .fr est gratuit si vous prenez une formule annuelle, en plus d'être automatiquement lié à votre hébergement sans aucune action de votre part.

Le dépôt de code

Si vous avez décidé de partir sur une solution faites maison pour votre idée, il vous faudra un dépôt git pour entreposer votre code. De ce côté là aussi je ne me prend plus la tête : terminé Gitlab et autres solutions auto-hébergés, GitHub est désormais gratuit pour tous et offre un nombre illimité de dépôts public comme privé, et même les runners pour la partie CI/CD sont gratuits, avec à votre disposition une bibliothèque entière de "workflows" pré-construits vous permettant d'automatiser à peu près tout ce que vous voudrez dans votre projet.

Conclusion

C'est comme ça que je monte mes propres sites web et ceux de mes clients depuis plusieurs années maintenant. Cela permet cohérence, robustesse et harmonie là ou avant pour ma part, ne régner que le chaos.

j'espère que cette petite liste d'outils vous aura inspiré à vous lancer dans votre propre projet ! Et si tout cela est trop complexe pour vous, n'hésite pas à me contacter pour que je réalise pour vous votre site web !