En illustreret guide til opsætning af dit websted ved hjælp af Github & Cloudflare

Du bør læse dette, hvis ...

  1. Du vil konfigurere brugerdefinerede omdirigeringer eller anden serverkonfiguration gratis
  2. Du vil hente dit websted på HTTPS, men ved ikke, hvor du skal starte
  3. Du er overvældet af mængden af ​​valg derude (som Netlify, Surge, BitBalloon, Now)

Hvorfor Github?

  1. Let at konfigurere og komme i gang med Github Pages
  2. Øjeblikkelig implementering ved at skubbe ny kode

Hvorfor Cloudflare?

  1. Det er gratis
  2. Den leveres med out-of-the-box support til SSL (HTTPS). (Her er grunden til, at HTTPS betyder noget.)
  3. Super simpel DNS-styring
  4. Evne til at indstille browserens cacheudløb for aktiver
  5. Minificer automatisk dine statiske aktiver
  6. Tilpassede sideregler til opsætning af omdirigeringer, altid HTTPS osv.
  7. HTTP2 / SPDY til understøttede browsere
  8. Tillader opsætning af HSTS (HTTP Strict Transport Security)

Før vi kommer i gang, har du brug for et par ting:

  1. En Github-konto
  2. En Cloudflare-konto
  3. Adgang til et brugerdefineret domæne. Du kan købe det fra enhver domænenavnsregistrator som: Namecheap, GoDaddy, BigRock osv.

Hvis alt dette vakte din interesse, så lad os komme i gang!

Trin 1 : Opret Github repo med din kode

  • Gå til //pages.github.com
  • Vælg indstillingen Project Site for at finde instruktionerne om, hvordan du opretter en grundlæggende side fra bunden eller et brugerdefineret tema

Trin 2. Opsæt Github-sider til lageret

Gå til Indstillinger for dit arkiv. I Github Sider sektionen, skal du vælge mester gren for at tjene din hjemmeside fra. Når du har gjort det, kan du gå til // mig> .gith u b.io/repo s teori om at se dit websted i aktion som vist nedenfor.

Trin 3. Tilføj tilpasset domæne

Tilføj det brugerdefinerede domæne, du har købt, og gem det. Dit websted er nu klar med dit eget brugerdefinerede domæne? WOOT! ✨

Så vi har alt opsat på Github. Vi starter med at oprette Cloudflare til at jazz op dit websted med alle de kraftfulde funktioner, jeg nævnte i begyndelsen af ​​dette indlæg.

Trin 4: Konfigurer dit domæne på Cloudflare

Log ind på Cloudflare. Hvis du bruger det for første gang, skal du se en skærm som billedet vist ovenfor. Hvis du har brugt det før, kan du klikke på indstillingen Tilføj websted i navigationslinjen øverst til højre for at tilføje et nyt domæne. Indtast det domæne, du vil administrere, og klik på Start scanning .

Trin 5: Konfigurer DNS-poster for dit domæne

I dette trin informerer vi Cloudflare om at pege vores domæne til Github Pages-serveren ved hjælp af to A-registrerede DNS-poster:

1. 192.30.252.153

2. 192.30.252.154

Når du har indstillet dette, vil alle anmodninger til dit brugerdefinerede domæne, dvs. dit eget tilpassede domæne.com , blive dirigeret til dit websted på Github i trin 3 .

Der er endnu et trin involveret, inden vi går videre til næste trin. Ofte vil du bruge et underdomæne som www til dit websted, dvs. www.yourcustomdomain.com Til dette skal du tilføje en CNAME-post DNS-post, som peger dit underdomæne (www) til dit apex-domæne (@).

Når du har konfigureret dette, alle anmodninger til dit brugerdefinerede underdomæne, dvs. www. yourcustomdomain.com dirigeres til dit websted på Github i trin 3 .

BEMÆRK: Forsøg ikke at gå til dit tilpassede domæne med det samme. Det fungerer ikke. Vi har kun gjort Cloudflare til Github-opsætningen. Vi skal stadig udføre DNS-registrator -> Cloudflare-opsætning. Dette vil komme op i trin 7.

Klik på Fortsæt for at gå til næste trin.

Trin 6: Vælg den gratis Cloudflare-plan

Den gratis plan for Cloudflare giver mange sofistikerede muligheder, som diskuteret i Why Cloudflare? sektion i begyndelsen.

Klik på Fortsæt for at gå til næste trin.

Trin 7: Opdater navneservere på din DNS-registrator

Når du er på denne side, skal du holde den åben i en fane og åbne din DNS-registrators (det sted, hvorfra du købte dit domæne) -site op i en anden. Hvis du bruger en af ​​følgende registratorer, er linkene til at forstå, hvordan du ændrer Nameserver:

  1. Bigrock
  2. Namecheap
  3. Kom så far

Du skal erstatte de eksisterende navneservere i dine domæneindstillinger med dem, der er på Cloudflare-siden, der er åben i den anden fane.

YASSS! Du har med succes opsat dit brugerdefinerede domæne til at bruge Cloudflare som en DNS-udbyder. Du kan gå til oversigtsindstillingen øverst, og du vil opdage, at den stadig venter på, at din navneserverændring skal behandles.

Når fanen Oversigt siger Status: Aktiv ,du kan nu prøve at besøge dit websted ved hjælp af dit brugerdefinerede domæne, OG DET SKAL BARE VIRKE ! ??

Trin 8: Konfigurer minifikation

I indstillingerne for hastighed skal du i afsnittet Automatisk minificering vælge indstillingen til automatisk minificering af alt: Javascript, CSS, HTML. Dette gøres af Cloudflare on-the-fly en gang og derefter cachet. Når nogen af ​​dine aktiver ændres, vil Cloudflare gøre dette igen for dig.

Fordelen ved minificering er, at størrelsen på filen, der leveres til din browser, er meget mindre, da den fjerner uønskede mellemrum og kommentarer.

Trin 9: Konfigurer udløb af browsercache

Hvis du ruller ned på den samme side som Auto Minify , finder du afsnittet Browser- cacheudløb . Det skal indstilles til 30 dage / 1 måned, ideelt set for at WebpageTest ikke giver dig en advarsel. Hvad denne gang indikerer, er at når dit websted er indlæst i en vilkårlig browser, vil browseren ikke anmode om aktiver for anden gang, før tidsperioden for browsercache udløber for disse aktiver.

Inden vi går videre til næste trin, skal du kontrollere Crypto- indstillingerne på Cloudflare. Det skal sige Aktivt certifikat i SSL- sektionen. ( Bemærk: Prøv at genindlæse siden. Nogle gange opdateres den ikke ). I de næste to trin vil vi altid få dit websted til at fungere via HTTPS . For at det skal fungere uden problemer, er det vigtigt, at du har et aktivt certifikat på Cloudflare.

Trin 10: Konfigurer sideregler

I dette trin vil vi gøre to ting:

  1. Omdiriger alle anmodninger om www.yourcustomdomain.com til yourcustomdomain.com
  2. Omdiriger alle anmodninger om //ditkundedomæne.dk til // dinertilpasset domæne.com

Gå til side Regler indstilling og klik på Opret side Regel.

For at håndtere www.yourcustomdomain.com til yourcustomdomain.com omdirigering, skal du erstatte tweetify.io med dit customdomain.com navn. Klik på Gem og implementer .

For håndtering af omdirigering //ditkundedomæne.com til //ditdommedom.dk.com skal du udskifte tweetify.io med dit navn. Klik på Gem og implementer .

Trin 11: Konfigurer HSTS

Gå til Crypto- indstillingerne, og rul ned til sektionen HTTP Strict Transport Security (HSTS) . Klik på Aktiver HSTS . Dette vil bede dig om at anerkende, at du ved, hvad du laver. Inden du vælger Jeg forstår , lad mig fortælle dig, hvorfor vi skal aktivere denne indstilling:

Hvis en bruger tidligere har åbnet dit websted, fra og med derefter, når brugeren forsøger at få adgang til dit websted, føres de altid til HTTPS-versionen af ​​dit websted. Dette får dit websted til at indlæse lidt hurtigere ved efterfølgende besøg, fordi HTTP til HTTPS-omdirigering sker på klienten og ikke via Cloudflare Page Rule, som vi tilføjede i trin 10.

Når du går til næste trin, skal du aktivere alle indstillinger som vist nedenfor. Du kan læse flere detaljer om disse muligheder her og her

Det er det. Du er klar til at vise dit websted til verden! ?? Hvis du fandt dette nyttigt, bedes du ❤️ det og dele det.

Karan Thakkar er Frontend Lead hos Crowdfire - Din supersmarte marketingmedarbejder . Hans artikel har tidligere været omtalt på The Huffington Post. Han kan godt lide at prøve nye teknologier i sin fritid og har bygget Tweetify (ved hjælp af React Native) og Show My PR's (ved hjælp af Golang).

Andre artikler skrevet af ham:

Hvordan jeg voksede fra 300 til 5.000 tilhængere på kun 3 uger

#GrowthHacking min Twitter-konto til @Crowdfire Twitter Premier League blog.markgrowth.com Brug af Let's Encrypt Certbot til at få HTTPS på din Amazon EC2 NGINX-boks

Lad os kryptere er en ny certifikatmyndighed, der leverer gratis SSL-certifikater (op til en bestemt grænse pr. Uge). Det ... medium.freecodecamp.com