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

Surge.sh est un hébergeur de site Web statique gratuit avec lequel vous interagissez à partir de votre ligne de commande. Il permet de mettre en ligne rapidement et facilement de nouveaux sites et applications, que ce soit manuellement ou 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 de fichiers que vous souhaitez déployer sur le Web. Si ce n’est pas le cas, 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 le surge n’importe où, même si votre répertoire de travail n’a pas de package.json déposer. En omettant le --global flag ajoutera le package en tant que dépendance du projet à la place, vous permettant de verrouiller la version Surge utilisée pour les sites individuels.

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

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 hasard .surge.sh le sous-domaine 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 s’affichera 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 le surge commande à nouveau. 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 .surgeignore déposer. 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.

Utiliser votre propre nom de domaine

Surge offre un support de domaine personnalisé via CNAME enregistrements. Ceci est sans frais supplémentaires par rapport au service standard. Ajouter un CNAME enregistrer dans le panneau de configuration de votre fournisseur de domaine. Pointez le @ et www noms d’hôtes à na-west1.surge.sh. Fournissez votre nom de domaine lors de l’exécution surge pour déployer votre site.

Vous serez invité à indiquer votre domaine chaque fois que vous exécuterez le surge commander. Vous pouvez éviter cela en ajoutant le --domain drapeau à surge commandes. Sinon, créez un CNAME fichier 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 a une prise en charge HTTPS automatique, mais cela ne gère pas les redirections HTTP vers HTTPS par défaut. Déployer explicitement sur le https variante de votre domaine pour forcer tous les visiteurs à utiliser une connexion sécurisée. L’activation des redirections est conseillé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 pour www redirige. Le comportement par défaut voit www.example.com rediriger vers example.com. Vous pouvez inverser cela en incluant explicitement le www partie dans votre domaine de déploiement.

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

Configuration de votre site

Surge offre 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 une prise en charge CORS, le tout en utilisant des fichiers spéciaux dans votre projet.

La page 404 est activée en créant un 404.html déposer. 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é.

La protection par mot de passe est activée par un AUTH déposer. Cela 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.

Les règles de routage manuelles constituent une autre fonctionnalité de Surge Plus. Vous pouvez créer un ROUTER pour définir des redirections personnalisées, soit au sein de votre site, soit en externe.

301 /moved-page /new-link

Prise en charge des surtensions 301 (déménagé définitivement) et 307 (déplacé temporairement) codes d’état 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. Ajouter 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.

Automatiser les déploiements de surtension

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

L’automatisation de Surge nécessite l’utilisation de jetons API. Cela vous permet d’éviter les invites de connexion interactives. Tout d’abord, connectez-vous à Surge sur votre machine de développement. Cours surge token pour obtenir votre jeton API.

Dans votre pipeline CI, définissez le SURGE_LOGIN et SURGE_TOKEN Variables d’environnement. 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 de la --project et --domain drapeaux :

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 le 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 les cas d’utilisation plus avancés, Surge vous permet même d’ajouter plusieurs contributeurs. Cours 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é.