de Karan Thakkar

Un ghid ilustrat pentru configurarea site-ului dvs. web utilizând GitHub și Cloudflare

Un ghid ilustrat pentru configurarea site ului dvs web utilizand Github

Ar trebui să citiți acest lucru dacă …

  1. Doriți să configurați redirecționări personalizate sau altă configurație de server gratuit
  2. Vrei să îți faci site-ul pe HTTPS, dar nu știi de unde să începi
  3. Sunteți copleșit de cantitatea de alegeri disponibile (cum ar fi Netlify, Surge, BitBalloon, Acum)

De ce Github?

  1. Ușor de configurat și de început cu Github Pages
  2. Se instalează instant la apăsarea unui nou cod

De ce Cloudflare?

  1. Este gratis
  2. Vine cu suport pentru SSL (HTTPS). (Iată de ce contează HTTPS.)
  3. Gestionare DNS super simplă
  4. Abilitatea de a stabili expirarea memoriei cache a browserului pentru active
  5. Reduceți automat activele statice
  6. Reguli de pagină personalizate pentru configurarea redirecționărilor, HTTPS întotdeauna etc.
  7. HTTP2/SPDY pentru browsere acceptate
  8. Permite configurarea HSTS (HTTP Strict Transport Security)

Înainte de a începe, veți avea nevoie de câteva lucruri:

  1. A Cont Github
  2. A Cont Cloudflare
  3. Acces la un domeniu personalizat. O puteți cumpăra de la orice registrator de nume de domeniu, cum ar fi: Namecheap, Hai tăticu, Piatra Mare, etc.

Dacă toate acestea ți-au stârnit interesul, atunci să începem!

Pasul 1: Creați repo Github cu codul dvs.

1611261909 202 Un ghid ilustrat pentru configurarea site ului dvs web utilizand Github
Selectați opțiunea Site-ul proiectului pentru a incepe
  • Mergi la https://pages.github.com
  • Selectați opțiunea Site-ul proiectului pentru a găsi instrucțiunile despre cum să creați o pagină de bază de la zero sau o temă personalizată

Pasul 2. Configurați paginile Github pentru depozit

1611261909 367 Un ghid ilustrat pentru configurarea site ului dvs web utilizand Github
Mergi la Setări pentru depozitul dvs.
1611261910 8 Un ghid ilustrat pentru configurarea site ului dvs web utilizand Github
Alegeți să vă difuzați site-ul web din maestru ramură

Mergi la Setări pentru depozitul dvs. În Pagini Github secțiunea, alegeți maestru sucursală pentru a vă servi site-ul web. După ce ați făcut acest lucru, puteți merge la https: //eu> .githtub.io/repospentru a vă vedea site-ul în acțiune, așa cum se arată mai jos.

1611261910 663 Un ghid ilustrat pentru configurarea site ului dvs web utilizand Github

Pasul 3. Adăugați un domeniu personalizat

1611261911 989 Un ghid ilustrat pentru configurarea site ului dvs web utilizand Github
Adăugați un domeniu personalizat pentru site-ul dvs. web

Adăugați domeniul personalizat pe care l-ați cumpărat și salvați-l. Site-ul dvs. este acum gata cu propriul domeniu personalizat? WOOT! ✨

Deci, avem totul configurat pe Github. Vom începe cu configurarea Cloudflare pentru a-ți asculta site-ul web cu toate funcțiile puternice pe care le-am menționat la începutul acestei postări.

Pasul 4: configurați-vă domeniul pe Cloudflare

1611261911 318 Un ghid ilustrat pentru configurarea site ului dvs web utilizand Github

Conectați la Cloudflare. Dacă îl utilizați pentru prima dată, ar trebui să vedeți un ecran ca imaginea de mai sus. Dacă l-ați folosit anterior, puteți face clic pe Adăugați un site opțiune din bara de navigare din dreapta sus pentru a adăuga un domeniu nou. Introduceți domeniul pe care doriți să îl gestionați și faceți clic pe Începeți scanarea.

Pasul 5: configurați înregistrările DNS pentru domeniul dvs.

1611261912 886 Un ghid ilustrat pentru configurarea site ului dvs web utilizand Github
1611261912 522 Un ghid ilustrat pentru configurarea site ului dvs web utilizand Github
Stânga: Configurați înregistrări DNS pentru domeniul apex. Este notat cu @. Dreapta: Lista de înregistrări DNS finale

În acest pas, informăm Cloudflare să ne îndrepte domeniul spre Server Github Pages folosind două O înregistrare Intrări DNS:
1. 192.30.252.153
2. 192.30.252.154

După ce ați configurat acest lucru, toate solicitările către domeniul dvs. personalizat, adică yourcustomdomain.com va fi direcționat către site-ul dvs. web pe Github pe Pasul 3.

Mai este un pas implicat înainte de a trece la etapa următoare. Adesea, ați dori să utilizați un subdomeniu de genul www pentru site-ul dvs., adică www.yourcustomdomain.com Pentru aceasta, va trebui să adăugați un Înregistrare CNAME Intrare DNS care vă va îndrepta subdomeniul (www) către domeniul dvs. apex (@).

După ce ați configurat acest lucru, toate solicitările către subdomeniul dvs. personalizat, adică www.yourcustomdomain.com va fi direcționat către site-ul dvs. web pe Github pe Pasul 3.

NOTĂ: Nu încercați să accesați imediat domeniul personalizat. Nu va funcționa. Am făcut doar configurarea Cloudflare către Github. Încă trebuie să facem Registratorul DNS -> Configurare Cloudflare. Acest lucru va apărea în Pas 7.

Clic Continua pentru a trece la pasul următor.

Pasul 6: alegeți planul Cloudflare gratuit

1611261912 966 Un ghid ilustrat pentru configurarea site ului dvs web utilizand Github

Planul gratuit pentru Cloudflare oferă o mulțime de opțiuni sofisticate, așa cum este discutat în De ce Cloudflare? secțiune la început.

Clic Continua pentru a trece la pasul următor.

Pasul 7: Actualizați serverele de nume pe registratorul dvs. DNS

1611261913 231 Un ghid ilustrat pentru configurarea site ului dvs web utilizand Github
Copiați aceste două servere de nume evidențiate în setările serverului de nume al registratorului DNS

Odată ce ați ajuns pe această pagină, păstrați-o deschisă într-o filă și deschideți site-ul dvs. Registrator DNS (locul de unde ați cumpărat domeniul dvs.) în altul. Dacă utilizați unul dintre următorii agenți de înregistrare, linkurile pentru a înțelege cum să schimbați serverul de nume sunt:

  1. Piatra Mare
  2. Namecheap
  3. Hai tăticu

Trebuie să înlocuiți serverele de nume existente în setările domeniului dvs. cu cel de pe pagina Cloudflare care este deschisă în cealaltă filă.

1611261913 402 Un ghid ilustrat pentru configurarea site ului dvs web utilizand Github
1611261914 834 Un ghid ilustrat pentru configurarea site ului dvs web utilizand Github
Un exemplu despre cum ar arăta după ce v-ați actualizat setările pentru Nameerver în registratorul DNS

YASSS! Ați configurat cu succes domeniul dvs. personalizat pentru a utiliza Cloudflare ca furnizor DNS. Puteți merge la Prezentare generală opțiunea din partea de sus și veți descoperi că așteaptă în continuare procesarea modificării serverului de nume.

1611261914 556 Un ghid ilustrat pentru configurarea site ului dvs web utilizand Github
1611261915 707 Un ghid ilustrat pentru configurarea site ului dvs web utilizand Github
Stânga: Modificarea serverului de nume este încă procesată. Dreapta: Modificarea serverului de nume este procesată !!

Odata ce Prezentare generală fila spune Stare: activ, acum puteți încerca să vizitați site-ul dvs. folosind domeniul dvs. personalizat, ȘI TREBUIE SĂ FUNCȚIONeze! ??

Pasul 8: Configurați Minificarea

1611261915 719 Un ghid ilustrat pentru configurarea site ului dvs web utilizand Github

În Viteză setări, în Auto Minify secțiune, alegeți opțiunea de a minimiza automat totul: Javascript, CSS, HTML. Acest lucru va fi realizat de Cloudflare on-the-fly o dată și apoi în cache. Ori de câte ori se modifică oricare dintre activele dvs., Cloudflare va face din nou acest lucru pentru dvs.

Avantajul minimizării este că dimensiunea fișierului livrat browserului dvs. este mult mai mică, deoarece elimină spațiile și comentariile nedorite.

Pasul 9: Configurați expirarea cache-ului browserului

1611261915 232 Un ghid ilustrat pentru configurarea site ului dvs web utilizand Github
Expirarea memoriei cache a fost setată la 1 lună

Dacă derulați în jos pe aceeași pagină ca Auto Minify, veți găsi Expirarea cache-ului browserului secțiune. Ar trebui să fie setat la 30 de zile / 1 lună, în mod ideal, pentru WebpageTest să nu vă dau un avertisment. Ceea ce indică acest timp este că, odată ce site-ul dvs. este încărcat în orice browser, browserul nu va solicita niciun material pentru a doua oară până când expiră perioada de cache a browserului pentru respectivele materiale.

1611261916 788 Un ghid ilustrat pentru configurarea site ului dvs web utilizand Github
Exemplu: iphone.png imaginea se încarcă de pe serverul dvs. pentru prima dată (22,3 KB în 349 ms) Toate cererile ulterioare de a prelua resursa respectivă sunt servite din memoria cache a discului, ceea ce înseamnă că este aproape instantaneu disponibil (în 5 ms)

Înainte de a trece la pasul următor, vă rugăm să verificați Crypto setări pe Cloudflare. Ar trebui să spună Certificat activ în SSL secțiune. (Notă: Încercați să reîncărcați pagina. Uneori nu se actualizează). În următorii doi pași, vom face site-ul dvs. să fie difuzat prin HTTPS mereu. Pentru ca acest lucru să funcționeze fără probleme, este important să aveți un certificat activ pe Cloudflare.

1611261916 549 Un ghid ilustrat pentru configurarea site ului dvs web utilizand Github
1611261917 687 Un ghid ilustrat pentru configurarea site ului dvs web utilizand Github
Se afișează secțiunea SSL Certificat de autorizare după ce modificările serverului de nume au fost procesate. După ce a fost emis un certificat SSL pentru dvs., acest mesaj se va schimba în Certificat activ.

Pasul 10: Configurați regulile paginii

În acest pas, vom face două lucruri:

  1. Redirecționați toate cererile pentru www.yourcustomdomain.com la yourcustomdomain.com
  2. Redirecționați toate cererile pentru http://yourcustomdomain.com la https://yourcustomdomain.com

Du-te la Regulile paginii setare și faceți clic pe Creați o regulă de pagină.

1611261917 881 Un ghid ilustrat pentru configurarea site ului dvs web utilizand Github

Pentru manipularea www.yourcustomdomain.com la yourcustomdomain.com redirecționează, înlocuiește tweetify.io cu yourcustomdomain.com Nume. Clic Salvați și implementați.

1611261918 603 Un ghid ilustrat pentru configurarea site ului dvs web utilizand Github

Pentru manipularea http://yourcustomdomain.com la https://yourcustomdomain.com redirecționează, înlocuiește tweetify.io cu yourcustomdomain.com Nume. Clic Salvați și implementați.

1611261918 682 Un ghid ilustrat pentru configurarea site ului dvs web utilizand Github

Pasul 11: Configurați HSTS

1611261918 273 Un ghid ilustrat pentru configurarea site ului dvs web utilizand Github

Du-te la Crypto setări și derulați în jos până la HTTP Strict Transport Security (HSTS) secțiune. Click pe Activați HSTS. Acest lucru vă va cere să recunoașteți că știți ce faceți. Înainte de a selecta Înțeleg, permiteți-mi să vă spun de ce trebuie să activăm această setare:

Dacă un utilizator a deschis site-ul dvs. web în trecut, de atunci încolo ori de câte ori utilizatorul încearcă să vă acceseze site-ul, acesta va fi mereu condus la versiunea HTTPS a site-ului dvs. Acest lucru face ca site-ul dvs. să se încarce puțin mai rapid la vizitele ulterioare, deoarece redirecționarea HTTP către HTTPS are loc pe client și nu prin intermediul regulii de pagină Cloudflare pe care am adăugat-o la pasul 10.

Odată ce treceți la pasul următor, ar trebui să activați toate setările așa cum se arată mai jos. Puteți citi mai multe detalii despre aceste opțiuni aici și aici

1611261919 336 Un ghid ilustrat pentru configurarea site ului dvs web utilizand Github
Captură de ecran a setărilor HSTS în Cloudflare
1611261919 811 Un ghid ilustrat pentru configurarea site ului dvs web utilizand Github
Anteturile care sunt adăugate de Cloudflare la solicitările pentru domeniul dvs. după ce ați configurat HSTS așa cum se arată mai sus

Asta e. Sunteți gata să vă arătați site-ul web lumii! ?? Dacă ți s-a părut util acest lucru, te rog ❤️ și împărtășește-l.

1611261920 92 Un ghid ilustrat pentru configurarea site ului dvs web utilizand Github

Karan Thakkar este liderul frontendului la Crowdfire – Colegul tău de marketing super-inteligent. A lui articol a fost anterior Recomandate pe The Huffington Post. Îi place să încerce noi tehnologii în timpul liber și a construit Tweetify (folosind React Native) și Afișați PR-urile mele (folosind Golang).

Alte articole scrise de el:

Cum am crescut de la 300 la 5k adepți în doar 3 săptămâni
#GrowthHacking contul meu Twitter pentru @Crowdfire Twitter Premier Leagueblog.markgrowth.comFolosind Let’s Encrypt Certbot pentru a obține HTTPS pe caseta dvs. Amazon EC2 NGINX
Let’s Encrypt este o nouă autoritate de certificare care oferă certificate SSL gratuite (până la o anumită limită pe săptămână). Aceasta…medium.freecodecamp.com