Tutorial 👉 Sådan offentliggøres som vært for dit websted på Dropbox

(19. okt 2020)

Denne tutorial er til eksport fra Sketch2React som HTML og udgiv den til din egen Dropbox! Og det koster dig ikke en krone i hosting 🤖 💪

Det fik dig interesseret, ikke? 😺Hvem ville ikke? Brugstilfælde til denne arbejdsgang kan være:

  1. Du har hældt din sjæl ind i og skabt en smuk, fuldt responsiv webside eller prototype med vores værktøj for Sketch
  2. Du siger til dig selv:
    ”Hvad nu ?! Skal jeg virkelig betale for at være vært for dette? Behøver jeg endda gider mig med at lære ind og ud af, hvordan jeg administrerer en FTP / Cloud-udgivelsestjeneste?
  3. Jeg siger: Nej min ven, du gør det ikke!

Hvis du allerede har Dropbox, er der en pæn løsning til dig, der hedder DropPages . Det er gratis op til 50 MB webstedsopbevaring, så det er perfekt til bare at få dine designs derude. Som rigtig hurtigt 🚀

Også da hele dit websted er på Dropbox, er redigering og opdatering af filerne bare et spørgsmål om at erstatte de gamle , vent på, at Dropbox synkroniseres og voila – opdateret!

Viser sig, at Dropbox er lynhurtigt . Alle, der har oplevet at være vært for downloadbare filer i tjenesten, ved det allerede, men jeg havde ingen idé om at være vært for HTML, CSS og Javascript ville også være hyperhurtig.

DropPages kræver en lille mængde opsætning, begge før, inde i Sketch og også efter at du har eksporteret dit websted til HTML fra Sketch2React .

Ingen bekymringer, det er super nemt, og jeg er med dig hele vejen. 🤖 💪

Selvstudiekrav

Enkel demo-webside

100\% lavet med Sketch ved hjælp af Sketch2React 100\% styleable komponenter

Med henblik på denne tutorial skabte jeg denne demo-websted 100\% lavet i Sketch ved hjælp af Sketch2React, der er hostet på min Dropbox. Pænt eh?

Du kan downloade min Skitsefil herfra til studiearbejde 💎

👨‍🍳 Hvis du er der stadig med mig, lad os lave mad skal vi?

Trin 1 – Kom godt i gang

Denne mappe føjes til din Dropbox
  1. her , log ind på Dropbox og lad DropPages have adgang til din konto. DropPages opretter en separat mappe til dig ved navn My.DropPages i mappen med navnet Apps. Ingen bekymringer, alt er pænt adskilt fra alle dine andre ting.
DropPages – Tryk på den blå knap til venstre
  1. Tryk på den blå Opret en ny sideknap og giv det et navn, hvor du inkluderer ordene droppages.com ellers fungerer det ikke inden for grænserne for den gratis DropPages-konto.

    yourname.droppages.com

    🤖 💪 ProTip! Hvis du vil have et brugerdefineret domæne + mere lagerplads, kan du bare tilmelde dig et betalt abonnement . Denne tutorial antager, at du bare vil prøve dette 100\% gratis, ligesom mig. 😆

  2. Lad os se på, hvad DropPages har skabt for os. Vi har tre mapper:

Indhold og offentligt er dem, vi dækker i denne vejledning
  1. Gå ind i Indhold og Offentlig og slet, hvad DropPages har installeret til dig (index.txt og main.css) – vi gør det ikke har brug for dem. Ingen bekymringer, vi erstatter disse filer med vores egne fantastiske Sketch2React HTML-filer. Skabeloner, du helt kan ignorere.

Trin 2 – Lad os hoppe ind i Skitse! 💎

Jeg har forberedt en dejlig lille demo-websted i Sketch ved hjælp af vores enkle markering . Da det bare er en demo, hvorfor gider du lave mere end to sider? Ja nøjagtigt .

Jeg har brugt komponenter fra vores gratis Sketch2React Components bibliotek og foretaget tilpassede ændringer til dem (selvfølgelig er jeg designer, hvad ellers ville jeg gøre hele dagen? 😆)

Bare ved at tilføje Bootstrap-klassen btn-blok denne lille knappen bliver fuld bredde i vores kode-app – yummi!

Et par pæne ting, jeg gjorde, var:

  • Restyled en af ​​vores kortkomponenter med en flot blå baggrund
  • Omstruktureret vores knap til fuld bredde ved hjælp af en Bootstrap-klasse kaldet
    btn-block
  • Brugte fantastiske gratis illustrationer fra en af ​​mine absolutte favoritudbydere af gode ting, Icons8 .
Whaaaat ?! Jeg kan slet ikke lide denne styling, jeg er designer godamnit 😆
  • Som du kan se 👆 ovenfor, når du bruger visse Bootstrap-klasser der manipulerer udseendet på komponenter, arver du automatisk nogle standardadfærd, der ikke overskrives af Sketch2React. For at løse dette oprettede jeg en tilpasset CSS :
Skrev jeg selv denne kode? Nej, jeg googlede det. 😆

Det opnåede det, jeg ledte efter, ved at slippe af med den grimme understregede ting i min smukke knap! 👨🏻‍💻Resultatet af at bruge en brugerdefineret CSS 👇

Aaaa ingen grimme understregninger her!

Hvis du føler, at koden er virkelig skræmmende, ingen bekymringer, Sketch2React fungerer perfekt uden alle disse ekstra ting, jeg tilføjede, den tilpassede CSS. Husk, jeg har brugt dette siden før vi udgav den første offentlige alfa, begyndelsen af ​​2018. 😺 💪

Regler skal brydes (undertiden)

Dette har taget en lidt spor og fejl at forstå. Viser sig, at en meget vigtig DropPages-regel strider imod en af ​​Sketch2Reacts vigtigste linkregler 😆

Normalt når du designer til Sketch2React, linker du sådan:

Regular Sketch2React linking behavior
  1. Vælg en komponent, der har en linkbar egenskab
  2. Brug W genvej inde i Skitse for at linke mellem den pågældende komponent og en anden side
  3. Tilføj ./artboardname.html til panelet {attribute.url} inde i den pågældende komponent, som nedenfor:

./artboardname.html

  1. Også alle links går tilbage til Start skal navngives:

./index.html

Du får det 🤖 💪 Dette sørger for, at alt er pænt og pænt i vores vidunderlige kodeeksport. Det betyder også, at du bare kan trække og slippe hele den eksporterede mappe (HTML) på en FTP-server, og alle links fungerer bare.

For vores React-eksport er det lidt anderledes, da du skal dykke ned i den eksporterede kode for at få linket til at fungere, men det er ikke til denne tutorial. Vi har faktisk en til det selvfølgelig 👨‍💻

Btw React understøttes ikke engang af DropPages, så lad os bare … ehm slippe det.

Hvad sker der?

Problemet er, at hvis du følger dette og samtidig vil have en god arbejdsgang til udgivelse af sider til Dropbox via DropPages, er vi nødt til at bryde denne regel. Nogle gange er regler der for at blive brudt 😬 👍

Hvis ikke denne fejlmeddelelse rammer dig som en mursten, når du prøver at klikke på elementer, der er linket til andre sider, når du først har offentliggjort dit websted (eller prototype) til DropPages :

Er URLen korrekt? Indholdssider bør ikke have en udvidelse.

Og vi ønsker ikke dette at nogensinde ske, ikke? Dette er den løsning, jeg fandt ud af, fungerer som en charme.

Fix 🤖 💪

Fjern bare den sædvanlige .html-udvidelse, så fungerer den. Men ikke fra alle links, der går tilbage til Start! ⚠️

DropPages-specifikke regler for Sketch2React-links

  1. Vælg en komponent, der har en linkbar egenskab
  2. Brug genvejen W inde i Skitse for at linke mellem den pågældende komponent og en anden side
  3. Tilføj ./artboardname til {attributten.url} panel inde i den komponent, som nedenfor:

./artboardname

  1. Også alle links, der går tilbage til Start , skal stadig have for at få navnet:

./index.html

Vær særlig opmærksom på den sidste regel, nr 4 .

Hvordan opsætter man en arbejdsgang, der både fungerer ved normal eksport og DropPages-specifikke? Faktisk da det kun er de links, der har brug for en smule justering, ville jeg først designe og bygge det med den sædvanlige arbejdsgang og derefter bare duplikere den samme Sketch-fil, kalde den noget som myfilename-droppages og fortsæt med mit liv.

Vi er designere, så manuelt arbejde skræmmer os ikke, ikke? 😆 👍

Endelig er vi klar til at eksportere godamnit!

Okay, så hvis du ikke er faldet i søvn nu eller har haft et mentalt sammenbrud, hilser jeg din bedste ven! Nu kommer den sjove del af denne tutorial, den faktiske eksport af ting ud af Sketch2React, ud til HTML og offentliggørelse på din Dropbox!

Eksport fra Sketch2React til HTML

  1. Sørg for at besøge hver side, du har designet en gang – det føjes til vores eksportpakke på den måde
  2. Tryk på Download 👉 HTML-knappen og gem den på disk
  3. Pak din zip ud
  4. Voila du er færdig! Lad os nu uploade dette til Dropbox!

Uploade til Dropbox.com

Hvad jeg har fundet være den mest effektive måde at uploade dette på er faktisk at gøre dette direkte fra din browser . Synkroniseringen er hurtigere, især når du begynder at uploade de samme filer igen og igen, hvilket du sandsynligvis vil gøre, da man altid opdaterer / retter ting, når du først ser dem live.

Men inden du gør det sørg for, at du komprimerer dine billedaktiver , jeg bruger den fremragende TinyPNG service til det. Som i modsætning til dets navn også understøtter JPGS.

Slip disse filer i indhold

Alle dine HTML-sider går ind i mappen Indhold på dit nyoprettede websted, mine ser sådan ud:

Slip dine eksporterede Sketch2React HTML-filer i mappen med navnet Content

Slip disse filer i Public

Public indeholder alle dine CSS-, Javascript- og Image-aktiver. Mine ser sådan ud:

Slip dine eksporterede Sketch2React CSS-, JS- og billedmapper her

Gå nu tilbage til din DropPages-konto og tryk på Udgiv nu og du er færdig! Undertiden kan det tage et par minutter, før alt bliver synkroniseret og uploadet, bare vær tålmodig, det fungerer.

Hvis du oplever synkroniseringsproblemer, skal du trykke på den røde nulstil-synkroniseringsknap, udgiv igen, og det til sidst fungerer.

Her er min upload btw 👇

http://articledemo.droppages.com/index.html

😺 👍 Det er det folkens, håber du nød denne tutorial og finder det nyttigt for dit design at kode workflow.