Handledning 👉 Hur publicerar du värd för din webbplats på Dropbox

(19 okt 2020)

Denna handledning är för att exportera från Sketch2React som HTML och publicera den till din egen Dropbox! Och det kommer inte att kosta dig en krona i värd 🤖 💪

Det fick dig intresserad, eller hur? HoVem skulle inte? Användningsfall för det här arbetsflödet kan vara:

  1. Du har hällt din själ i och skapat en vacker, responsiv webbplats eller prototyp med vårt -verktyg för skiss
  2. Du säger till dig själv:
    ”Vad nu ?! Behöver jag verkligen betala för att vara värd för detta? Behöver jag ens bry mig om att lära mig hur man hanterar en FTP / Cloud-publiceringstjänst?
  3. Jag säger: Nej, min vän, du gör det inte!

Om du redan har Dropbox finns det en snygg lösning för dig som heter DropPages . Det är gratis upp till 50 MB webbplatslagring så det är perfekt för att bara få dina mönster där ute. Gilla riktigt snabbt 🚀

Eftersom hela din webbplats är på Dropbox, redigering och uppdatering av filerna handlar bara om att byta ut de gamla , vänta på att Dropbox ska synkroniseras och voila – uppdaterat!

Visar sig att Dropbox är flammande snabbt . Alla som har upplevt att vara värd för nedladdningsbara filer i tjänsten vet redan detta, men jag hade ingen aning om att vara värd för HTML, CSS och Javascript skulle också vara hyper snabb. innan, inuti Sketch och även efter att du har exporterat din webbplats till HTML från Sketch2React .

Inga bekymmer, det är super enkelt och jag är med dig hela vägen. 🤖 💪

Självstudiekrav

Enkel demowebbplats

100\% gjord med Sketch med Sketch2React 100\% styleable komponenter

För denna tutorial skapade jag denna demowebbplats 100\% gjord i Sketch med Sketch2React som finns på min Dropbox. Snyggt eh?

Du kan ladda ner min Skissfil härifrån för studier. 💎

👨‍🍳 Om du är fortfarande med mig låt oss laga mat ska vi?

Steg 1 – Komma igång

Den här mappen läggs till i din Dropbox
  1. här , logga in på Dropbox och ge DropPages tillgång till ditt konto. DropPages skapar en separat mapp för dig som heter My.DropPages i mappen som heter Apps. Inga bekymmer, allt är snyggt åtskilt från alla dina andra saker.
DropPages – Tryck på den blå knappen till vänster
  1. Tryck på den blå Skapa en ny webbplats-knapp och ge det ett namn där du inkluderar orden droppages.com annars fungerar det inte inom gränserna för det kostnadsfria DropPages-kontot.

    yourname.droppages.com

    🤖 💪 ProTip! Om du vill ha en anpassad domän + mer lagringsutrymme kan du bara registrera dig för en betald prenumeration . Denna handledning förutsätter att du bara vill prova detta 100\% gratis, som jag. 😆

  2. Låt oss titta på vad DropPages har skapat för oss. Vi har tre mappar:

Innehåll och offentligt är de vi täcker i den här självstudien
  1. Gå in på Innehåll och Allmänt och ta bort det som DropPages har installerat för dig (index.txt och main.css) – det gör vi inte behöver de. Inga bekymmer, vi kommer att ersätta dessa filer med våra egna, fantastiska Sketch2React HTML-filer. Mallar som du helt kan ignorera.

Steg 2 – Låt oss hoppa in i Sketch! 💎

Jag har förberett en fin liten demo-webbplats i Sketch med bara vår enkla markering . Eftersom det bara är en demo varför bry sig om att göra mer än två sidor? Ja exakt .

Jag har använt komponenter från vårt gratis Sketch2React Components och gjort anpassade ändringar av dem (jag är naturligtvis designer, vad mer skulle jag göra hela dagen? 😆)

Bara genom att lägga till Bootstrap-klassen btn-block den här lilla knappen blir full bredd i vår kodapp – yummi!

Ett par snygga saker jag gjorde var:

  • Omformad en av våra kortkomponenter med en fin blå bakgrund
  • Omformade vår knapp till full bredd med en Bootstrap-klass som heter
    btn-block
  • Användte fantastiska gratisillustrationer från en av mina absoluta favoritleverantörer av bra saker, Icons8 .
Whaaaat ?! Jag gillar inte den här stylingen alls, jag är en designer godamnit 😆
  • Som du kan se 👆 ovan när du använder vissa Bootstrap-klasser som manipulerar utseendet på komponenter ärver du automatiskt vissa standardbeteenden som inte skrivs över av Sketch2React. För att åtgärda detta skapade jag en anpassad CSS :
Skrev jag den här koden själv? Nej, jag googlade det. 😆

Det uppnådde vad jag letade efter och blev av med den fula understrykade saken i min vackra knapp! 👨🏻‍💻Resultatet av att använda en anpassad CSS 👇

Aaaa inga fula understrykningar här!

Om du känner att koden är riktigt läskig, inga bekymmer, Sketch2React fungerar perfekt utan alla dessa extra saker jag lade till, den anpassade CSS. Kom ihåg att jag har använt detta sedan innan vi släppte den första offentliga alfa, början av 2018. 😺 💪

Regler ska brytas (ibland)

Detta har tagit en lite spår och fel att förstå. Visar sig att en mycket viktig DropPages-regel strider helt mot en av Sketch2Reacs viktigaste länkaregler 😆

Normalt när du utformar för Sketch2React länkar du så här:

Regular Sketch2React linking behavior
  1. Välj en komponent som har en länkbar egenskap
  2. Använd W genväg inuti Skiss för att länka mellan den komponenten och en annan sida
  3. Lägg till ./artboardname.html till panelen {attribute.url} inuti den komponenten, som nedan:

./artboardname.html

  1. Även alla länkar går tillbaka till Start måste namnges:

./index.html

Du förstår det 🤖 💪 Detta ser till att allt är snyggt och snyggt i vår underbara kodexport. Det betyder också att du bara kan dra och släppa hela den exporterade mappen (HTML) till en FTP-server och alla länkar fungerar bara.

För vår React-export är det lite annorlunda eftersom du måste dyka in i den exporterade kod för att få länkningen att fungera men det är inte för den här självstudien. Vi har faktiskt en för det naturligtvis 👨‍💻

Btw React stöds inte ens av DropPages så låt oss bara … ehm släpp det.

Vad händer?

Problemet är att om du följer detta och samtidigt vill ha ett bra arbetsflöde för att publicera sidor till Dropbox via DropPages måste vi bryta denna regel. Ibland måste regler brytas 😬 👍

Om inte detta felmeddelande kommer att träffa dig som en tegelsten när du försöker klicka på några element som är länkade till andra sidor när du har publicerat din webbplats (eller prototyp) till DropPages :

Är webbadressen korrekt? Innehållssidor ska inte ha något tillägg.

Och vi vill inte ha det här att någonsin hända, eller hur? Det här är lösningen jag upptäckte fungerar som en charm.

Fix 🤖 💪

Ta bara bort det vanliga .html-tillägget så fungerar det. Men inte från alla länkar som går tillbaka till Start! ⚠️

DropPages specifika regler för Sketch2React-länkar

  1. Välj en komponent som har en länkbar egenskap
  2. Använd genvägen W inuti skiss för att länka mellan den komponenten och en annan sida
  3. Lägg till. / Artboardname till attributet {.url} panel inuti den komponenten, som nedan:

./artboardname

  1. Även alla länkar som går tillbaka till Start behöver fortfarande för att få namnet:

./index.html

Var särskilt uppmärksam på den sista regeln, nr 4 .

Hur ställer du in ett arbetsflöde som både fungerar för normal export och DropPages-specifika? Eftersom det bara är länkarna som behöver lite justering skulle jag först utforma och bygga det med det vanliga arbetsflödet och sedan bara duplicera samma skissfil, kalla det något som myfilename-droppages och fortsätt med mitt liv.

Vi är designers så manuellt arbete skrämmer oss inte, eller hur? 😆 👍

Äntligen är vi redo att exportera godamnit!

Okej, så om du inte har somnat vid det här laget eller har haft en mental nedbrytning hälsar jag dig bästa vän! Nu kommer den roliga delen av denna handledning, den faktiska exporteringen av saker från Sketch2React, ut till HTML och publicering på din Dropbox!

Exportera från Sketch2React till HTML

  1. Se till att du besöker varje sida du har designat en gång – det läggs till i vårt exportpaket på det sättet
  2. Tryck på Hämta 👉 HTML-knappen och spara den på skivan
  3. Packa upp din zip
  4. Voila du är klar! Låt oss nu ladda upp detta till Dropbox!

Ladda upp till Dropbox.com

Vad jag har hittat är det mest effektiva sättet att ladda upp detta är att faktiskt göra detta direkt från din webbläsare . Synkroniseringen går snabbare, speciellt när du börjar ladda upp samma filer om och om igen, vilket du antagligen kommer att göra eftersom man alltid uppdaterar / fixar saker när du ser dem live.

Men innan du gör det se till att du komprimerar dina bildtillgångar , jag använder den utmärkta TinyPNG tjänst för det. Vilket, till skillnad från dess namn också stöder JPGS.

Släpp dessa filer till innehåll

Alla dina HTML-sidor går till innehållsmappen på din nyskapade webbplats, mina ser ut så här:

Släpp dina exporterade Sketch2React HTML-filer i mappen som heter Innehåll

Släpp dessa filer till offentligt

Public innehåller alla dina CSS-, Javascript- och Image-tillgångar. Gruvan ser ut så här:

Släpp dina exporterade Sketch2React CSS-, JS- och bildmappar här

Gå nu tillbaka till ditt DropPages-konto och tryck Publicera nu och du är klar! Ibland kan det ta några minuter innan allt synkroniseras och laddas upp, var bara tålmodig, det fungerar.

Om du upplever synkroniseringsproblem trycker du på den röda Återställ synkroniseringsknappen, publicerar igen och så småningom fungerar det.

Här är min uppladdning btw 👇

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

😺 👍 Det är det folk, hoppas att du gillade den här guiden och tycker att det är användbart för din design att koda arbetsflöde.