🥇Hur man gör en statisk webbplats på Cloudflare Workers Sites

Hallå! Jag heter Dima, jag är teknisk ledare för SysOps-teamet på Wrike. I den här artikeln kommer jag att berätta hur du gör en webbplats så nära användaren som möjligt på 10 minuter och 5 dollar i månaden och automatiserar dess distribution. Artikeln har nästan ingenting att göra med de problem som vi löser inom vårt team. Detta är snarare min personliga erfarenhet och intryck av att lära känna en teknik som är ny för mig. Jag försökte beskriva stegen så detaljerat som möjligt så att instruktionerna skulle vara användbara för personer med olika erfarenheter. Jag hoppas att du kommer att trivas. Gå!

Så du kanske redan har hittat ett enkelt och billigt sätt att vara värd för en webbplats. Kanske till och med gratis, som beskrivs i detta bra artikel.

Men plötsligt är du fortfarande uttråkad och vill röra vid den modiga nya teknikvärlden? Låt oss säga att du funderar på att automatisera distributionen och vill påskynda din webbplats så mycket som möjligt? I den här artikeln kommer vi att använda Hugo, men detta är valfritt.

Vi använder Gitlab CI/CD för automatisering, men hur är det med acceleration? Låt oss distribuera webbplatsen direkt till Cloudflare med hjälp av Arbetsplatser.

Vad krävs för att börja:

Gitlab (din egen eller molnig)
Account på Cloudflare
Installerad nodejs/npm

Del 1: Installera Hugo

Om du redan har Hugo installerat, eller om du föredrar en annan statisk platsgenerator (eller inte använder en alls), kan du hoppa över den här delen.

Ladda ner Hugo från https://github.com/gohugoio/hugo/releases
Vi placerar den körbara Hugo-filen enligt en av de som definieras i VÄG sätt
Skapa en ny webbplats: hugo new site blog.example.com
Ändra den nuvarande katalogen till den nyskapade: cd blog.example.com
Välj ett designtema (https://github.com/budparr/gohugo-theme-ananke/releases eller vad som helst)
Låt oss skapa det första inlägget: hugo new posts/my-amazing-post.md
Lägg till innehåll i den skapade filen: content/posts/my-amazing-post.md.
När allt är klart ändrar du utkastvärdet till falsk
Genererar statiska filer: hugo -D

Nu finns vår statiska webbplats i en katalog ./offentlig och redo för din första manuella driftsättning.

Del 2: Konfigurera Cloudflare

Låt oss nu titta på den första installationen av Cloudflare. Låt oss anta att vi redan har en domän för webbplatsen. Låt oss ta som exempel blog.example.com.

Steg 1: Skapa en DNS-post

Välj först vår domän och sedan menyalternativet DNS. Vi skapar en blogg A-post och anger någon fiktiv IP för den (detta är den officiella rekommendation, men de kunde ha gjort det lite snyggare).

Steg 2: Cloudflare Token

Min profil -> API-tokens tab-> Skapa Token -> Skapa anpassad token

Här måste du begränsa token till konton och zoner, men lämna alternativet Redigera för de behörigheter som anges i bilden.

Spara token för framtiden, vi kommer att behöva den i den tredje delen.

Steg 3: Skaffa accountid och zoneid

Domän → Översikt → [höger sidofält]

Dessa är mina, använd dem inte :)

Spara dem bredvid token, vi kommer också att behöva dem i den tredje delen.

Steg 4: Aktivera Workers

Domän → Arbetare → Hantera arbetare

Vi väljer ett unikt namn och taxa Arbetare → Obegränsat ($5 per månad idag). Om du vill kan du senare uppgradera till gratisversionen.

Del 3: Första implementeringen (manuell driftsättning)

Jag gjorde den första manuella distributionen för att ta reda på vad som verkligen pågick där. Även om allt detta kan göras enklare:

Installera wrangler: npm i @cloudflare/wrangler -g
Låt oss gå till katalogen för vår blogg: cd blog.example.com
Starta wrangler: wrangler init — site hugo-worker
Skapa en konfiguration för wrangler (skriv in token när du tillfrågas): wrangler config

Låt oss nu försöka göra ändringar i den nyskapade filen wrangler.toml (här fullständig lista över möjliga inställningar):

Vi indikerar kontoid och zonid
Vi förändras rutt till något som *blog.example.com/*
Vi indikerar falsk för workersdev
Ändra hink till ./public (eller var din statiska webbplats finns)
Om du har mer än en domän i sökvägen, bör du korrigera sökvägen i arbetsskriptet: workers-site/index.js (se funktion hanteraEvent)

Bra, det är dags att distribuera webbplatsen med hjälp av teamet wrangler publish.

Del 4: Implementeringsautomatisering

Den här guiden är skriven för Gitlab, men den fångar kärnan och enkelheten med automatiserad distribution i allmänhet.

Steg 1: Skapa och konfigurera vårt projekt

Skapa ett nytt GitLab-projekt och ladda upp site:-katalogen blog.example.com med allt innehåll måste finnas i projektets rotkatalog
Vi sätter variabel CFAPITOKEN här: Inställningar → CI / CD → variabler

Steg 2: Skapa en .gitlab-ci.yml-fil och kör den första distributionen

Skapa en fil .gitlab-ci.yml i roten med följande innehåll:

stages:
  - build
  - deploy

build:
  image: monachus/hugo
  stage: build
  variables:
    GIT_SUBMODULE_STRATEGY: recursive
  script:
    - cd blog.example.com/
    - hugo
  artifacts:
    paths:
      - blog.example.com/public
  only:
    - master # this job will affect only the 'master' branch
  tags:
    - gitlab-org-docker #


deploy:
  image: timbru31/ruby-node:2.3
  stage: deploy
  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
  artifacts:
    paths:
      - blog.example.com/public
  only:
    - master # this job will affect only the 'master' branch
  tags:
    - gitlab-org-docker #

Vi startar den första implementeringen manuellt (CI/CD → Rörledningar → Kör rörledning) eller genom att binda sig till mastergrenen. Voila!

Slutsats

Tja, jag kan ha underskattat det något, och hela processen tog drygt tio minuter. Men nu har du en snabb webbplats med automatisk distribution och några nya idéer om vad du mer kan göra med Workers.

Cloudflare-arbetare Hugo GitLab Ci

Källa: will.com

Hur man gör en statisk webbplats på Cloudflare Workers Sites