Gratis statische websites implementeren met Surge.sh

0
70

Surge.sh is een gratis statische website-host waarmee u vanaf uw opdrachtregel. Het maakt het snel en gemakkelijk om nieuwe sites en apps online te krijgen, handmatig of als onderdeel van uw CI-buildproces. Hier leest u hoe u aan de slag kunt gaan met de service.

Eerste uitvoering

We gaan ervan uit dat u al een map met bestanden die u op internet wilt implementeren. Als je dat nog niet hebt gedaan, maak dan een nieuwe map, voeg een index.html en wat eenvoudige startersinhoud toe.

Surge's binary is een JavaScript-toepassing die wordt gedistribueerd via npm. Zorg ervoor dat Node.js op uw systeem is geïnstalleerd voordat u doorgaat. Begin met het gebruik van npm om Surge te installeren:

npm install –global surge

Als u Surge globaal installeert, kunt u het surge-commando overal gebruiken, zelfs als uw werkdirectory geen package.json-bestand bevat. Als u de vlag –global weglaat, wordt het pakket in plaats daarvan als projectafhankelijkheid toegevoegd, zodat u de Surge-versie kunt vergrendelen die voor afzonderlijke sites wordt gebruikt.

Verander nu de map in de repository van uw website. Voer de surge-opdracht uit om het implementatieproces te starten. Er wordt een reeks interactieve prompts weergegeven, te beginnen met uw e-mailadres om een ​​Surge-account in te stellen.

Advertentie

Bevestig vervolgens het bestandssysteempad naar uw project. Dit is standaard uw werkdirectory, dus u kunt meestal op Return drukken om door te gaan.

De volgende prompt vraagt ​​om een ​​domeinnaam. Er wordt automatisch een willekeurig .surge.sh-subdomein geselecteerd. U kunt een ander subdomein kiezen, of een van uw eigen domeinen, door dit hier in te voeren. Als u uw eigen domein gebruikt, wordt in de volgende secties uitgelegd hoe u het kunt instellen.

Nadat u een domeinnaam heeft opgegeven, drukt u op enter om de implementatie te starten. De voortgang wordt in uw terminal weergegeven terwijl de Surge CLI uw bestanden uploadt en beschikbaar maakt op internet. Bezoek uw domein in uw browser om uw inhoud live te zien!

Site-updates worden toegepast door de surge-opdracht opnieuw uit te voeren. De inhoud van uw projectdirectory wordt gesynchroniseerd met uw live website.

Alles in uw map wordt standaard geüpload. U kunt specifieke paden uitsluiten door een .surgeignore-bestand te maken. Dit heeft dezelfde syntaxis als .gitignore. Bestanden en mappen die gewoonlijk worden gemaakt door andere ontwikkelaarstools, zoals Git en npm, worden automatisch weggelaten.

Uw eigen domeinnaam gebruiken

< p>Surge biedt aangepaste domeinondersteuning via CNAME-records. Dit komt zonder extra kosten ten opzichte van de standaard service. Voeg een CNAME-record toe in het configuratiescherm van uw domeinprovider. Wijs de @ en www hostnamen naar na-west1.surge.sh. Geef uw domeinnaam op wanneer u surge gebruikt om uw site te implementeren.

Advertentie

Elke keer dat u de surge-opdracht uitvoert, wordt u om uw domein gevraagd. U kunt dit voorkomen door de –domain vlag toe te voegen aan surge-commando's. U kunt ook een CNAME-bestand maken in uw projectdirectory. Schrijf uw domeinnaam in dit bestand.

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

HTTPS-omleidingen beheren

Surge heeft automatische HTTPS-ondersteuning, maar dit verwerkt standaard geen HTTP-naar-HTTPS-omleidingen. Implementeer expliciet naar de https-variant van uw domein om alle bezoekers te dwingen een beveiligde verbinding te gebruiken. Het inschakelen van omleidingen is aan te raden voor alle openbaar toegankelijke websites.

surge –domain https://example.com

U moet een SSL-certificaat verstrekken als u uw eigen domein gebruikt. Deze functie is alleen beschikbaar als onderdeel van het betaalde Surge Plus-abonnement.

Surge geeft je ook controle over kale domein naar www omleidingen. Het standaardgedrag is dat www.example.com doorverwijst naar example.com. U kunt dit ongedaan maken door expliciet het www-gedeelte in uw implementatiedomein op te nemen.

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

Uw site configureren

Surge biedt verschillende ingebouwde gemaksfuncties waarmee het zich onderscheidt van andere vergelijkbare platforms. U kunt een 404-pagina, wachtwoordbeveiliging en CORS-ondersteuning toevoegen, allemaal met behulp van speciale bestanden in uw project.

De 404-pagina wordt ingeschakeld door een 404.html-bestand te maken. Dat is alles wat er is – Surge levert het bestand wanneer er geen directe overeenkomst is voor de gevraagde URI.

Advertentie

Wachtwoordbeveiliging wordt ingeschakeld door een AUTH-bestand. Dit accepteert een eenvoudige lijst met gebruikersnamen en wachtwoorden.

cloudsavvy:howtogeek

U wordt gevraagd om een ​​gebruikersnaam en wachtwoord in te voeren met behulp van HTTP Basic Authentication elke keer dat u uw site bezoekt. Deze functie is alleen beschikbaar op het betaalde Surge Plus-abonnement.

Een andere Surge Plus-functie zijn handmatige routeringsregels. U kunt een ROUTER-bestand maken om aangepaste omleidingen te definiëren, zowel binnen uw site als extern.

301 /moved-page /new-link

Surge ondersteunt 301 (permanent verplaatst) en 307 (tijdelijk verplaatst) statuscodes voor de eerste kolom. De laatste kolom kan een relatieve link binnen uw site zijn, of een absolute link naar een ander domein (https://www.google.com).

Een laatste configuratiebestand is CORS. Hiermee kunt u cross-origin toegang tot uw site toestaan. Voeg een * toe aan het bestand om cross-origin-verzoeken van elke oorsprong te accepteren. U kunt in plaats daarvan individuele domeinen schrijven om de toegestane oorsprong te beperken.

Surge-implementaties automatiseren

Surge wordt volledig beheerd door tekstbestanden en terminalopdrachten. Het is eenvoudig te integreren in CI-pipelines om websites automatisch te implementeren bij elke commit.

Advertentie

Het automatiseren van Surge vereist het gebruik van API-tokens. Hiermee kunt u de interactieve aanmeldingsprompts vermijden. Log eerst in op Surge op uw ontwikkelmachine. Voer een surge-token uit om uw API-token te krijgen.

Stel in uw CI-pijplijn de omgevingsvariabelen SURGE_LOGIN en SURGE_TOKEN in. De eerste moet uw e-mailadres zijn, terwijl de laatste uw API-token gebruikt. Nu kunt u niet-interactief implementeren met behulp van de vlaggen –project en –domain:

surge –project $PWD –domain example.com

Samenvatting

Surge maakt het eenvoudig om statische websites live op internet te krijgen. De basisdienst is gratis te gebruiken. Upgraden naar het Plus-abonnement geeft je authenticatie, omleidingen en meer configureerbare HTTPS.

In tegenstelling tot andere concurrenten, is Surge volledig terminalgestuurd. Dit maakt het ideaal voor snelle, op ontwikkelaars gerichte sites die worden beheerd via Git-repositories en CI-pipelines. Het schakelt de serverconfiguratie uit, zodat u zich kunt concentreren op het bouwen van de inhoud van uw site.

Voor meer geavanceerde gebruikssituaties kunt u met Surge zelfs meerdere bijdragers toevoegen. Voer surge –add user@example.com uit om vrienden, gasten en collega's toegang te geven tot uw site. Ze kunnen worden geïmplementeerd door surge uit te voeren en dezelfde domeinnaam te leveren die u hebt gebruikt.