Sådan laver du en statisk hjemmeside på Cloudflare Workers Sites

Hej! Jeg hedder Dima, jeg er tech lead for SysOps-teamet hos Wrike. I denne artikel vil jeg forklare, hvordan du kan oprette en brugerorienteret hjemmeside på kun 10 minutter og for 5 dollars om måneden, og automatisere dens deployment. Artiklen har næsten intet at gøre med de problemer, vi løser internt i vores team. Det er snarere mine personlige erfaringer og indtryk af at introducere en ny teknologi for mig. Jeg har forsøgt at beskrive trinnene så grundigt som muligt, så vejledningen bliver nyttig for folk med forskelligt erfaringsniveau. Jeg håber, du vil kunne lide den. Lad os komme i gang!

Så, måske har du allerede fundet en nem og billig måde at hoste din hjemmeside på. Måske endda gratis, som beskrevet i denne fabulous artikel.

Men hvad nu hvis du stadig keder dig og gerne vil berøre den vidunderlige nye verden af teknologier? For eksempel, hvis du overvejer automatisering af deployment, og gerne vil maksimere dit hjemmesides hastighed? I denne artikel vil vi bruge Hugo, men det er ikke nødvendigt.

Til automatisering bruger vi Gitlab CI/CD, men hvad med hastigheden? Lad os deployere hjemmesiden direkte på Cloudflare ved hjælp af Worker Sites.

Hvad der kræves for at komme i gang:

• Gitlab (din egen eller cloud)

• Konto på Cloudflare

• Installeret nodejs/npm

Del 1: Installation af Hugo

Hvis du allerede har installeret Hugo, eller hvis du foretrækker en anden statisk site-generator (eller slet ikke bruger nogen), kan du springe dette afsnit over.

1. Download Hugo fra https://github.com/gohugoio/hugo/releases

2. Placer den udførbare fil Hugo i et af de definerede i PATH stier

3. Opret en ny hjemmeside: hugo new site blog.example.com

4. Skift den nuværende mappe til den nyoprettede: cd blog.example.com

5. Vælg et tema (https://github.com/budparr/gohugo-theme-ananke/releases eller hvad som helst)

6. Opret det første indlæg: hugo new posts/my-amazing-post.md

7. Tilføj indhold til den oprettede fil: content/posts/my-amazing-post.md.
   Når alt er gjort, skal du ændre værdien af draft til false

8. Generer statiske filer: hugo -D

Nu står vores statiske hjemmeside i mappen ./public og er klar til den første manuelle deployment.

Del 2: Konfigurering af Cloudflare

Lad os nu se på den indledende opsætning af Cloudflare. Antag, at vi allerede har et domæne til hjemmesiden. Lad os tage blog.example.com.

Trin 1: Opret en DNS-post

Først vælger vi vores domæne og derefter menupunktet DNS. Opret en A-post blog og angiv et eller andet fiktivt IP (dette er den officielle anbefaling, men de kunne have gjort det lidt pænere).

Trin 2: Cloudflare-token

1. Min profil -> API-tokens fane-> Opret token -> Opret brugerdefineret token

Her skal du begrænse token til specifikke konti og områder, men lade Rediger-muligheden være aktiv for de nævnte tilladelser på billedet.

Gem token til fremtidig brug, vi får brug for det i del tre.

Trin 3: Få accountid og zoneid

Domæne → Oversigt → [højre sidepanel]

Det er mine, brug dem ikke, vær venlig 🙂

Gem dem sammen med token, da de også vil være nødvendige i del tre.

Trin 4: Aktivering af Workers

Domæne → Workers → Administrer Workers

Vælg et unikt navn og Workers-plan → Ubegribelig ($5 om måneden i dag). Du kan til enhver tid skifte til den gratis version senere.

Del 3: Første deployment (manuelt deployment)

Jeg udførte den første deployment manuelt for at finde ud af, hvad der sker dér. Selvom alt dette også kan gøres lettere:

1. Installer wrangler: npm i @cloudflare/wrangler -g

2. Gå til mappen for vores blog: cd blog.example.com

3. Start wrangler: wrangler init — site hugo-worker

4. Opret konfig for wrangler (indtast token, når det bliver spurgt): wrangler config

Lad os nu prøve at foretage ændringer i den nyligt oprettede fil wrangler.toml (her komplet liste over mulige indstillinger):

1. Angiv accountid og zoneid

2. Skift rute til noget som *blog.example.com/*

3. Angiv false for workersdev

4. Skift bucket til ./{public (eller hvor dit statiske site ligger)

5. Hvis du har mere end ét domæne i stien, burde du rette stien i dit arbejdsscript: workers-site/index.js (se funktionen handleEvent)

Fremragende, det er tid til at deploye sitet med kommandoen wrangler publish.

Del 4: Automatisering af deployment

Denne vejledning er sammensat til Gitlab, men den formidler essensen og enkelheden ved automatiseret deployment generelt.

Trin 1: Opret og konfigurer vores projekt

1. Opret et nyt GitLab-projekt og upload sitet: mappen blog.example.com med alt indhold skal være i projektets rodmappe

2. Definer variabel CFAPITOKEN her: Indstillinger → CI/CD → Variabler

Trin 2: Opret filen .gitlab-ci.yml og start den første deployment

Opret filen .gitlab-ci.yml i roden med følgende indhold:

faser:
  - opbygning
  - implementering

opbygning:
  billede: monachus/hugo
  fase: opbygning
  variabler:
    GIT_SUBMODULE_STRATEGY: rekursiv
  script:
    - cd blog.example.com/
    - hugo
  artefakter:
    stier:
      - blog.example.com/public
  kun:
    - master # denne job vil kun påvirke 'master' grenen
  tags:
    - gitlab-org-docker #


implementering:
  billede: timbru31/ruby-node:2.3
  fase: implementering
  script:
    - wget https://github.com/cloudflare/wrangler/releases/download/v1.8.4/wrangler-v1.8.4-x86_64-unknown-linux-musl.tar.gz
    - tar xvzf wrangler-v1.8.4-x86_64-unknown-linux-musl.tar.gz
    - cd blog.example.com/
    - ../dist/wrangler publish
  artefakter:
    stier:
      - blog.example.com/public
  kun:
    - master # denne job vil kun påvirke 'master' grenen
  tags:
    - gitlab-org-docker #

Vi starter den første implementering manuelt (CI / CD → Pipelines → Kør Pipeline) eller ved at sende en commit til master-grenen. Voila!

Konklusion

Nå, jeg måske har lidt undervurderet, og hele processen tog lidt mere end ti minutter. Men nu har du en hurtig hjemmeside med automatisk implementering og nogle friske ideer om, hvad du ellers kan gøre med Workers.

 Cloudflare Workers    Hugo    GitLab Ci

Kilde: habr.com