Rajaton Laajuus ja Ilmainen Web Hosting GitHub Sivut ja Cloudflare

minulla on salaisuus, joka säästää asiakkaani tonni rahaa, pitää niiden verkkosivuilla, turvallinen, ja on sisäänrakennettu varmuuskopiot.

the secret: I make their website static. Sitten, säilytän Ja isäntä sen kanssa GitHub, ja käyttää Cloudflare palvella sitä HTTPS, ja tehdä nopeasti. Asiakkaani maksavat vain domain-nimestään, mutta saavat silti paljon enemmän kuin ovat koskaan toivoneet.

miksi staattinen sisältö?

staattiset sivustot ovat ihanan nopeita, koska niihin ei liity palvelimen käsittelyaikaa., Myös sitouttaa koodi pohja staattinen varat git arkiston, liikkuvan takaisin muutoksia vain tulee kysymys siitä, palataan edelliseen sitoutua. Varmuuskopiot ovat git push pois, ja olet lähinnä palvella koko sivuston välimuistin, eli palvelin ei lähes koskaan tarvitse käsitellä uudelleen.

monimutkaisen käyttöliittymän rakentaminen?

With kynnyksellä front-end puitteet, kuten Reagoi ja sen kin, voit luoda maagisia kokemuksia ole mitään muuta kuin HTML/CSS ja JavaScript., Sinun täytyy erottaa back-end logiikka etupuolelle vaikka, mutta jopa Ruby Rails alukset API-tilassa nyt.

Aina kun saan supistui rakentaa verkkosivuilla, katson, onko tai ei-staattinen sivusto ei riitä vastaamaan asiakkaani tarpeisiin, ja monissa tapauksissa se on.

Mietitkö, millaisia käyttötapauksia minulla on mielessäni? Hienoa! Puhutaanpa joitakin tilanteita, kun haluat ehkä harkita staattista sisältöä, ja selittää, miten tämä lähestymistapa voi säästää sekä sinun ja asiakkaasi aikaa.,

Brochureware sivustot

Brochureware verkkosivujen on tarkoitus antaa tietoa liiketoimintaa, ja eivät muutu merkittävästi koko heidän elämänsä. Dynaaminen sovellus on selvästi ylilyönti tällaisia sivustoja, ja koska nämä sivustot mennä ylläpitäjää vuosia, saa vähän, jos mitään päivityksiä, ne ovat yleensä helppoja kohteita hakkereille, hyvin, hakata.

staattiset HTML-mallit ovat huomattavasti halvempia kuin CMS-kollegansa, ja niitä on helpompi nipistää tulevaisuudessa. Kehittäjät pyysi päivittää tällaisia sivustoja eivät vaadi erikoistunutta tietoa tietyn CMS., Pääsääntöisesti teen aina staattisia verkkosivustoja brochureware-sivustoille.

Bonus: pienyritykset eivät mielellään maksa toistuvia kuukausittaisia hosting-maksuja. Myönnettäköön, hosting ei ole valtava hinta, mutta asiakkaat eivät vain tarvitse vaivautua maksamaan mitään muuta kuin verkkotunnuksen, mikä on hienoa.

Yhden sivun sovelluksia

oletko osoittaa pois ihana, viileä uusi sovellus, joka perustuu modernit front-end kehysten?

levityksesi on jo pääosin staattista., Ota muutama lisäaskel eristää palvelimen puolella logiikkaa erilliseen sovellukseen, ja saada täyden hyödyn siitä, että sovellus palvelee kokonaan Cloudflare ’ s cache.

hakemuksesi on aina saatavilla.

blogit

This is a hard sell. On vaikea vakuuttaa ihmisille staattisia sivustoja voidaan työllistää blogeja, mutta Lue minut ulos – en ole mennyt pois syvä pää.

blogit eivät ole muuta kuin malleilla renderoitua sisältöä. Et yksinkertaisesti tarvitse täysimittaista sovellusta, joka jäsentää jokaisen pyynnön ja tekee uuden sivun. Staattinen sivusto on täydellinen tähän käyttökoteloon.,

harkitse jekylliä. Annat sille nestemäisiä malleja ja Markdown sisältöä, ja se yhdistää ne yhdessä staattinen verkkosivuilla. Ei lennossa käsittelyä tarvita, ja blogisi tuntuu yhtäkkiä huomattavasti nopeammalta.

tämä työnkulku on erityisen hyödyllinen, koska GitHub sivut tukevat Jekyll rakentaa. Yhtäkkiä blogikirjoituksia voi lähettää pull-pyynnöillä, ja kaikki sisältö tallennetaan versionhallintaan. Ei-kehittäjät voivat edelleen edistää virkaa Markdown julkaisemalla niiden viestit läpi Stackedit.

itse asiassa, käytän Stackedit säveltämään tämän postauksen juuri nyt!,

Myös, jos haluat, kommentoi blogitekstejä, Disqus antaa sinulle voimakas kommentti järjestelmä lisäämällä pätkä JavaScript.

Tämä sivu, jota luet, käyttää myös Disquja.

GitHub Sivut

GitHub Sivut on GitHub on vastaus hanke-sivuja, ja sen avulla voit palvella staattinen verkkosivuilla suoraan arkistoon. Koska GitHub-sivut tukevat mukautettuja verkkotunnuksia, voit isännöidä staattista verkkosivustoa GitHub-sivuilla maksutta ja ottaa käyttöön suoraan Git: stä.

Deposing to GitHub Pages.

enough talk, Let ’ s see it in action!,

– olen mennyt eteenpäin ja tehnyt yhden sivun Reagoida sovellus, joka hakee ja näyttää nykyisen valuuttakurssi Pakistanin Rupia julkisen API. Lähetetään tämä Githubin sivuille.

ensin luodaan uusi GitHub-arkisto.

GitHub sivut ovat palvelleet haara nimeltään gh-pages joten let ’ s luoda yksi oma projekti.

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

Ja oletetaan, push-sivusto up:

Ja olemme tehneet!, Tässä vaiheessa sivusto on saatavilla osoitteessa ilmainen SSL:

Tärkeitä asioita huomata:

• GitHub sivut palvelee index.html tiedosto projektin gh-pages haara
• sivusto on tarjolla osoitteessa USERNAME.github.io/REPOSITORY-NAME

Mukauttaminen verkkotunnus.

sivuston palveleminen GitHubin edustalla on hienoa, mutta mikä tahansa kunnollinen sivusto tarvitsee mukautetun verkkotunnuksen. Onneksi GitHub antaa sinun tuoda oman verkkotunnuksen juhliin!,

ensin luodaan erityinen CNAME tiedosto ja asetetaan verkkotunnuksemme sinne. Näin github saa tietää, mikä verkkotunnus on reititettävä arkistoon.

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

Toiseksi, katsotaanpa a alakohta CNAME meidän aliverkkotunnuksen GitHub DNS-osoitteessa USERNAME.github.io:

Huomio: Älä käytä tätä apex-domain! Lisäämällä CNAME tallenna juureen verkkotunnuksesi poista MX ja TXT kirjaa., Käytä tätä vain aliverkkotunnuksesi. Apex verkkotunnuksia käsitellään myöhemmin.

tässä vaiheessa, meidän verkkosivuilla pitäisi ajaa meidän mukautetun verkkotunnus HTTP:

Tärkeitä asioita huomata:

• oletuksena *.github.io verkkotunnus on toiminut kautta HTTPS.
• mukautettu verkkotunnuksemme tarjoillaan turvattoman HTTP: n kautta.
• Älä käytä CNAME tallentaa apex domain ellet halua tappaa sähköposteja.

Github-sivujen rajoitukset:

• repojen on oltava tiedostokooltaan alle 1 Gt.,
• Verkkosivujen on oltava tiedostokooltaan alle 1 Gt.
• kuukausittainen kaistanleveyden raja on 100 Gt. Ohitamme tämän myöhemmin.

apex-verkkotunnusta kuin mukautetun toimialueen

helpoin tapa kiertää tämä rajoitus on käyttää www kuten aliverkkotunnuksesi, ja ohjaa kaikki HTTP-liikennettä apex www. Minun esimerkissä, haluan ohjata gilani.me ja , joka viittaa minun staattinen sivusto, mutta en pidä tehdä asioita helposti.,

Jos todella haluat käyttää apex-verkkotunnuksen, tarkista jos DNS tarjoaja, voit asettaa ANAME kirjaa. Nämä ovat (yksinkertaistettu) välissä on CNAME kirjaa, koska ne antaa sinun viittaavat verkkotunnukset ja A kirjaa, koska he eivät voi mitätöidä muut tallenteet samalla alueella.

Ei ANAME? Viimeinen vaihtoehto on vaihtaa DNS-palveluntarjoaja, joka tukee tätä: Anna Cloudflare., Cloudflare tarjoaa CNAME madaltuminen apex-verkkotunnuksia, joka ei vastaa ANAME äänitä. On parasta tehdä kytkin juuri nyt, koska me kattaa Cloudflare seuraavassa osassa.

TLDR: Kytkin Cloudflare on ilmainen DNS ja asettaa CNAME teidän apex-domain. He tekevät jotain erityistä CNAME, joka saa sen toimimaan.

SSL ja Cloudflare

Tervetuloa post-Snowden aikakausi., Kaikki pahimmat pelkomme hallituksen hyväksymästä nuuskimisesta ja hakkeroinnista on varmistettu, ja maailma pyrkii turvaamaan tietoja kauttakulussa ja levossa.

modernina web-ylläpitäjänä sinun odotetaan tarjoavan vähintään SSL: n verkkosivullasi, ilman sekasisältöä.

Se on tullut pisteeseen, jossa Google Chrome merkit tavallinen HTTPS-sivustoja, kuin epävarma ja Google-Haku alkaa suosimaan HTTPS-sivustot enemmän suotuisasti niiden rankingissa. Puhumme vielä enemmän strategioita tehdä etupään turvallinen myöhemmin, mutta toistaiseksi, me vain kattaa SSL.

onneksi nyt on salattu.,

Se on voittoa tavoittelematon ja täysin automatisoitu (Certificate Authority, CA), jonka avulla voit ohjelmallisesti kysymys lyhyen aikavälin 90 päivän SSL-varmenteita verkkotunnukseen, voit hallita. Se on helppoa käyttää, se on avoimen lähdekoodin, ja hankkeen tukena on lukuisia yritykset, kuten Mozilla ja Electronic Frontier Foundation.

Laittamalla Cloudflare Hyvä Käyttää

Cloudflare on DNS, CDN, ja DDoS suojelua palvelu.

se kätkee verkkosivustosi ja palvelee sitä käyttäjille maantieteellisesti lähellä olevista palvelimista, mikä tekee verkkosivustostasi nopeamman., Se on lisäetu pitää sinut alle GitHub 100GB kaistanleveys raja, koska vaikka sivusto tulee järjettömän suosittu, useimmat pyynnöt osuvat välimuisti, eikä koskaan päästä palvelimelle.

tämän lisäksi Cloudflare tarjoaa Universal SSL-nimisen palvelun, jossa he antavat sinulle ilmaisen SSL-sertifikaatin CA-kumppaneiltaan, joten saat HTTPS: n ilmaiseksi… ikuisesti.

miksi Cloudflare?

– tiedän, mitä ajattelet: Gilani, sinä juuri kertonut minulle, kuinka mahtava Antaa Salaa on. Miksi puhut Cloudflare? Kaikessa on kyse yksinkertaisuudesta.,

henkinen harjoitus, kuvitella, perustamalla useita Nginx välimuisti ja kääntää valtakirjoja ympäri maailmaa, antaa heille kaikki voimassa SSL-varmenteita ja palvelevat käyttäjien web-sivuja heidän lähimmät sijainnit.

Tämä johtaa sivustosi on toiminut kautta SSL vaikka alkuperä palvelin ei ole SSL-varmenteen, vaikka Cloudflare antaa sinulle erityinen itse allekirjoitettuja varmenteita, että voit laittaa oman origin-palvelimen suojatun yhteyden jopa Cloudflare palvelimille. Näin Cloudflare antaa ilmaisen suunnitelman, eikä sertifikaattia tarvitse edes uusia 90 päivän välein.,

freelancerina saan asiakkaita, jotka haluavat työmaan käyntiin mahdollisimman nopeasti. He eivät ymmärrä tai välitä tietoturvaongelmista, modernin verkon vitsaamisesta tai salauksesta kuljetuksen aikana. Jotkut asiakkaat kamppailevat ymmärtää ajatus verkkotunnuksia, ja löytää se ärsyttävää, kun he joutuvat maksamaan $15 vuosimaksu ”vain pitää sivustoni käynnissä”. Joten yritä selittää heille, miksi he joutuvat maksamaan klusterin kääntää valtakirjoja suojella niiden verkkosivuilla, joka toimii vapaa hosting itse.

Cloudflare SSL

Let ’ s get our hands dirty again., Ensimmäinen asia tehdä, vaihtaa reititys kaikki liikenne kautta Cloudflare:

Seuraava, alle Crypto, asettaa SSL-tason ”Full.”

Voima ”Automaattinen HTTPS Kirjoittaa” tappaa sekoitettu sisältö varoitukset.

tässä vaiheessa, meidän sivusto toimii sekä HTTP ja HTTPS. Pakotetaan HTTPS kaikkeen verkkotunnukseemme.

Kaikki on tehty., Sivustomme pitäisi aina ladata HTTPS vihreä ”Turvallinen” luokitus Chrome.

viimeiset Sanat ja turvallisuusnäkökohdat

On olemassa muutamia asioita, en keskustella edellä, ja haluaisin ottaa hetki selventää muutamia kohtia.

terävä teistä tulee kohta ulos, että on olemassa muutamia räikeä turvallisuus ongelmia tämän setup, eli että ei ole turvallinen HTTP-otsakkeiden, kuten:

• Content-Security-Policy: lataa skriptit ja varat alkaen whitelist sebaot, ja voi estää inline-js.,
• X-Frame-Options: poistaa sivustosi on lastaus iframe-kehykseen.

Ja olet oikeassa. GitHub-sivut ja jopa Cloudflare eivät salli HTTP-otsikoiden muokkaamista. CSP: n voi kuitenkin asettaa HTML meta – tunnisteella.

Yksinkertaisesti lisätä tämä omaan web-sivu:

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

Kuitenkin, tällä hetkellä, ei ole käytännöllinen tapa asettaa X-Frame-Options header GitHub sivut, eli hyökkääjä voi ladata verkkosivun osaksi erityisesti muodostetun iframe ja vetää pois XSS-hyökkäys., Jos olet omistautunut, voit kiertää tämän ongelman pyytämällä käyttäjiä vahvistamaan salasana tai 2FA token kun jokainen herkkä toiminta, tai ajamalla CSRF-token kun jokainen todennettu pyynnöstä.

Yksi suuri huolenaihe on, että jotkut käyttämällä ilmaisen julkisen arkistot GitHub, sivuston ja lähdekoodi on saatavilla kaikille, jotka haluaa haarukka tai ladata sen. Mielestäni huoli on aiheeton.

Staattinen sisältö ei ole lähdekoodia siinä mielessä, että se ei ole koottu tai käsitelty kuin ennen script tarjoillaan käyttäjälle., Käyttäjä saa täsmälleen sama staattinen kopio verkkosivuilla, jos he olisivat ajaa web crawler huomautti verkkosivuilla. Kun hosting-koodi GitHub arkiston varmasti helpottaa ladata kopion sivuston, se ei paljasta mitään, joka ei ole jo julkistettu.

skaalaus, rajoittamaton skaalaus

tässä artikkelissa esitetyt ajatukset eivät rajoitu pienten sovellusten ilmaiseen webhotelliin.,

Voit rakentaa front-end layer perustuu moderni JavaScript puitteet, koukku se jopa suuressa mittakaavassa pilvi-pohjainen Backend-as-a-Service (BaaS), kuten Firebase, ja luoda monimutkaisia sovelluksia ilman huolta palvelimet, käytettävyyttä tai jokin muu infrastruktuuriin liittyvä kysymys.

uuden jännittävän verkkopelin tekeminen?! Tutustu GameSparks, ja olet valmis lähtemään.

Yhteenveto, Tunnustus, ja Linkkejä

tässä artikkelissa, olen tehnyt siltä, kuin olisin manuaalisesti julkaistu minun Reagoida app gh-pages. En tehnyt sellaista., Olen työskennellyt master ja kun tuli aika ottaa käyttöön, juoksin npm run deploy, joka käynnistyi rakentaa käsikirjoituksen ja työnsi rakentaa gh-pages. Katso arkistonimaster haara nähdäksesi, miten se toimii.,

Takeaways

Plussat:

• Instant käyttöönotto
• Helppo yhteistyö
• Turvallinen hosting-ympäristössä

Varoitukset:

• Ei ole pääsyä HTTP-otsikot
• Helppo ladata kopion verkkosivuilla
• GitHub tietoa tarvitaan
• Riippuu teknologiatoimittajien

Linkkejä: