Cloudflare pages használata

A Cloudflare Pages egy ingyenes és könnyen használható statikus weboldal hosting szolgáltatás, amely kihasználja a Cloudflare globális tartalomszolgáltató hálózatát (CDN), aminek segítségével az oldal tartalma közel kerül a felhasználókhoz. Ez azt jelenti, hogy a weboldal gyorsabban töltődik be függetlenül attól, hogy a látogatók melyik földrajzi helyről érik el azt.

Előfeltételek

• GitHub fiók (a projektnek a GitHub-on kell lennie)
• Egy statikus oldal készítve, például HTML/CSS, vagy egy modern webfejlesztési keretrendszerrel (React, Vue, Svelte stb.)

1. Lépés: Regisztrálás a Cloudflare oldalára

1. Látogasd meg a Cloudflare weboldalát és regisztrálj egy fiókot, ha még nincs.
2. A bejelentkezést követően navigálj a Cloudflare Pages oldalra a vezérlőpulton keresztül, vagy közvetlenül a Cloudflare Pages URL-en.

2. Lépés: Új projekt létrehozása

1. A Cloudflare Pages felületén kattints az “Create a project” gombra.

2. Itt a rendszer bekéri, hogy csatlakozz a GitHub fiókodhoz. Ezt azért kéri, mert a Cloudflare Pages közvetlenül a GitHub repóból fogja deploy-olni a weboldalt.

   • Válaszd ki a megfelelő GitHub fiókot, és engedélyezd a Cloudflare számára a szükséges hozzáféréseket.

3. A csatlakozás után kiválaszthatod azt a GitHub repository-t, amely tartalmazza a weboldal forráskódját.

   • Keresd meg a repót a listában, majd kattints a Begin setup gombra.

3. Lépés: Konfigurálás

1. Miután kiválasztottad a GitHub repository-t, a Cloudflare Pages felajánlja, hogy beállítsd a projekt konfigurációit. Az alapvető beállítások közé tartozik a branch kiválasztása (általában main), valamint a build-elési beállítások.

2. Ha a projekt statikus, mint például egy egyszerű HTML/CSS oldal, nincs szükség build parancsokra. Azonban, ha valamilyen keretrendszert használ (React, Vue, Svelte stb.), akkor a megfelelő build és output parancsokat kell megadni:

   • Build Command: Például egy React projektnél: npm run build vagy yarn build.
   • Build Output Directory: Általában a dist vagy build mappa, ahová a build folyamat az összegyúrt fájlokat helyezi.

3. Ha minden helyesen van beállítva, kattints a Save and Deploy gombra.

4. Lépés: A weboldal telepítése

A Cloudflare automatikusan elindítja a build folyamatot és deploy-olja az oldalt. Ez magában foglalja:

• A forráskód letöltését a GitHub repóból.
• Az esetleges build parancsok lefuttatását (ha megadtad).
• Az oldal deploy-olását a Cloudflare CDN-en.

A build folyamat eltarthat néhány percig. Miután elkészült, a Cloudflare Pages felületén megjelenik az oldal URL-je, ami azonnal meg is látogatható.

5. Lépés: Egyéni domain beállítása (opcionális)

1. Lépj a Custom Domains fülre a Cloudflare Pages felületén.
2. Add meg az egyéni domaint, amelyet használni szeretnél, majd kövesd a DNS-beállításokra vonatkozó útmutatást.
3. Miután a DNS helyesen be van állítva, a Cloudflare Pages automatikusan alkalmazza az SSL tanúsítványokat, így a weboldal HTTPS kapcsolaton keresztül lesz elérhető.

6. Lépés: Automatikus telepítés (CI/CD)

A Cloudflare Pages automatikusan frissíti és újra deploy-olja az oldaladat minden egyes GitHub commit után. Ha például új változtatásokat push-olsz a GitHub repository-ba, a Cloudflare Pages újrabuildeli és újra deploy-olja a weboldalt.