Utilizzo di Surge per la distribuzione di siti statici: una guida completa

Nella distribuzione di siti Web statici, gli sviluppatori di app Web cercano sempre gli strumenti più recenti ed efficienti per migliorare i propri siti Web. In generale, uno Static Site Generator (SSG) improvvisa con operazioni codificate a mano e un CMS completo. Questa configurazione è perfetta per la maggior parte dei siti Web o progetti di applicazioni Web, non elaborati lato server. A causa della tendenza, gli sviluppatori stanno passando al programma webtask.io per gestire i loro diversi endpoint del server. Insieme a una tendenza significativa per lo sviluppo di app Web, questo articolo approfondisce i processi che gli sviluppatori subiscono per la crescita dei loro siti statici e serverless applicazioni web.

Cosa sono i generatori di siti statici?

In dettaglio, gli sviluppatori che utilizzano State Site Generator avviano il processo generando un sito Web solo HTML. Essendo solo HTML, il sito funziona principalmente con dati e modelli grezzi. Come accennato, i dati grezzi sono anche classificati come "file markdown". Per una migliore comprensione, i file markdown (Link: https://guides.github.com/features/mastering-markdown/) sono file di testo generici che utilizzano dialetti del linguaggio markdown. La formattazione del testo normale contiene simboli di testo per la creazione di formati con testi inclusi grassetto, corsivo, rientro, intestazioni e display.

A differenza dei siti Web dinamici, questi file non richiedono relativamente alcuna conoscenza di programmazione e sono il tipo più semplice di sito Web da creare. Pertanto, ogni pagina Web del sito ha il proprio file HTML con contenuto del sito Web fisso che viene visualizzato allo stesso modo per qualsiasi utente su qualsiasi piattaforma. Il risultato è una build che viene trasferita al tuo server live.

Siti statici contro siti dinamici

A confronto, siti web statici sono basati su codice HTML e CSS lato client. Quando un client richiede da un sito Web di un server statico, i file HTML vengono ordinatamente impacchettati in un sito che può essere immediatamente visualizzato sui dispositivi degli ospiti. Alcuni popolari generatori di siti statici includono Jekyll, supportato da Github Pages, e Avanti. Al contrario, i siti Web dinamici si basano su linguaggi di scripting lato client e lato server. Per quanto riguarda alcuni esempi, JavaScript (link: https://www.javascript.com), PHP (link: https://www.php.net) e ASP (link: https://www.w3schools.com/ asp/webpages_intro.asp) è uno script "lato server dinamico". Come spiegazione, l'esecuzione con un server dinamico HTTP invia file al browser. Allo stesso tempo, il generatore crea un nuovo file HTML ogni volta che l'utente finale chiama una pagina.

Cos'è Surge?

Surge è un servizio per la distribuzione e l'hosting di siti Web e applicazioni statici. Puoi usarlo per ospitare progetti creati con generatori di siti statici come Gatsby.js, Jekyll. Funzionerà anche qualsiasi progetto personalizzato creato con HTML, CSS e JavaScript lato client. Il suo piano gratuito è ottimale per quasi tutti i siti statici e la configurazione del servizio può essere eseguita con pochi tasti nella riga di comando. È disponibile una versione premium che aggiunge alcune funzionalità aggiuntive come SSL personalizzato, protezione con password e altro.

Perché dovrei usare Surge?

Surge è uno strumento estremamente conveniente che qualsiasi sviluppatore web front-end dovrebbe utilizzare. È incredibilmente semplice e puoi pubblicare un sito statico online in pochi secondi. Tutto ciò che richiede la pubblicazione sul Web sono alcuni comandi nella riga di comando e la parte migliore è che non è richiesto alcun investimento. Inoltre, gli utenti possono aggiungere domini personali ai propri progetti, condividere progetti con altri utenti e creare pagine di errore 404 per indirizzare i clienti ad altre pagine web. Surge ha alcuni vantaggi unici che mancano ad altri popolari distributori di siti statici (vedi "Confronto tra Surge e Github Pages").

Surge è un servizio gratuito?

Come implicito in precedenza, Surge non richiede alcun costo per l'utilizzo. Tuttavia, esiste un Surge Professional che offre maggiori vantaggi per gli utenti che sono disposti a investire le commissioni extra. Questa versione premium del servizio inizia a $ 30 al mese. In particolare, con il costo aggiuntivo, puoi creare progetti professionali illimitati, avere un SSL personalizzato e avere un sito web sicuro con HTTPS. Inoltre, puoi condividere risorse, sviluppare reindirizzamenti all'interno del tuo sito e proteggere i tuoi progetti con password.

Il piano gratuito dovrebbe essere sufficiente se pubblichi file di origine per creare un sito Web su piccola scala o personale. Tuttavia, per chiunque dipenda regolarmente da Surge per progetti editoriali, anche Surge Premium è un'opzione saggia.

Installazione di Surge

Installare Surge e configurare un account è estremamente semplice e intuitivo. Apri una nuova finestra di terminale e digita il seguente comando:

installazione npm – Surge globale

(Nota: questo passaggio presuppone che Node e npm siano già installati sul tuo sistema. In caso contrario, puoi installare l'ultima versione di entrambi dal sito ufficiale Sito web Node.js.)

Per verificare se Node.js.website è installato correttamente, vai alla riga di comando e inserisci 'node -v' per lo stato.

Alla prima configurazione, Surge ti chiederà di creare un account. Gli unici requisiti sono fornire un indirizzo e-mail e una password e successivamente verificare la tua e-mail. Dopo aver completato questo passaggio, sarai configurato con un account Surge e pronto per l'implementazione nel loro servizio.

Distribuire il tuo sito

Per utilizzare il tuo sito Web statico per Surge, trova innanzitutto il percorso del file della directory del progetto che desideri implementare. Ad esempio, implementerò un progetto situato in /Users/air/surge-test.

Una volta che conosci il percorso del file della directory da distribuire, esegui il seguente comando in una finestra di terminale:

ondata

Verrà quindi visualizzato il tuo nome utente (ovvero l'indirizzo e-mail). Successivamente, dovrai fornire il percorso del file per il progetto:

Inserisci il percorso completo del file, quindi premi invio.

Il programma Surge fornirà automaticamente un nome di dominio utilizzando parole casuali. Puoi anche creare qualsiasi dominio personalizzato se non è già stato utilizzato. Inserisci il nome di dominio scelto, quindi premi invio.

(Nota: vedrai un messaggio di errore se il nome di dominio personalizzato che hai inserito è già in uso.
Interrotto: non puoi pubblicare su [ ]

Una volta completata la distribuzione, vedrai un messaggio di successo visualizzato nel tuo terminale. Il nome di dominio e l'indirizzo IP del progetto ti mostreranno dove puoi accedere alla distribuzione live.

Inserisci il nome di dominio nel tuo browser web e ora dovresti vedere il tuo sito dal vivo:

Aggiunta di un nome di dominio personalizzato

Utilizzo di un record CNAME

Per impostazione predefinita, Surge fornirà un sottodominio personalizzato per qualsiasi sito Web distribuito al loro servizio. Sembrerà qualcosa di simile a your-custom-domain.surge.sh. Puoi personalizzare e selezionare qual è il sottodominio (a condizione che non sia già stato preso). Ti consigliamo di utilizzare il tuo dominio personalizzato per qualsiasi progetto professionale.

Per fare ciò, ti consigliamo di aggiungere due nuovi record CNAME nel pannello DNS del tuo provider di dominio. Uno avrà un nome host @ e l'altro avrà un nome host www. Entrambi i record CNAME punteranno al seguente indirizzo IP:

na-west1.surge.sh

Utilizzando un record A

Se, per qualche motivo, il tuo provider di dominio non consente i record CNAME, puoi impostare un record A in alternativa. Fare in modo che il record A punti a un indirizzo IP di 45.55.110.124.

Utilizzo di sottodomini personalizzati

Puoi anche utilizzare qualsiasi sottodominio personalizzato per puntare a Surge, ad esempio sub.my-cool-site.com. Ti consigliamo di impostare un nuovo record CNAME per farlo. Questo dovrebbe portare allo stesso indirizzo IP na-west1.surge.sh sopra, ma questa volta il nome host sarà *. Il nome host * è un carattere jolly. Qualsiasi sottodominio diverso dal dominio principale sarà valido e consentito.

Il programma surge riconoscerà immediatamente queste modifiche al DNS. Può volerci del tempo per propagarsi altrove; tuttavia, in genere, non sono necessarie più di 24-48 ore.

Distribuzione di progetti utilizzando domini personalizzati

Una volta che le impostazioni DNS hanno avuto effetto, puoi distribuire il tuo progetto. Dovrai indicare il dominio che desideri utilizzare. Per fare ciò, esegui il comando surge nel tuo terminale. Indica prima il percorso del file del tuo progetto, quindi il dominio personalizzato in seguito, in questo modo:

surge percorso file/del/progetto a-cool-custom-domain.com

Associa domini personalizzati ai progetti

Puoi associare il tuo dominio al progetto, in modo da non doverlo inserire ogni volta che esegui la distribuzione. Puoi farlo usando il comando echo, indirizzandolo a un file CNAME, in questo modo:

echo a-cool-custom-domain.com > CNAME

Condividere il tuo progetto Surge

Per concedere ad altri utenti di Surge l'autorizzazione alla pubblicazione, devi prima pubblicare il tuo progetto. Quindi, digita il comando add nella riga di comando per aggiungere collaboratori tramite i loro indirizzi email.

impennata –aggiungi collaboratore@email.com

Gli ospiti invitati al tuo progetto e che accettano ora il tuo invito possono pubblicare i propri file di origine nello stesso dominio.

Elenco dei progetti Surge

Per visualizzare i progetti che hai pubblicato utilizzando Surge, digita questo semplice comando Surge nella riga di comando. Questo genererà un elenco di tutti i tuoi progetti.

elenco di sovratensioni

Aggiunta di pagine di errore 404 personalizzate

Se preferisci sostituire la pagina di errore 404 predefinita con una personalizzata, tutto ciò che devi fare è aggiungere un file 404.html al tuo progetto Surge quando sei pronto per distribuire i nuovi file 404, basta comandare surge.

Crea un file .surgeignore

Come il file .gitignore nell'ecosistema Git, Surge offre il proprio file ignore. Puoi impostare un elenco di file e directory che Surge eliminerà al momento della distribuzione e questo è utile per tralasciare file che potrebbero essere rilevanti solo durante il processo di sviluppo. Tutto ciò che puoi mantenere completamente privato è anche utile da includere qui.

Per configurarlo, crea un nuovo file chiamato .surgeignore nella radice della cartella del tuo progetto. Puoi elencare tutti i file e le directory che desideri ignorare in questo file. Alcuni esempi comuni includono node_modules, bower_components e altri. Puoi anche ignorare tipi di file specifici che non sono rilevanti per la versione di produzione di un sito. L'aggiunta di * (il simbolo jolly) prima dell'estensione (ad es. *.swp, *.psd, ecc.) consentirà di ottenere questo risultato.

Rimuovere il sito da Surge

Se, per qualche motivo, desideri rimuovere il tuo sito Web, puoi farlo facilmente con il comando Surge teardown, seguito dal dominio del tuo progetto.

smontaggio dell'ondata tuo-dominio.com

Prima di tentare di rimuovere il progetto, assicurati che la tua versione di Surge sia aggiornata all'ultima versione.

Confronto tra pagine Surge e Github

Simile a Surge, un altro popolare servizio di hosting statico alternativo è Pagine GitHub. Questo servizio gratuito consente agli utenti di ospitare i propri progetti di siti statici personali in un repository Github. Github Pages vanta una reputazione estremamente nota tra gli sviluppatori Web di qualsiasi calibro come uno dei servizi di hosting statico di più alto livello. È possibile creare due tipi di pagine, "Pagine di progetto o Pagine utente e organizzazione", che possono essere create sotto il dominio github.io. Naturalmente, hai anche la libertà di utilizzare un dominio personalizzato. Github raccomanda esplicitamente che qualsiasi progetto destinato a scopi commerciali non debba essere pubblicato utilizzando il proprio servizio di hosting. Pertanto, sebbene potrebbe non essere in grado di ospitare siti Web su larga scala, le pagine Github sono perfette per usi non commerciali o personali.

Ci sono lievi variazioni tra le pagine del progetto e le pagine dell'utente e dell'organizzazione. Le pagine del progetto possono essere pubblicate da più posizioni di origine, inclusi i rami master e "GH-pages". Senza un dominio personalizzato, il dominio di pubblicazione predefinito sarebbe https:// .github.io/. D'altra parte, le pagine Utente e Organizzazione si trovano nel ramo principale sotto il tuo repository Github. Hanno pubblicato con il dominio https:// .github.io.

Vantaggi di Surge

Mentre Github Pages è senza dubbio uno strumento potente, Surge offre alcuni vantaggi che mancano anche a Github Pages. Uno di questi vantaggi è il routing lato client. All'interno del tuo progetto Surge, puoi reindirizzare i client a un file HTML di "backup" (200.html) se richiedono un percorso inesistente. Questo è vantaggioso perché Surge servirà il file di fallback invece di visualizzare un allarmante errore 404.

Un altro notevole vantaggio di Surge è che gli utenti possono distribuire qualsiasi nuova modifica al proprio sito in pochi secondi. Come affermato sopra, semplicemente digitando il comando surge nella riga di comando, qualsiasi modifica apportata può essere immediatamente visualizzata online. Particolarmente utili durante la sperimentazione di test, le semplici modifiche ai siti Web degli utenti sono più facili da gestire. A causa dell'opzione per aggiornare immediatamente la pagina web, vedere le modifiche nel browser web è più evidente. In alternativa, gli utenti di Github Page continueranno a spingere e confermare le modifiche alle loro interfacce online e a lottare con processi più lunghi e noiosi. A lungo termine, il sito statico giusto evita tempi di confusione per gli sviluppatori di software.

Conclusione

In conclusione, l'utilizzo di Surge per l'implementazione di siti statici è un potente strumento che può aiutarti a semplificare il processo di sviluppo e rendere il tuo sito web operativo e operativo rapidamente. Che tu sia uno sviluppatore esperto o che abbia appena iniziato, Surge è una piattaforma facile da usare e intuitiva che può aiutarti a creare e lanciare rapidamente il tuo sito web.

Dall'impostazione e configurazione iniziali all'implementazione e alla gestione del tuo sito, Surge fornisce un set completo di funzionalità e strumenti che semplificano la gestione del tuo sito web, generare lead e assicurarsi che tutto funzioni sempre senza intoppi. Grazie alle sue potenti funzionalità di automazione e alle opzioni di configurazione flessibili, Surge è una scelta eccellente per chiunque desideri creare e distribuire siti statici in modo rapido ed efficiente.

Nel complesso, vale la pena considerare Surge se stai cercando un modo affidabile ed efficiente per distribuire il tuo sito statico. Con la sua interfaccia intuitiva, le potenti funzionalità e la documentazione utile, Surge è uno strumento prezioso per qualsiasi sviluppatore che desideri portare il proprio sito Web al livello successivo. Allora perché non provarlo e vedere come può aiutarti a semplificare il tuo processo di sviluppo e portare il tuo sito al livello successivo?