Comment déployer des sites Web statiques gratuitement avec Surge.sh

0
217

Surge.sh est un hébergeur de site Web statique gratuit avec lequel vous interagissez depuis votre ligne de commande. Il permet de mettre en ligne rapidement et facilement de nouveaux sites et applications, soit manuellement, soit dans le cadre de votre processus de création de CI. Voici comment commencer à utiliser le service.

Première exécution

Nous supposerons que vous avez déjà un répertoire des fichiers que vous souhaitez déployer sur le Web. Si vous ne l'avez pas fait, créez un nouveau dossier, ajoutez un index.html et du contenu de démarrage simple.

Le binaire de Surge est une application JavaScript distribuée via npm. Assurez-vous que Node.js est installé sur votre système avant de continuer. Commencez par utiliser npm pour installer Surge :

npm install –global surge

L'installation de Surge à l'échelle mondiale signifie que vous pouvez utiliser la commande surge n'importe où, même si votre répertoire de travail ne contient pas de fichier package.json. L'omission de l'indicateur –global ajoutera le package en tant que dépendance du projet à la place, vous permettant de verrouiller la version de Surge utilisée pour les sites individuels.

Modifiez maintenant le répertoire dans le référentiel de votre site Web. Exécutez la commande surge pour démarrer le processus de déploiement. Une série d'invites interactives s'afficheront, en commençant par votre adresse e-mail pour configurer un compte Surge.

Publicité

Ensuite, confirmez le chemin du système de fichiers vers votre projet. Il s'agit par défaut de votre répertoire de travail, vous pouvez donc généralement appuyer sur retour pour continuer.

L'invite suivante demande un nom de domaine. Un sous-domaine .surge.sh aléatoire est sélectionné automatiquement. Vous pouvez choisir un sous-domaine différent, ou l'un de vos propres domaines, en le saisissant ici. Si vous utilisez votre propre domaine, les sections suivantes expliquent comment terminer sa configuration.

Après avoir fourni un nom de domaine, appuyez sur Entrée pour commencer le déploiement. La progression sera affichée dans votre terminal au fur et à mesure que la CLI de Surge télécharge vos fichiers et les rend disponibles sur le Web. Visitez votre domaine dans votre navigateur pour voir votre contenu en direct !

Les mises à jour du site sont appliquées en exécutant à nouveau la commande surge. Le contenu de votre répertoire de projet sera synchronisé avec votre site Web en direct.

Tout dans votre dossier est téléchargé par défaut. Vous pouvez exclure des chemins spécifiques en créant un fichier .surgeignore. Cela a la même syntaxe que .gitignore. Les fichiers et dossiers couramment créés par d'autres outils de développement, tels que Git et npm, sont automatiquement omis.

Utilisation de votre propre nom de domaine

< p>Surge offre un support de domaine personnalisé via les enregistrements CNAME. Ceci est sans frais supplémentaires par rapport au service standard. Ajoutez un enregistrement CNAME dans le panneau de configuration de votre fournisseur de domaine. Pointez les noms d'hôte @ et www vers na-west1.surge.sh. Fournissez votre nom de domaine lors de l'exécution de Surge pour déployer votre site.

Publicité

Vous serez invité à indiquer votre domaine à chaque fois que vous exécuterez la commande surge. Vous pouvez éviter cela en ajoutant l'indicateur –domain aux commandes de surtension. Vous pouvez également créer un fichier CNAME dans votre répertoire de projet. Écrivez votre nom de domaine dans ce fichier.

surge –domain example.com echo “example.com” > CNAME

Gestion des redirections HTTPS

Surge prend en charge HTTPS automatique, mais cela ne gère pas les redirections HTTP vers HTTPS par défaut. Déployez explicitement sur la variante https de votre domaine pour forcer tous les visiteurs à utiliser une connexion sécurisée. L'activation des redirections est recommandée pour tous les sites Web accessibles au public.

surge –domain https://example.com

Vous devrez fournir un certificat SSL si vous utilisez votre propre domaine. Cette fonctionnalité n'est disponible que dans le cadre du plan payant Surge Plus.

Surge vous donne également le contrôle du domaine nu vers les redirections www. Le comportement par défaut voit www.example.com rediriger vers example.com. Vous pouvez inverser cette tendance en incluant explicitement la partie www dans votre domaine de déploiement.

surge –domain https://www.example.com

Configuration de votre site

Surge propose plusieurs fonctions de commodité intégrées qui l'aident à se démarquer des autres plates-formes similaires. Vous pouvez ajouter une page 404, une protection par mot de passe et la prise en charge de CORS, le tout en utilisant des fichiers spéciaux dans votre projet.

La page 404 est activée en créant un fichier 404.html. C'est tout ce qu'il y a à faire – Surge servira le fichier lorsqu'il n'y a pas de correspondance directe pour l'URI demandé.

Publicité

La protection par mot de passe est activée par un fichier AUTH. Celui-ci accepte une simple liste de noms d'utilisateur et de mots de passe.

cloudsavvy:howtogeek

Vous serez invité à saisir un nom d'utilisateur et un mot de passe à l'aide de l'authentification de base HTTP chaque fois que vous accéderez à votre site. Cette fonctionnalité n'est disponible que sur le plan payant Surge Plus.

Une autre fonctionnalité Surge Plus est les règles de routage manuelles. Vous pouvez créer un fichier ROUTER pour définir des redirections personnalisées, au sein de votre site ou en externe.

301 /moved-page /new-link

Surge prend en charge les codes d'état 301 (déplacé définitivement) et 307 (déplacé temporairement) pour la première colonne. La dernière colonne peut être un lien relatif au sein de votre site ou un lien absolu vers un autre domaine (https://www.google.com).

Un fichier de configuration final est CORS. Cela vous permet d'autoriser l'accès cross-origin à votre site. Ajoutez un * au fichier pour accepter les demandes d'origine croisée de n'importe quelle origine. Vous pouvez écrire des domaines individuels à la place pour limiter les origines autorisées.

Automatisation des déploiements de Surge

Surge est entièrement contrôlé par des fichiers texte et des commandes de terminal. Il est facile de l'intégrer aux pipelines CI pour déployer des sites Web automatiquement à chaque validation.

Publicité

L'automatisation de Surge nécessite l'utilisation de jetons d'API. Cela vous permet d'éviter les invites de connexion interactives. Tout d'abord, connectez-vous à Surge sur votre machine de développement. Exécutez le jeton de surtension pour obtenir votre jeton API.

Dans votre pipeline CI, définissez les variables d'environnement SURGE_LOGIN et SURGE_TOKEN. Le premier doit être votre adresse e-mail tandis que le second prend votre jeton API. Vous pouvez désormais déployer de manière non interactive à l'aide des indicateurs –project et –domain :

surge –project $PWD –domain example.com

Résumé

Surge simplifie la mise en ligne de sites Web statiques sur le Web. Le service de base est gratuit. La mise à niveau vers le plan Plus vous offre une authentification, des redirections et un HTTPS plus configurable.

Contrairement à d'autres concurrents, Surge est entièrement piloté par un terminal. Cela le rend idéal pour les sites rapides centrés sur les développeurs gérés via des référentiels Git et des pipelines CI. Il supprime la configuration du serveur afin que vous puissiez vous concentrer sur la création du contenu de votre site.

Pour des cas d'utilisation plus avancés, Surge vous permet même d'ajouter plusieurs contributeurs. Exécutez surge –add user@example.com pour permettre à vos amis, invités et collègues d'accéder à votre site. Ils pourront se déployer en exécutant Surge et en fournissant le même nom de domaine que vous avez utilisé.