Illustreeritud juhend oma veebisaidi seadistamiseks Githubi ja Cloudflare'i abil

Peaksite seda lugema, kui…

  1. Soovite seadistada kohandatud ümbersuunamisi või muud serveri konfiguratsiooni tasuta
  2. Tahate oma saidi saada HTTPS-i, kuid ei tea, kust alustada
  3. Teid valdavad valikud (nt Netlify, Surge, BitBalloon, Now)

Miks just Github?

  1. Githubi lehtede abil on lihtne seadistada ja sellega alustada
  2. Kiire juurutab uue koodi sisestamist

Miks Cloudflare?

  1. See on tasuta
  2. See on varustatud SSL-i (HTTPS) toega. (Sellepärast on HTTPS oluline.)
  3. Ülilihtne DNS-i haldamine
  4. Võimalus seada varade brauseri vahemälu aegumine
  5. Minimeerige oma staatilised varad automaatselt
  6. Kohandatud lehereeglid ümbersuunamiste seadistamiseks, alati HTTPS jne.
  7. HTTP2 / SPDY toetatud brauserite jaoks
  8. Võimaldab seadistada HSTS-i (HTTP range transport Security)

Enne alustamist vajate mõnda asja:

  1. Githubi konto
  2. Cloudflare'i konto
  3. Juurdepääs kohandatud domeenile. Selle saate osta igalt domeeninime registripidajalt: Namecheap, GoDaddy, BigRock jne.

Kui see kõik äratas teie huvi, siis alustame!

1. samm : looge oma koodiga Githubi repo

  • Minge saidile //pages.github.com
  • Valige suvand Projektisait, et leida juhised põhilehe loomiseks nullist või kohandatud teemast

Samm 2. Seadistage hoidla Githubi lehed

Avage oma hoidla seaded . Aastal Github Pages Valige jaotises kapten filiaali teenida oma kodulehel. Kui olete selle teinud, võite minna aadressile // mina> .sõlm u b.io/repo s itory näha oma veebisaidi tegevuses, nagu allpool näidatud.

Samm 3. Lisage kohandatud domeen

Lisage ostetud kohandatud domeen ja salvestage see. Teie veebisait on nüüd valmis teie enda kohandatud domeeniga? WOOT! ✨

Nii et meil on kõik Githubis seadistatud. Alustame Cloudflare'i seadistamisega teie veebisaidi džässimiseks kõigi võimsate funktsioonidega, mida mainisin selle postituse alguses.

4. samm: seadistage oma domeen Cloudflare'is

Logige sisse Cloudflare'i. Kui kasutate seda esimest korda, peaksite nägema ekraani nagu ülaltoodud pilt. Kui olete seda varem kasutanud, saate uue domeeni lisamiseks klõpsata paremas ülanurgas oleval navigeerimisribal suvandil Lisa sait . Sisestage hallatav domeen ja klõpsake nuppu Alusta skannimist .

5. samm: seadistage oma domeeni DNS-kirjed

Selles etapis teavitame Cloudflare'i suunama oma domeeni Github Pages'i serverisse, kasutades kahte A Recordi DNS-kirjet:

1. 1922.30.252.153

2. 1922.30.252.154

Kui olete selle seadistamise kõik taotlused oma kohandatud domeeni st yourcustomdomain.com suunatakse oma kodulehel Github kohta 3. etapp .

Enne järgmisse etappi liikumist on veel üks samm ette nähtud. Sageli soovite oma veebisaidi jaoks kasutada sellist alamdomeeni nagu www , st www.yourcustomdomain.com. Selleks peate lisama CNAME-kirje DNS-i kirje, mis suunab teie alamdomeeni (www) oma tipudomeeni (@).

Kui olete selle seadistanud, kõik taotlused teie kohandatud alamdomeenile, st www. yourcustomdomain.com suunatakse oma kodulehel Github kohta 3. etapp .

MÄRKUS. Ärge proovige oma kohandatud domeenile kohe juurde pääseda. See ei toimi. Oleme seadistanud ainult Cloudflare Githubisse. Peame ikkagi tegema DNS-i registripidaja -> Cloudflare'i seadistuse. See selgub 7. etapis .

Järgmisele sammule liikumiseks klõpsake nuppu Jätka .

6. samm: valige Free Cloudflare'i plaan

Cloudflare'i tasuta plaan pakub palju keerukaid valikuid, mida käsitletakse Miks Cloudflare? alguses.

Järgmisele sammule liikumiseks klõpsake nuppu Jätka .

7. samm: värskendage oma DNS-registripidaja nimeservereid

Kui olete sellel lehel, hoidke seda ühel vahekaardil avatuna ja avage oma DNS-registripidaja (koht, kust oma domeeni ostsite) sait teises. Kui kasutate ühte järgmistest registripidajatest, on linke nimeserveri muutmiseks:

  1. Bigrock
  2. Namecheap
  3. GoDaddy

Peate oma domeeni seadetes olemasolevad nimeserverid asendama lehel Cloudflare asuvatega, mis on avatud teisel vahekaardil.

YASSS! Olete edukalt seadistanud oma kohandatud domeeni Cloudflare'i kasutamiseks DNS-i pakkujana. Võite minna ülaosas olevale suvandile Ülevaade ja leiate, et see ootab endiselt teie nimeserveri muudatuse töötlemist.

Kui vahekaardil Ülevaade on olek: aktiivne ,võite nüüd proovida oma saiti külastada oma kohandatud domeeni abil, JA PEAB PÕHJALT TÖÖTAMA ! ??

8. samm: seadistage minimeerimine

Valige jaotises Kiiruse sätted jaotises Automaatne minimeerimine automaatne minimeerimine : Javascript, CSS, HTML. Seda teeb Cloudflare üks kord lennult ja seejärel vahemällu. Kui mõni teie varadest muutub, teeb Cloudflare seda teie eest uuesti.

Minimeerimise eeliseks on see, et teie brauserisse edastatud faili suurus on palju väiksem, kuna see eemaldab soovimatud tühikud ja kommentaarid.

9. samm: konfigureerige brauseri vahemälu aegumine

Kui kerite samal lehel automaatse minimeerimisega alla , leiate jaotise Brauseri vahemälu aegumine . Ideaalis peaks see olema 30 päeva / 1 kuu, et WebpageTest teile hoiatust ei annaks. See aeg viitab sellele, et kui teie sait on mis tahes brauserisse laaditud, siis ei nõua brauser teist korda varasid enne, kui nende varade jaoks on brauseri vahemälu aegunud.

Enne astume järgmise sammu, siis kontrollige Crypto seaded CloudFlare. Tuleb öelda Active tunnistus on SSL sektsioonis. ( Märkus. Proovige leht uuesti laadida. Mõnikord seda ei värskendata ). Järgmises kahes etapis paneme teie saidi alati HTTPS-i kaudu toimima . Et see probleemideta töötaks, on oluline, et teil oleks Cloudflare'is aktiivne sertifikaat.

10. samm: konfigureerige lehereeglid

Selles etapis teeme kahte asja:

  1. Suuna kõik saidi www.yourcustomdomain.com taotlused saidile yourcustomdomain.com
  2. Suuna kõik taotlused //yourcustomdomain.com et //yourcustomdomain.com

Minge jaotisse Lehereeglid ja klõpsake nuppu Loo lehereegel.

Käitlemise www.yourcustomdomain.com et yourcustomdomain.com ümbersuunamise asendada tweetify.io koos yourcustomdomain.com nimi. Klõpsake nuppu Salvesta ja juuruta .

Käitlemise //yourcustomdomain.com et //yourcustomdomain.com ümbersuunamise asendada tweetify.io koos yourcustomdomain.com nimi. Klõpsake nuppu Salvesta ja juuruta .

11. samm: konfigureerige HSTS

Minge krüptoseadetesse ja kerige alla jaotiseni HTTP range transport Security (HSTS) . Klõpsake käsul Luba HSTS . See palub teil kinnitada, et teate, mida teete. Enne kui valite Mõistan , lubage mul öelda, miks peame selle seade lubama:

Kui kasutaja on teie veebisaidi varem avanud, siis alati, kui kasutaja üritab teie veebisaidile juurde pääseda, suunatakse ta alati teie saidi HTTPS-i versiooni. See muudab teie saidi järgmistel külastustel veidi kiiremaks laadimiseks, kuna HTTP-HTTPS-i ümbersuunamine toimub kliendis, mitte 10. sammus lisatud Cloudflare'i lehereegli kaudu.

Kui olete järgmisele sammule läinud, peaksite lubama kõik seaded, nagu allpool näidatud. Nende valikute kohta saate üksikasju lugeda siit ja siit

See selleks. Kõik on valmis oma veebisaiti kogu maailmale näitama! ?? Kui leiate, et see on kasulik, siis palun ❤️ ja jagage seda.

Karan Thakkar on Crowdfire'i eesliider - teie ülitark turunduse kõrvalhoidja . Tema artiklit on varem kajastatud ajalehes The Huffington Post. Talle meeldib vabal ajal uusi tehnoloogiaid proovida ning ta on loonud Tweetify (kasutades React Native) ja Show My PR-sid (kasutades Golangi).

Muud tema kirjutatud artiklid:

Kuidas ma kasvasin vaid 3 nädalaga 300 jälgijalt 5 tuhandele

#GrowthHacking minu Twitteri konto @Crowdfire Twitteri kõrgliigas blog.markgrowth.com HTTPS-i saamiseks krüptime Certboti, et saada oma Amazon EC2 NGINX-i kast

Let's Encrypt on uus sertifikaadiasutus, mis pakub tasuta SSL-sertifikaate (kuni teatud piirini nädalas). See ... medium.freecodecamp.com