Kuvitettu opas verkkosivustosi määrittämiseen Github & Cloudflare -sovelluksella

Lue tämä, jos…

  1. Haluat määrittää mukautetut uudelleenohjaukset tai muut palvelimen kokoonpanot ilmaiseksi
  2. Haluat saada sivustosi HTTPS: ään, mutta et tiedä mistä aloittaa
  3. Sinua hämmästyttää valintojen määrä (kuten Netlify, Surge, BitBalloon, Now)

Miksi Github?

  1. Helppo asentaa ja aloittaa Github Pagesin käyttö
  2. Instant ottaa käyttöön uuden koodin

Miksi Cloudflare?

  1. Se on ilmainen
  2. Sen mukana toimitetaan SSL: n (HTTPS) tukeminen valmiina. (Tästä syystä HTTPS: llä on merkitystä.)
  3. Erittäin yksinkertainen DNS-hallinta
  4. Mahdollisuus asettaa selaimen välimuistin vanhentuminen resursseille
  5. Minimoi staattinen omaisuutesi automaattisesti
  6. Mukautetut sivusäännöt uudelleenohjausten määrittämiseksi, aina HTTPS jne.
  7. HTTP2 / SPDY tuetuille selaimille
  8. Sallii HSTS: n (HTTP Strict Transport Security) määrittämisen

Ennen kuin aloitamme, tarvitset muutamia asioita:

  1. Github-tili
  2. Cloudflare-tili
  3. Pääsy mukautettuun verkkotunnukseen. Voit ostaa sen miltä tahansa verkkotunnusrekisteriltä, ​​kuten: Namecheap, GoDaddy, BigRock jne.

Jos kaikki tämä herätti kiinnostuksesi, aloitetaan!

Vaihe 1 : Luo Github-repo koodillasi

  • Siirry osoitteeseen //pages.github.com
  • Valitse vaihtoehto Project Site löytääksesi ohjeet perussivun luomiseen tyhjästä tai mukautetun teeman luomisesta

Vaihe 2. Asenna Github-sivut arkistoon

Siirry arkiston asetuksiin . Vuonna Github Sivut -kohdasta mestari haara palvella verkkosivuilla. Kun olet tehnyt sen, voit siirtyä osoitteeseen // minä> .gith u b.io/repo On tärkeää nähdä verkkosivustosi toiminnassa alla olevan kuvan mukaisesti.

Vaihe 3. Lisää mukautettu toimialue

Lisää ostamasi mukautettu toimialue ja tallenna se. Verkkosivustosi on nyt valmis omalla verkkotunnuksellasi? WOOT! ✨

Joten meillä on kaikki asetukset Githubissa. Aloitamme Cloudflaren asettamisesta jazzamaan verkkosivustosi kaikilla tehokkailla ominaisuuksilla, jotka mainitsin tämän viestin alussa.

Vaihe 4: Määritä verkkotunnuksesi Cloudflareen

Kirjaudu Cloudflareen. Jos käytät sitä ensimmäistä kertaa, sinun pitäisi nähdä yllä olevan kuvan kaltainen näyttö. Jos olet käyttänyt sitä aiemmin, voit lisätä uuden verkkotunnuksen napsauttamalla Lisää sivusto -vaihtoehtoa oikean yläkulman siirtymispalkissa. Kirjoita hallinnoitava toimialue ja napsauta Aloita tarkistus .

Vaihe 5: Asenna verkkotunnuksesi DNS-tietueet

Tässä vaiheessa ilmoitamme Cloudflarelle osoittamaan toimialueemme Github Pages -palvelimelle kahdella A Record DNS -merkinnällä:

1. 192.30.252.153

2. 192.30.252.154

Kun olet määrittänyt tämän, kaikki pyynnöt mukautetulle verkkotunnuksellesi, eli yourcustomdomain.com , ohjataan verkkosivustollesi Githubissa vaiheessa 3 .

Siellä on vielä yksi askel ennen kuin siirrymme seuraavaan vaiheeseen. Usein haluaisit käyttää verkkosivustollesi aliverkkotunnusta, kuten www , ts. Www.omatoimiverkkotunnus.com Tätä varten sinun on lisättävä CNAME-tietueen DNS-merkintä, joka osoittaa aliverkkotunnuksesi (www) kärjetunnuksellesi (@).

Kun olet määrittänyt tämän, kaikki pyynnöt omalle aliverkkotunnuksellesi eli www. yourcustomdomain.com reititetään verkkosivustollesi Githubissa vaiheessa 3 .

HUOMAUTUS: Älä yritä siirtyä käyttämään mukautettua verkkotunnustasi heti. Se ei toimi. Olemme suorittaneet vain Cloudflare - Github -asetukset. Meidän on vielä tehtävä DNS-rekisterinpitäjä -> Cloudflare-asetukset. Tämä tulee esiin vaiheessa 7.

Napsauta Jatka siirtyäksesi seuraavaan vaiheeseen.

Vaihe 6: Valitse ilmainen Cloudflare-suunnitelma

Cloudflaren ilmainen suunnitelma tarjoaa paljon hienostuneita vaihtoehtoja, joista on keskusteltu Miksi Cloudflare? alussa.

Napsauta Jatka siirtyäksesi seuraavaan vaiheeseen.

Vaihe 7: Päivitä DNS-rekisterinpitäjän nimipalvelimet

Kun olet tällä sivulla, pidä se auki yhdessä välilehdessä ja avaa DNS-rekisterinpitäjäsi (paikka, josta ostit verkkotunnuksesi) toisella sivustolla. Jos käytät jotakin seuraavista rekisteröijistä, linkit, joiden avulla ymmärrät, miten nimipalvelinta muutetaan, ovat:

  1. Iso kivi
  2. Namecheap
  3. Hyvä isä

Sinun on korvattava nykyiset nimipalvelimet toimialueesi asetuksissa Cloudflare-sivulla olevilla, jotka ovat auki toisella välilehdellä.

YASSS! Olet määrittänyt mukautetun verkkotunnuksesi käyttämään Cloudflarea DNS-palveluntarjoajana. Voit siirtyä yläosassa olevaan Yleiskatsaus- vaihtoehtoon ja huomaat, että se odottaa edelleen nimipalvelimen muutoksen käsittelyä.

Kun Yleiskatsaus- välilehdessä lukee Tila: aktiivinen ,voit nyt yrittää käydä sivustollasi käyttämällä omaa verkkotunnustasi, JA SEN PITÄISI TOIMINTAA ! ??

Vaihe 8: Määritä pienentäminen

Vuonna Speed setttings, että auto Pienennä -kohdasta vaihtoehto automaattinen Pienennä kaikki: Javascript, CSS, HTML. Tämän tekee Cloudflare lennossa kerran ja tallentaa sen sitten välimuistiin. Aina kun joku omaisuudestasi muuttuu, Cloudflare tekee sen uudelleen puolestasi.

Pienentämisen etuna on, että selaimeesi toimitettavan tiedoston koko on paljon pienempi, koska se poistaa tarpeettomat tilat ja kommentit.

Vaihe 9: Määritä selaimen välimuistin vanhentuminen

Jos vierität alas samalla sivulla kuin Automaattinen pienennys , löydät Selaimen välimuistin vanhentuminen -osan. Sen pitäisi olla 30 päivää / 1 kuukausi, mieluiten, jotta WebpageTest ei anna sinulle varoitusta. Tämä aika osoittaa, että kun sivustosi on ladattu mihin tahansa selaimeen, selain ei pyydä mitään resursseja toisen kerran, ennen kuin selaimen välimuistin aikajakso on kulunut kyseisille omaisuuserille.

Ennen kuin siirrymme seuraavaan vaiheeseen, tarkista Cloudflaren salausasetukset . Siinä pitäisi lukea Aktiivinen Todistus on SSL osiossa. ( Huomaa: Yritä ladata sivu uudelleen. Joskus se ei päivity ). Seuraavissa kahdessa vaiheessa saatamme sivustosi palvelemaan aina HTTPS: n kautta . Jotta se toimisi ongelmitta, on tärkeää, että sinulla on aktiivinen varmenne Cloudflaressa.

Vaihe 10: Määritä sivusäännöt

Tässä vaiheessa aiomme tehdä kaksi asiaa:

  1. Ohjata kaikki pyynnöt www.yourcustomdomain.com jotta yourcustomdomain.com
  2. Ohjaa kaikki //omaverkkotunnus.fi-pyynnöt osoitteeseen //omaverkkotunnus.com

Siirry Sivusäännöt- asetukseen ja napsauta Luo sivusääntö.

Käsittelystä www.yourcustomdomain.com on yourcustomdomain.com uudelleenohjaus, vaihda tweetify.io kanssa yourcustomdomain.com nimi. Napsauta Tallenna ja ota käyttöön .

Korvaa tweetify.io omalla verkkotunnuksellasi.com -nimellä, kun haluat käsitellä //omaverkkotunnus.com - //omaverkkotunnus.com-uudelleenohjausta . Napsauta Tallenna ja ota käyttöön .

Vaihe 11: Määritä HSTS

Siirry Crypto asetuksia ja siirtymällä sen HTTP Strict Transport Security (HSTS) jakso. Napsauta Ota HSTS käyttöön . Tämä pyytää sinua tunnustamaan, että tiedät mitä olet tekemässä. Ennen kuin valitset ymmärrän , haluan kertoa sinulle, miksi tämä asetus on otettava käyttöön:

Jos käyttäjä on avannut verkkosivustosi aiemmin, siitä lähtien, kun käyttäjä yrittää käyttää verkkosivustoasi, hänet siirretään aina sivustosi HTTPS-versioon. Tämä tekee sivustostasi latautuvan hieman nopeammin seuraavilla käynneillä, koska HTTP-HTTPS-uudelleenohjaus tapahtuu asiakkaalla eikä Cloudflare-sivusäännön kautta, jonka lisäsimme vaiheessa 10.

Kun siirryt seuraavaan vaiheeseen, ota kaikki asetukset käyttöön alla olevan kuvan mukaisesti. Voit lukea lisätietoja näistä vaihtoehdoista täältä ja täältä

Se siitä. Olet valmis näyttämään verkkosivustosi maailmalle! ?? Jos pidit tästä hyödyllisenä, ole hyvä ja jaa se.

Karan Thakkar on Crowdfiren eturivin johtaja - sinun erittäin älykäs markkinoinnin sivutapasi . Hänen artikkelinsa on ollut aiemmin esillä Huffington Postissa. Hän haluaa kokeilla uusia tekniikoita vapaa-ajallaan ja on rakentanut Tweetifyn (React Native) ja Show My PR: n (käyttäen Golangia).

Muita hänen kirjoittamia artikkeleita:

Kuinka kasvoin 300 seuraajasta 5k: iin vain 3 viikossa

#GrowthHacking Twitter-tilini @Crowdfire Twitter Premier League -blogille blog.markgrowth.com Let's Encrypt Certbotin käyttäminen HTTPS: n saamiseksi Amazon EC2 NGINX -laatikkoon

Let's Encrypt on uusi varmentaja, joka tarjoaa ilmaisia ​​SSL-varmenteita (tiettyyn viikkorajaan saakka). Se… medium.freecodecamp.com