Come distribuire siti Web statici gratuitamente con Surge.sh

0
183

Surge.sh è un host di siti web statici con cui interagisci dal riga di comando. Rende facile e veloce ottenere nuovi siti e app online, manualmente o come parte del processo di creazione della CI. Ecco come iniziare a utilizzare il servizio.

Prima esecuzione

Supponiamo che tu abbia già un directory dei file che si desidera distribuire sul Web. Se non lo hai fatto, crea una nuova cartella, aggiungi un index.html e alcuni semplici contenuti di partenza.

Surge’s binary è un'applicazione JavaScript distribuita tramite npm. Assicurati di aver installato Node.js sul tuo sistema prima di continuare. Inizia utilizzando npm per installare Surge:

npm install –global surge

Installare Surge globalmente significa che puoi usare il comando surge ovunque, anche se la tua directory di lavoro non ha un file package.json. L'omissione del flag –global aggiungerà invece il pacchetto come dipendenza del progetto, consentendoti di bloccare la versione Surge utilizzata per i singoli siti.

Ora cambia la directory nel repository del tuo sito web. Eseguire il comando surge per avviare il processo di distribuzione. Verrà visualizzata una serie di istruzioni interattive, a partire dal tuo indirizzo e-mail per configurare un account Surge.

Annuncio

Quindi, conferma il percorso del filesystem del tuo progetto. L'impostazione predefinita è la directory di lavoro, quindi di solito puoi premere Invio per continuare.

Il seguente messaggio richiede un nome di dominio. Viene selezionato automaticamente un sottodominio casuale .surge.sh. Puoi scegliere un sottodominio diverso, o uno dei tuoi domini, inserendolo qui. Se stai utilizzando il tuo dominio, le sezioni seguenti spiegano come completare la configurazione.

Dopo aver fornito un nome di dominio, premi Invio per iniziare la distribuzione. Lo stato di avanzamento verrà visualizzato nel tuo terminale mentre Surge CLI carica i tuoi file e li rende disponibili sul web. Visita il tuo dominio nel browser per vedere i tuoi contenuti dal vivo!

Gli aggiornamenti del sito vengono applicati eseguendo nuovamente il comando surge. I contenuti della directory del tuo progetto verranno sincronizzati con il tuo sito web live.

Tutto nella tua cartella viene caricato per impostazione predefinita. È possibile escludere percorsi specifici creando un file .surgeignore. Questo ha la stessa sintassi di .gitignore. I file e le cartelle comunemente creati da altri strumenti di sviluppo, come Git e npm, vengono omessi automaticamente.

Utilizzo del tuo nome di dominio

< p>Surge offre supporto per domini personalizzati tramite record CNAME. Questo non ha alcun costo aggiuntivo rispetto al servizio standard. Aggiungi un record CNAME nel pannello di controllo del tuo provider di dominio. Punta i nomi host @ e www su na-west1.surge.sh. Fornisci il tuo nome di dominio quando esegui Surge per implementare il tuo sito.

Pubblicità

Ti verrà richiesto il tuo dominio ogni volta che esegui il comando surge. Puoi evitarlo aggiungendo il flag –domain ai comandi surge. In alternativa, crea un file CNAME nella directory del tuo progetto. Scrivi il tuo nome di dominio in questo file.

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

Gestione dei reindirizzamenti HTTPS

Surge ha il supporto HTTPS automatico ma questo non gestisce i reindirizzamenti da HTTP a HTTPS per impostazione predefinita. Distribuisci esplicitamente nella variante https del tuo dominio per obbligare tutti i visitatori a utilizzare una connessione protetta. L'abilitazione dei reindirizzamenti è consigliabile per tutti i siti Web accessibili pubblicamente.

surge –domain https://example.com

Se utilizzi il tuo dominio, dovrai fornire un certificato SSL. Questa funzione è disponibile solo come parte del piano a pagamento Surge Plus.

Surge ti dà anche il controllo del dominio nudo ai reindirizzamenti www. Il comportamento predefinito vede www.example.com reindirizzare a example.com. Puoi invertire ciò includendo esplicitamente la parte www nel tuo dominio di distribuzione.

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

Configurazione del tuo sito

Surge offre diverse comode funzioni integrate che lo aiutano a distinguersi da altre piattaforme simili. Puoi aggiungere una pagina 404, protezione tramite password e supporto CORS, il tutto utilizzando file speciali nel tuo progetto.

La pagina 404 viene abilitata creando un file 404.html. Questo è tutto quello che c'è da fare – Surge servirà il file quando non esiste una corrispondenza diretta per l'URI richiesto.

Annuncio

La protezione tramite password è abilitata da un file AUTH. Questo accetta un semplice elenco di nomi utente e password.

cloudavvy:howtogeek

Ti verrà richiesto di inserire un nome utente e una password utilizzando l'autenticazione di base HTTP ogni volta che accedi al tuo sito. Questa funzione è disponibile solo con il piano Surge Plus a pagamento.

Un'altra funzione Surge Plus sono le regole di instradamento manuali. Puoi creare un file ROUTER per definire reindirizzamenti personalizzati, sia all'interno del tuo sito che all'esterno.

301 /pagina spostata /new-link

Surge supporta i codici di stato 301 (spostato in modo permanente) e 307 (spostato temporaneamente) per la prima colonna. L'ultima colonna può essere un collegamento relativo all'interno del tuo sito o un collegamento assoluto a un altro dominio (https://www.google.com).

Un file di configurazione finale è CORS. Ciò ti consente di consentire l'accesso multiorigine al tuo sito. Aggiungi un * al file per accettare richieste multiorigine da qualsiasi origine. Puoi invece scrivere singoli domini per limitare le origini consentite.

Automazione delle implementazioni di Surge

Surge è interamente controllato da file di testo e comandi da terminale. È facile da integrare nelle pipeline CI per distribuire i siti Web automaticamente a ogni commit.

Pubblicità

L'automazione di Surge richiede l'uso di token API. Ciò consente di evitare le richieste di accesso interattive. Innanzitutto, accedi a Surge sul tuo computer di sviluppo. Esegui il token Surge per ottenere il tuo token API.

Nella tua pipeline CI, imposta le variabili di ambiente SURGE_LOGIN e SURGE_TOKEN. Il primo dovrebbe essere il tuo indirizzo email mentre il secondo prende il tuo token API. Ora puoi eseguire il deployment in modo non interattivo utilizzando i flag –project e –domain:

surge –project $PWD –domain example.com

Riepilogo

Surge semplifica la pubblicazione di siti Web statici sul Web. Il servizio di base è gratuito. L'aggiornamento al piano Plus ti offre autenticazione, reindirizzamenti e HTTPS più configurabile.

A differenza di altri concorrenti, Surge è completamente guidato dal terminale. Ciò lo rende ideale per i siti rapidi incentrati sugli sviluppatori gestiti tramite repository Git e pipeline CI. Elimina la configurazione del server in modo che tu possa concentrarti sulla creazione del contenuto del tuo sito.

Per casi d'uso più avanzati, Surge ti consente persino di aggiungere più contributori. Esegui surge –add user@example.com per consentire ad amici, ospiti e colleghi di accedere al tuo sito. Saranno in grado di eseguire il deployment eseguendo surge e fornendo lo stesso nome di dominio che hai utilizzato.