hebergementsurgehtmltutoriel

Héberger votre site internet gratuitement avec Surge.

Il existe plusieurs solutions pour héberger votre site Internet gratuitement : surge, netlify...

Héberger votre site gratuitement avec Surge !

Surge est un service de déploiement et d’hébergement de sites Web et d’applications statiques. Vous pouvez l’utiliser pour héberger des projets construits avec des générateurs de sites statiques tels que Gatsby.js, Jekyll. Tout projet personnalisé construit avec HTML, CSS et JavaScript côté client fonctionnera également. Son plan gratuit est optimal pour pratiquement tous les sites statiques, et la configuration du service peut être effectuée en quelques frappes dans votre terminal de commande. Il existe une version premium qui ajoute des fonctionnalités supplémentaires telles que le SSL personnalisé, la protection par mot de passe, etc.

Pourquoi utiliser Surge ?

Surge est un outil très pratique avec lequel tout développeur web front devrait se familiariser. Il est incroyablement simple à utiliser et vous pouvez publier un site statique sur Internet littéralement en quelques secondes. Tout ce que la publication web nécessite, ce sont quelques commandes dans le terminal. Le plus intéressant est qu’aucun investissement n’est requis. Les utilisateurs peuvent également ajouter des domaines personnels à leurs projets, partager des projets avec d’autres utilisateurs et créer des pages d’erreur 404 pour diriger les clients vers d’autres pages Web.

Installation de Surge

L’installation de Surge et la création d’un compte sont extrêmement simples et intuitives. Il suffit d’ouvrir une nouvelle fenêtre de terminal et de taper la commande suivante :

npm install -global Surge

Remarque : cette étape suppose que Node et npm sont déjà installés sur votre système. Si ce n’est pas le cas, vous pouvez installer la dernière version des deux depuis le site officiel de Node.js.

Lors de votre première installation, Surge vous demandera de créer un compte. Les seules exigences sont de fournir une adresse e-mail et un mot de passe, et de vérifier votre e-mail par la suite. Une fois cette étape terminée, vous disposerez d’un compte Surge et serez prêt à déployer votre service.

Déploiement de votre site

Pour utiliser votre site statique dans Surge, trouvez d’abord le chemin d’accès au répertoire du projet que vous voulez mettre en œuvre.

Une fois que vous connaissez le chemin de fichier du répertoire à déployer, exécutez la commande suivante dans le terminal de commande :

surge

Votre nom d’utilisateur (c’est-à-dire votre adresse e-mail) s’affichera alors. Ensuite, il vous suffira de fournir le chemin du projet.

Saisissez le chemin complet du fichier, puis appuyez sur la touche Entrée.

Le programme Surge fournira automatiquement un nom de domaine en utilisant des mots aléatoires. Vous pouvez également créer un domaine personnalisé s’il n’est pas déjà pris. Entrez le nom de domaine que vous avez choisi, puis appuyez sur Entrée.

Remarque : si le nom de domaine personnalisé que vous avez saisi est déjà pris, vous verrez apparaître un message d’erreur :

Aborted - vous n’avez pas la permission de publier sur [<domaine-personnalisé.surge.sh>].

Une fois le déploiement terminé, vous verrez un message de réussite s’afficher dans votre terminal. Le nom de domaine et l’adresse IP du projet vous indiqueront où vous pouvez accéder au déploiement en direct.

Entrez le nom de domaine dans votre navigateur Web, et vous devriez maintenant voir votre site en ligne.

Comme indiqué ci-dessus, l’utilisation de Surge est gratuite. Cependant, il existe une version professionnelle de Surge qui offre plus d’avantages aux utilisateurs qui sont prêts à investir des frais supplémentaires. Cette version premium du service commence à 30$ par mois. Plus précisément, avec ce supplément, vous pouvez créer un nombre illimité de projets professionnels, disposer d’un SSL personnalisé et d’un site Web sécurisé avec https. En outre, vous pouvez partager des ressources, développer des redirections au sein de votre site et protéger vos projets par des mots de passe.

Si vous envisagez simplement de publier des fichiers sources pour créer un site Web personnel ou à petite échelle, alors le plan gratuit devrait suffire. Cependant, pour tous ceux qui dépendent régulièrement de Surge pour publier des projets, Surge Premium peut être considéré comme une option judicieuse.

Ajouter un nom de domaine personnalisé

Utilisation d’un enregistrement CNAME

Par défaut, Surge fournit un sous-domaine personnalisé pour tout site Web que vous déployez sur son service. Il ressemblera à votre-domaine-personnalisé.surge.sh. Vous pouvez personnaliser et sélectionner le sous-domaine (à condition qu’il ne soit pas déjà pris). Cependant, il est fort probable que vous souhaitiez utiliser votre propre domaine personnalisé pour tout projet professionnel.

Pour ce faire, vous devrez ajouter deux nouveaux enregistrements CNAME dans le panneau DNS de votre fournisseur de domaine. L’un d’eux portera le nom d’hôte @ et l’autre le nom d’hôte www. Les deux enregistrements CNAME pointeront vers l’adresse IP suivante : na-west1.surge.sh

Github vs Surge

Comme Surge, un autre service d’hébergement statique alternatif populaire est Github Pages. Ce service gratuit permet aux utilisateurs d’héberger leurs projets personnels de sites statiques dans un dépôt Github. Github Pages jouit d’une réputation extrêmement bien établie parmi les développeurs web de tout calibre comme l’un des services d’hébergement statique les mieux classés. Il est possible de créer deux types de pages : des pages de projet ou des pages d’utilisateur et d’organisation, qui peuvent être créées sous le domaine github.io. Bien entendu, vous avez également la possibilité d’utiliser un domaine personnalisé. Github recommande explicitement de ne pas publier de projets destinés à des fins commerciales en utilisant son service d’hébergement. Par conséquent, bien qu’elles ne puissent pas accueillir des sites Web de grande envergure, les pages Github sont parfaites pour les utilisations non commerciales ou personnelles.

Les avantages de Surge

Bien que Github Pages soit sans aucun doute un outil puissant, Surge offre certains avantages que même Github Pages ne possède pas. L’un de ces avantages est le routing côté client. Dans votre projet Surge, vous pouvez rediriger les clients vers un fichier HTML “de secours” (200.html) s’ils demandent un chemin inexistant. Ceci est bénéfique car plutôt que d’afficher une erreur 404 alarmante, Surge servira simplement le fichier de repli.

Un autre avantage notable de Surge est que les utilisateurs peuvent déployer tout nouveau changement sur leur site en quelques secondes. Comme indiqué plus haut, il suffit de taper la commande surge dans le terminal de commande pour que toutes les modifications apportées soient instantanément visibles en ligne. Particulièrement utile lors des tests-expérimentations, les simples modifications apportées aux sites Web des utilisateurs sont plus faciles à gérer. Grâce à l’option de rafraîchissement immédiat de la page Web, les modifications sont plus visibles dans le navigateur Web. Par contre, les utilisateurs de la page Github continueront à pousser et à valider les modifications vers leurs interfaces en ligne et à se battre avec des processus plus longs et plus fastidieux. À long terme, le bon site statique évite aux développeurs de logiciels de perdre du temps.