Scala illimitata e Web Hosting gratuito con GitHub Pages e Cloudflare

Ho un segreto che fa risparmiare ai miei clienti un sacco di soldi, mantiene il loro sito Web sicuro e ha backup integrati.

Il segreto: Faccio il suo posto web statico. Quindi, lo memorizzo e lo ospito con GitHub e uso Cloudflare per servirlo su HTTPS e renderlo veloce. I miei clienti pagano sempre e solo per il loro nome di dominio, eppure ottengono molto di più di quanto si aspettassero.

Perché il contenuto statico?

I siti statici sono meravigliosamente veloci poiché non sono coinvolti tempi di elaborazione del server., Inoltre, commettendo una base di codice di risorse statiche in un repository git, il rollback delle modifiche diventa semplicemente una questione di tornare a un commit precedente. I backup sono ungit push e in sostanza servi l’intero sito Web dalla cache, il che significa che il tuo server non dovrà quasi mai elaborare nuovamente una richiesta.

Costruire un’interfaccia utente complessa?

Con l’avvento dei framework front-end, come React e i suoi parenti, puoi creare esperienze magiche con nient’altro che HTML/CSS e JavaScript., Dovrai separare la tua logica di back-end dal tuo front-end, ma anche Ruby on Rails viene fornito con una modalità API ora.

Ogni volta che vengo assunto per costruire un sito web, considero se un sito statico sia sufficiente per soddisfare le esigenze del mio cliente, e in molti casi lo è.

Ti stai chiedendo che tipo di casi d’uso ho in mente? Forte! Discutiamo alcune situazioni in cui potresti voler considerare il contenuto statico e spiegare come questo approccio può far risparmiare tempo a te e al tuo cliente.,

Siti web Brochureware

I siti Web Brochureware hanno lo scopo di fornire informazioni su un’azienda e non cambiano in modo significativo per tutta la loro vita. Un’applicazione dinamica è chiaramente eccessivo per tali siti, e dal momento che questi siti vanno mantenuto per anni, ricevendo pochi, se eventuali aggiornamenti, di solito sono facili bersagli per gli hacker di, bene, hack.

I modelli HTML statici sono significativamente più economici rispetto alle loro controparti CMS e sono più facili da modificare in futuro. Gli sviluppatori hanno chiesto di aggiornare tali siti non richiedono conoscenze specialistiche su un particolare CMS., Di norma, realizzo sempre siti web statici per i siti brochureware.

Bonus: Le piccole imprese amano non pagare ricorrenti spese di hosting mensili. Certo, l’hosting non è un costo enorme, ma i clienti non devono preoccuparsi di pagare altro che il dominio, il che è fantastico.

Applicazioni a pagina singola

Stai mostrando una nuova app meravigliosa e fantastica che si basa su moderni framework front-end?

La tua applicazione è già per lo più statica., Fai qualche passo in più per isolare qualsiasi logica lato server in un’applicazione separata e ottenere il massimo vantaggio di avere la tua app servita interamente dalla cache di Cloudflare.

L’applicazione sarà disponibile in ogni momento.

Blog

Questa è una vendita difficile. È difficile convincere le persone che i siti statici possono essere impiegati per i blog, ma leggimi – non sono andato in fondo.

I blog non sono altro che contenuti resi con modelli. Semplicemente non hai bisogno di un’applicazione in piena regola che analizza ogni richiesta e rende una nuova pagina. Un sito statico è perfetto per questo caso d’uso.,

Considera Jekyll. Gli dai modelli liquidi e contenuti Markdown e li combina insieme in un sito Web statico. Nessuna elaborazione on-the-fly richiesto, e il tuo blog si sente improvvisamente molto più veloce.

Questo flusso di lavoro è particolarmente utile perché le pagine GitHub supportano le build di Jekyll. Improvvisamente, i post del blog possono essere forniti con richieste pull e tutti i tuoi contenuti vengono archiviati all’interno del controllo della versione. I non sviluppatori possono ancora contribuire ai post in Markdown pubblicando i loro post tramite Stackedit.

In effetti, sto usando Stackedit per comporre questo post in questo momento!,

Inoltre, se vuoi commenti sui post del tuo blog, Disqus ti offre un potente sistema di commenti inserendo uno snippet di JavaScript.

Questa pagina che stai leggendo utilizza anche Disqus.

GitHub Pages

GitHub Pages è la risposta di GitHub alle pagine del progetto e ti consente di servire qualsiasi sito Web statico direttamente dal tuo repository. Poiché GitHub pages supporta domini personalizzati, è possibile ospitare un sito Web statico su GitHub pages gratuitamente, con distribuzioni direttamente da Git.

Distribuzione alle pagine GitHub.

Basta parlare, vediamo in azione!,

Sono andato avanti e ho creato un’app React a pagina singola che recupera e visualizza il tasso di cambio corrente per la Rupia pakistana da un’API pubblica. Distribuiamo questo alle pagine GitHub.

Per prima cosa, creiamo un nuovo repository GitHub.

Le pagine GitHub sono servite da un ramo chiamato gh-pages quindi creiamo uno per il mio progetto.

$ git checkout -b gh-pagesSwitched to a new branch 'gh-pages'

E spingiamo il sito verso l’alto:

E abbiamo finito!, A questo punto il sito sarà disponibile presso con connessione SSL:

cose Importanti da notare:

• GitHub pages serve il index.html file del progetto gh-pages ramo
• Il sito è servito a USERNAME.github.io/REPOSITORY-NAME

Personalizzazione del nome di dominio.

Servire il sito fuori da GitHub va bene, ma qualsiasi sito web decente ha bisogno di un nome di dominio personalizzato. Fortunatamente, GitHub ti consente di portare il tuo dominio alla festa!,

Per prima cosa, creiamo un file specialeCNAME e posizioniamo lì il nostro nome di dominio. Ciò consentirà a GitHub di sapere quale nome di dominio instradare al repository.

$ echo 'pricecheck.gilani.me' > CNAME$ git add .$ git commit -m 'Add a custom domain'...$ git push...

Secondo, facciamo il punto è un CNAME per il sottodominio di GitHub DNS in USERNAME.github.io:

Attenzione: NON utilizzare questo per un apice di dominio! Aggiungendo un recordCNAME alla radice il tuo dominio disabiliterà i tuoi recordMX eTXT., Usa questo solo per il tuo sottodominio. I domini Apex sono discussi più avanti.

A questo punto, il nostro sito deve essere eseguito sul nostro dominio personalizzato su HTTP:

cose Importanti da notare:

• default *.github.io dominio è servita tramite HTTPS.
• Il nostro nome di dominio personalizzato viene fornito tramite HTTP non sicuro.
• NON utilizzare un record CNAME sul tuo dominio apex a meno che tu non voglia eliminare le tue email.

Limitazioni delle pagine GitHub:

• I repository devono avere dimensioni del file inferiori a 1 GB.,
• I siti Web devono avere dimensioni del file inferiori a 1 GB.
• Limite di larghezza di banda mensile è di 100 GB. Lo ignoreremo piu ‘ tardi.

Usare un dominio apex come dominio personalizzato

Il modo più semplice per aggirare questa limitazione è usarewww come sottodominio e reindirizzare tutto il traffico HTTP dall’apex awww. Nel mio esempio, reindirizzereigilani.me a, che punta al mio sito statico, ma non mi piace fare le cose nel modo più semplice.,

Se vuoi davvero usare un dominio apex, controlla se il tuo provider DNS ti consente di impostare ANAME record. Questi sono (semplificati) a metà strada tra i record CNAME poiché consentono di puntare a domini e A poiché non annullano altri record sulla stessa zona.

No ANAME? L’ultima opzione è passare a un provider DNS che supporta questo: inserisci Cloudflare., Cloudflare fornisceCNAME appiattimento sui domini apex, che è l’equivalente di un recordANAME. È meglio fare lo switch in questo momento poiché copriremo Cloudflare nella prossima sezione.

TLDR: passa al DNS gratuito di Cloudflare e imposta un CNAME sul tuo dominio apex. Fanno qualcosa di speciale con il loro CNAME che lo fa funzionare.

SSL e Cloudflare

Benvenuti nell’era post-Snowden., Tutti i nostri peggiori timori di snooping e hacking sanzionati dal governo sono stati confermati, e il mondo sta rimescolando per proteggere i dati in transito e in riposo.

Come un moderno amministratore web, ci si aspetta di fornire almeno SSL sul tuo sito web, senza contenuti misti.

È arrivato al punto in cui Google Chrome contrassegna i siti Web HTTPS come insicuri e Google Search sta iniziando a favorire i siti Web HTTPS in modo più favorevole nelle loro classifiche. Discuteremo ancora più strategie per rendere sicuro il tuo front-end in seguito, ma per ora copriremo solo SSL.

Fortunatamente, ora abbiamo Let’s Encrypt.,

È un’autorità di certificazione (CA) senza scopo di lucro e completamente automatizzata che consente di emettere a livello di programmazione certificati SSL a breve termine di 90 giorni per qualsiasi dominio controllato. È un gioco da ragazzi da usare; è open source; e il progetto è supportato da una pletora di aziende, tra cui Mozilla e Electronic Frontier Foundation.

Utilizzo ottimale di Cloudflare

Cloudflare è un servizio di protezione DNS, CDN e DDoS.

Memorizza nella cache il tuo sito Web e lo serve agli utenti dai server geograficamente vicini, rendendo il tuo sito Web più veloce., Ha il vantaggio di tenerti sotto il limite di larghezza di banda di 100 GB di GitHub perché anche se il tuo sito Web diventa follemente popolare, la maggior parte delle richieste colpirà la cache e non raggiungerà mai il server.

Oltre a questo, Cloudflare offre un servizio chiamato SSL universale in cui ti rilasciano un certificato SSL gratuito dai loro partner CA, in modo da ottenere HTTPS gratuitamente forever per sempre.

Perché Cloudflare?

So cosa stai pensando: Gilani, mi hai appena detto quanto sia fantastico Let’s Encrypt. Perché stai parlando di Cloudflare? Beh, tutto si riduce alla semplicità.,

Come esercizio mentale, immagina di configurare più cache Nginx e proxy inversi in tutto il mondo, dando loro tutti i certificati SSL validi e servendo le pagine Web degli utenti dalle loro posizioni più vicine.

Ciò comporta che il tuo sito Web venga servito tramite SSL anche se il server di origine non ha un certificato SSL, sebbene Cloudflare ti fornisca speciali certificati autofirmati che puoi mettere sul tuo server di origine per proteggere la connessione fino ai server di Cloudflare. Questo è ciò che Cloudflare ti offre con un piano gratuito e non devi nemmeno rinnovare il tuo certificato ogni 90 giorni.,

Come libero professionista, ottengo clienti che vogliono un sito attivo e funzionante per la loro attività il più velocemente possibile. Non capiscono o si preoccupano dei problemi di sicurezza, che affliggono il Web moderno o la crittografia durante il transito. Alcuni clienti lottano per capire l’idea dei nomi di dominio e lo trovano fastidioso quando devono pagare una tassa annuale di $15 “solo per mantenere il mio sito Web in esecuzione”. Quindi prova a spiegare loro perché devono pagare per un cluster di proxy inversi che proteggono il loro sito Web che gira su hosting gratuito stesso.

Impostazione di Cloudflare SSL

Sporchiamo di nuovo le mani., La prima cosa da fare, passare al routing di tutto il traffico attraverso Cloudflare:

Quindi, sotto Crypto, impostare il livello SSL su “Full.”

Forza la” Riscrittura automatica HTTPS ” per eliminare gli avvisi di contenuto misto.

A questo punto, il nostro sito web funzionerà sia su HTTP che su HTTPS. Forziamo HTTPS per tutto sul nostro dominio.

Tutto fatto., Il nostro sito web dovrebbe sempre caricare su HTTPS con una valutazione “Sicura” verde in Chrome.

Parole finali e considerazioni sulla sicurezza

Ci sono alcune cose che non ho discusso sopra, e mi piacerebbe prendere un momento per chiarire alcuni punti.

Gli astuti tra di voi faranno notare che ci sono alcuni problemi di sicurezza evidenti con questa configurazione, vale a dire che non ci sono intestazioni HTTP sicure come:

• Content-Security-Policy: carica script e risorse da una whitelist di host e può disabilitare js in linea.,
• X-Frame-Options: disabilita il caricamento del tuo sito web in un iframe.

E hai ragione. Le pagine GitHub e persino Cloudflare non consentono di personalizzare le intestazioni HTTP. Tuttavia, è possibile impostare un CSP utilizzando il tag HTML meta.

Inserisci semplicemente questo nella tua pagina web:

<meta http-equiv="Content-Security-Policy" content="default-src https:">

Tuttavia, al momento, non esiste un modo pratico per impostare l’intestazione X-Frame-Options sulle pagine GitHub, il che significa che un utente malintenzionato può caricare la tua pagina Web in un iframe appositamente predisposto Attacco XSS., Se sei dedicato, tuttavia, puoi risolvere questo problema chiedendo agli utenti di confermare la password o il token 2FA su ogni azione sensibile o passando un token CSRF su ogni richiesta autenticata.

Una delle principali preoccupazioni per alcuni è che utilizzando i repository pubblici gratuiti su GitHub, il tuo sito Web e il codice sorgente sono disponibili per chiunque desideri eseguire il fork o scaricarlo. Quindi penso che la preoccupazione qui sia fuori luogo.

Il contenuto statico non è codice sorgente nel senso che non è compilato o elaborato come script prima di essere servito all’utente., L’utente otterrà la stessa copia statica del sito Web se dovesse eseguire un crawler web puntato sul tuo sito web. Mentre ospitare il codice in un repository GitHub rende certamente più facile scaricare una copia del tuo sito web, non espone nulla che non fosse già pubblico.

Scaling, Scaling illimitato

Le idee presentate in questo articolo non si limitano al web hosting gratuito di piccole applicazioni.,

È possibile creare un livello front-end basato su un moderno framework JavaScript, collegarlo a un Backend-as-a-Service (BaaS) basato su cloud su larga scala, come Firebase, e creare applicazioni complesse senza preoccuparsi di server, uptime o qualsiasi altro problema relativo all’infrastruttura.

Fare un nuovo eccitante gioco basato sul web?! Scopri GameSparks, e si è pronti ad andare.

Riepilogo, confessione e collegamenti

In questo articolo, ho fatto apparire come se avessi pubblicato manualmente la mia app React sugh-pages. Non ho fatto niente del genere., Ho lavorato su master e quando è arrivato il momento di distribuire, ho eseguito npm run deploy che ha dato il via a uno script di build e ha spinto la build su gh-pages. Si prega di vedere il ramomaster del mio repository per vedere come funziona.,

Take away

Pro:

• Chat di distribuzione
• Facile collaborazione
• Sicuro ambiente di hosting

Avvertenze:

• Nessun accesso alle intestazioni HTTP
• Facile da scaricare una copia del sito web
• GitHub conoscenze richieste
• Dipende fornitori di tecnologia

Link: