Sono un noob totale quando si tratta di sviluppo web, ma sto migliorando le mie competenze tecniche ogni giorno. Ho cercato di mantenere questo post il più semplice possibile in modo che potesse aiutare i principianti come me. Ho curato tutti i passaggi e i codici che ho menzionato in questo post del blog, ma se trovi errori o desideri suggerire qualcosa, non esitare a commentare. te ne sarei grato.
I siti statici sono veloci, sicuri, flessibili e affidabili. Non devi preoccuparti molto del codice dannoso che viene iniettato nel tuo sito. I costi di hosting dei siti statici sono notevolmente inferiori. Non entrerò nei dettagli su questo argomento, ma ecco un ottimo articolo sui siti statici di Scotch.
In questo post del blog, implementerò un sito statico su Google Firebase e anche quello GRATUITAMENTE. Il post è una guida passo passo e sarà utile, soprattutto per i neofiti della tecnologia.
Firebase è stata acquisita da Google nel 2014. Si basa sull'infrastruttura di Google e ti aiuta a creare rapidamente app di alta qualità, anche senza gestire l'infrastruttura. Google Firebase ti consente di ospitare gratuitamente i tuoi contenuti statici con il suo piano Spark. Ulteriori informazioni sull'hosting Firebase.
Prerequisiti
Come ho detto, questa guida pratica è puramente per principianti. Pertanto, per ospitare il tuo sito statico, hai solo bisogno di:
- Un account Google
- Un laptop o desktop con sistema operativo Windows in esecuzione
- Familiarità con le funzioni di base della tastiera del tuo laptop o desktop
Questo è tutto. Iniziamo.
Passaggio 1:crea un progetto in Google Firebase
Registra il tuo account con Google Firebase. Crea un account Google se non lo hai. Nella console Firebase, fai clic su Aggiungi progetto.
Inserisci un nome progetto, un ID progetto (facoltativo poiché Firebase assegna automaticamente un ID univoco al tuo progetto Firebase). Usa le impostazioni predefinite per ora e fai clic su Crea progetto.
Una volta creato il progetto, fai clic sul pulsante Continua e verrai indirizzato alla dashboard di Firebase. Qui troverai alcuni dettagli:
1. Il progetto attuale è “thenewspaper-tech-demo”. Clicca sul menu a tendina per vedere tutti i tuoi progetti, se ne hai creati più di uno.
2. Il progetto attuale è impostato su “thenewspaper-tech-demo”.
3. È possibile configurare le impostazioni per il progetto corrente facendo clic sull'icona delle impostazioni del progetto. Per ora, lascia così com'è.
4. Useremo questa scheda Hosting per distribuire il nostro sito statico.
5. Il tuo piano Firebase è Spark, che è gratuito. Vedi tutti i piani e i prezzi di Firebase.
Fase 2:imposta gli strumenti necessari
Per ospitare il tuo sito, devi installare gli strumenti della riga di comando di Firebase.
1. Scarica e installa Node.js per Mac/Linux/Windows. Sto usando Windows10 a 64 bit. Assicurati di scaricare la versione LTS consigliata per la maggior parte degli utenti.
2. Aprire Windows PowerShell. Per aprire, premi contemporaneamente i pulsanti Windows+X utilizzando la tastiera, quindi fai clic su "Windows PowerShell Admin". Fare clic su Sì quando richiesto da Controllo account utente.
3. Installa gli strumenti della riga di comando di Firebase eseguendo il comando seguente in PowerShell:
$ npm install -g firebase-tools
Questo comando installa il comando firebase disponibile a livello globale. Se il comando precedente non funziona, modificare le autorizzazioni npm ed eseguire nuovamente il comando. Per assicurarti di disporre dell'ultima versione della CLI (interfaccia della riga di comando) di Firebase, esegui nuovamente il comando precedente anche se in precedenza hai installato gli strumenti della riga di comando.
Fase 3:crea il tuo sito in locale con Firebase
Nel terminale già aperto, esegui il seguente comando per accedere a Google.
$ firebase login
L'esecuzione di questo comando aprirà la finestra del browser predefinito e ti chiederà di concedere a Gmail l'accesso a Firebase. Clicca sul pulsante Consenti e connettiti con la tua email. Se non hai un account Gmail, creane uno. Potresti ottenere un pop di Windows Firewall per l'accesso. Consenti o fai clic su Sì.
Questo comando connette la tua macchina locale a Firebase e ti garantisce l'accesso ai tuoi progetti Firebase. Vedrai un messaggio "successo:login as.." nella shell.
Per verificare che l'autenticazione abbia funzionato (e per elencare tutti i tuoi progetti Firebase), esegui il comando successivo. L'elenco visualizzato dovrebbe essere lo stesso dei progetti Firebase elencati nella console Firebase.
$ firebase list
Per connettere il tuo progetto locale al tuo progetto Firebase, esegui il comando seguente dalla radice della directory del tuo progetto locale.
$ firebase init
Una volta eseguito il comando precedente, vedrai la directory del tuo progetto. La directory del progetto si troverà in una cartella in questo percorso "C:\Windows\System32". Il nome della cartella di lavoro sarà come lo chiamerai. Per impostazione predefinita, Firebase lo chiama "pubblico". Lo vedremo tra un po'. Per ora, digita Y o Sì e premi il pulsante Invio per procedere con i passaggi.
Il comando firebase init presenta una serie di opzioni di configurazione. Devi scegliere Hosting. Scendi premendo il tasto freccia giù utilizzando la tastiera, quindi premi la barra spaziatrice per selezionare la funzione di hosting. Premi il pulsante Invio per continuare.
Ora ti verrà presentato l'impostazione del progetto.
Seleziona il tuo progetto, che hai creato in precedenza nella console Firebase. Il nome del progetto che ho creato è stato “thenewspaper-tech-demo”. Puoi anche creare un nuovo progetto da qui.
Andando avanti, ti verrà presentata la configurazione dell'hosting. Dovrai scegliere la directory del tuo progetto. Specificare una directory da utilizzare come directory radice pubblica. Per specificare, digitare public e premere Invio. Tieni presente che puoi inserire un nome diverso (come "il mio_primo_progetto") invece di "pubblico". A questo punto, specifica la tua directory principale pubblica, ma puoi anche specificarla in un secondo momento modificando il tuo file di configurazione firebase.json.
Per configurare più prodotti Firebase, puoi eseguire firebase init in un secondo momento. L'impostazione predefinita per la directory radice pubblica è chiamata public che si trova qui "C:\Windows\System32\public". È interessante notare che Firebase esegue automaticamente un paio di cose intelligenti:
1. Crea una directory pubblica se non la crei.
2. Crea un file index.html e un file 404.html nella directory. Apri una cartella pubblica per vedere entrambi i file.
Successivamente, dovrai scegliere una configurazione per il tuo sito.
Se scegli di creare un'app di una pagina, Firebase aggiunge automaticamente le configurazioni di riscrittura per te. Dal momento che non voglio riscrivere gli URL, scelgo N e premo Invio.
Questo completerà il processo di inizializzazione di Firebase. Nota che il comando firebse init aggiunge un paio di file alla radice della directory del sito locale:
– Un file json, firebase.json , che mostra la configurazione del progetto.
– Un file .firebaserc che fornisce informazioni sugli alias del progetto.
Ora, avviamo il server locale per lo sviluppo. Esegui il comando seguente dalla radice della directory dell'app locale:
$ firebase serve
Questo comando servirà i file di hosting dalla directory pubblica e avvierà un server locale.
Apri il browser e digita:http://localhost:5000
Quindi, hai creato il tuo sito localmente, che contiene il contenuto come vedi nello screenshot sopra.
Ora, cambiamo il contenuto del sito e ricostruiamo il sito per visualizzare i contenuti aggiornati. Innanzitutto, vai al popup di Windows PowerShell che è già aperto. Spegnere il server locale. Per fare ciò, fai clic in un punto qualsiasi dell'area a comparsa e premi il pulsante CTRL+C. Si spegnerà.
Come ho mostrato in precedenza, i file html si trovano qui "C:\Windows\System32\public". Vai alla cartella, copia il file html dell'indice e incolla il file sul desktop. Ora, fai clic con il pulsante destro del mouse e apri il file html dell'indice con qualsiasi editor di testo. Sto usando il codice di Visual Studio. Per impostazione predefinita, vedrai Blocco note nel pop-up del clic con il pulsante destro del mouse. Se non vedi Blocco note, scegli un'altra opzione dell'app, scorri verso il basso alla fine e seleziona Altre app. Da lì, seleziona Blocco note.
Una volta aperto il file di indice html, cambia la parola "Benvenuto" in "Hello World".
Salva il file. Basta premere CTRL+S per salvare. L'output sarà simile a questo:
Ora copia il file di indice modificato e incollalo nella cartella pubblica. Per fare ciò, devi essere l'amministratore del computer. Dai il permesso di incollare. Esegui nuovamente il comando seguente per avviare il server locale
$ firebase serve
Questo comando servirà i file di hosting dalla directory pubblica e avvierà un server locale. Apri il tuo browser e digita:http://localhost:5000. Vedrai le tue modifiche.
Fase 4:distribuisci il tuo sito
Ora implementeremo questo progetto. Ma prima spegni il server locale come ho indicato prima.
Per implementare il nostro progetto Firebase "thenewspaper-tech-demo", esegui il seguente comando dalla directory del tuo progetto:
$ firebase deploy
Questo comando firebase deploy distribuisce una versione ai siti di hosting predefiniti del tuo progetto Firebase:
project-id.web.app project-id.firebaseapp.com
Quindi visualizzerai i tuoi siti che saranno simili a questi URL:
https://thenewspaper-tech-demo.web.app https://thenewspaper-tech-demo.firebaseapp.com
Puoi anche vedere questi URL quando vai alla sezione Hosting della tua console Firebase.
Congratulazioni! Hai distribuito il tuo primo sito statico con Firebase e anche quello gratuitamente.
Nota :Dovresti notare che il nostro progetto si trova in C-drive per ora. Quando stavo provando a distribuire i miei file statici per la prima volta, ho seguito il tutorial ufficiale di Firebase. Ed essendo io stesso un principiante, ho seguito il flusso. Ma quando ho provato a inizializzare un progetto reale in un'altra unità, non ha mai funzionato per me. Se hai lo stesso problema, ecco la soluzione. Dice:"Quando firebase init viene eseguito, sale nell'albero delle directory alla ricerca di una directory padre che è già inizializzata come progetto Firebase".
- Cerca un file firebase.json nella posizione /Users/SEB.
- Cancella quel file, se esiste.
- Il problema verrà risolto
Per evitare tutti questi problemi, ti suggerisco di inizializzare un progetto nella cartella desiderata prima di eseguire qualsiasi comando Firebase. Per questo, devi prima aprire PowerShell in quella cartella. Ecco la guida rapida per aprire PowerShell nella cartella desiderata.