Tutorial 👉 Hoe te publiceren host uw website op Dropbox

(19 okt 2020)

Deze tutorial is bedoeld voor het exporteren van Sketch2React als HTML en het publiceren naar je eigen Dropbox! En het kost je geen cent aan hosting 🤖 💪

Dat heeft je toch geïnteresseerd? 😺Wie niet? Use case voor deze workflow zou kunnen zijn:

  1. Je hebt je ziel erin gestoken en een mooie, volledig responsieve website of prototype gemaakt met onze tool for Sketch
  2. Je zegt tegen jezelf:
    ”Wat nu ?! Moet ik echt betalen om dit te hosten? Moet ik mezelf zelfs maar de moeite nemen om de ins en outs te leren over het beheren van een FTP / Cloud-publicatieservice?
  3. Ik zeg: nee mijn vriend, jij niet!

Als je Dropbox al hebt, is er een handige oplossing voor je genaamd DropPages . Het is gratis tot 50 MB opslagruimte voor websites, dus het is perfect om uw ontwerpen gewoon naar buiten te brengen. Echt heel snel 🚀

Ook omdat je hele website dan op Dropbox staat, is het bewerken en bijwerken van de bestanden gewoon een kwestie van de oude vervangen , wacht tot Dropbox is gesynchroniseerd en voila – bijgewerkt!

Het blijkt dat Dropbox razendsnel is . Iedereen die ervaring heeft met het hosten van downloadbare bestanden op de service weet dit al, maar ik had geen idee dat het hosten van HTML, CSS en Javascript ook supersnel zou zijn.

DropPages vereist een kleine hoeveelheid installatie, beide voor, in Sketch en ook nadat u uw website naar HTML hebt geëxporteerd vanuit Sketch2React .

Geen zorgen, het is supergemakkelijk en ik met je de hele weg. 🤖 💪

Vereisten voor zelfstudie

Eenvoudige demo-website

100\% gemaakt met Sketch met Sketch2React 100\% stijlbare componenten

Voor deze tutorial heb ik dit demo-website 100\% gemaakt in Sketch met Sketch2React dat wordt gehost op mijn Dropbox. Netjes hè?

Je kunt hier mijn schetsbestand downloaden voor studiedoeleinden 💎

👨‍🍳 Als je zijn nog steeds bij me, laten we gaan koken, zullen we?

Stap 1 – Aan de slag

Deze map wordt toegevoegd aan je Dropbox
  1. Ga hier , log in op Dropbox en geef DropPages toegang tot je account. DropPages maakt een aparte map voor je aan met de naam My.DropPages in de map met de naam Apps. Geen zorgen, alles is netjes gescheiden van al je andere dingen.
DropPages – Druk op de blauwe knop aan de linkerkant
  1. Druk op de blauwe Maak een nieuwe siteknop en geef het een naam waar u de woorden droppages.com opneemt, anders werkt het niet binnen de limieten van het gratis DropPages-account.

    yourname.droppages.com

    🤖 💪 ProTip! Als u een aangepast domein en meer opslagruimte wilt, kunt u zich gewoon aanmelden voor een betaald abonnement . Deze tutorial gaat ervan uit dat je dit, net als ik, 100\% gratis wilt uitproberen. 😆

  2. Laten we eens kijken wat DropPages voor ons heeft gemaakt. We hebben drie mappen:

Content en Public zijn degenen die we behandelen in deze tutorial
  1. Ga naar Content en Public en verwijder wat DropPages voor je heeft geïnstalleerd (index.txt en main.css) – dat doen we niet heb die nodig. Geen zorgen, we zullen die bestanden vervangen door onze eigen, geweldige Sketch2React HTML-bestanden. Sjablonen die u volledig kunt negeren.

Stap 2 – Laten we naar Sketch gaan! 💎

Ik heb een leuke kleine demo-website in Sketch met alleen onze eenvoudige opmaak . Omdat het maar een demo is, waarom zou u dan meer dan twee paginas maken? Ja precies .

Ik heb componenten uit onze gratis Sketch2React Components -bibliotheek gebruikt en er aangepaste wijzigingen in aangebracht (ik ben natuurlijk een ontwerper, wat kan er nog meer zou ik de hele dag doen? 😆)

Gewoon door de Bootstrap-klasse btn-block dit kleine knop wordt volledige breedte in onze code-app – yummi!

Een paar leuke dingen die ik deed waren:

  • Gerestyled een van onze kaartcomponenten met een mooie blauwe achtergrond
  • We hebben onze knop opnieuw vormgegeven zodat deze de volledige breedte heeft door een Bootstrap-klasse te gebruiken met de naam
    btn-block
  • Verbazingwekkende gratis illustraties gebruikt van een van mijn absoluut favoriete aanbieders van goede dingen, Icons8 .
Whaaaat ?! Ik hou helemaal niet van deze stijl, ik ben een ontwerper godamnit 😆
  • Zoals je hierboven kunt zien 👆 bij het gebruik van bepaalde Bootstrap-klassen die het uiterlijk van componenten manipuleert, ervaar je automatisch een aantal standaardgedragingen die niet worden overschreven door Sketch2React. Om dit op te lossen heb ik een aangepaste CSS gemaakt:
Heb ik deze code zelf geschreven? Nee, ik heb het gegoogeld. 😆

Dat heeft bereikt wat ik zocht: dat lelijke onderstreepte dingetje in mijn mooie knop verwijderen! 👨🏻‍💻Het resultaat van het gebruik van een aangepaste CSS 👇

Aaaa geen lelijke onderstrepingen hier!

Als je denkt dat code echt eng is, maak je geen zorgen, Sketch2React werkt perfect zonder al deze extra dingen die ik heb toegevoegd, de aangepaste CSS. Onthoud dat ik dit gebruik al voordat we de eerste openbare alfa uitbrachten, begin 2018. 😺 💪

Regels zijn bedoeld om (soms) te worden overtreden

Dit heeft een beetje spoor en fout om te begrijpen. Blijkt dat een zeer belangrijke regel van DropPages volledig indruist tegen een van de belangrijkste koppelingsregels van Sketch2React 😆

Normaal gesproken bij het ontwerpen voor Sketch2React link je als volgt:

Normaal Sketch2React-koppelingsgedrag
  1. Selecteer een component die een linkseigenschap heeft
  2. Gebruik de W snelkoppeling in Sketch om te linken tussen die component en een andere pagina
  3. Voeg ./artboardname.html toe aan het {attribute.url} -paneel in die component, zoals hieronder:

./artboardname.html

  1. Ook alle links gaan terug naar Start moeten de volgende naam krijgen:

./index.html

Je snapt het 🤖 💪 Dit zorgt ervoor dat alles netjes en leuk is in onze prachtige code-export. Het betekent ook dat je gewoon de hele geëxporteerde map (HTML) naar een FTP-server kunt slepen en neerzetten en alle links gewoon werken.

Voor onze React-export is het een beetje anders, omdat je in de geëxporteerde map moet duiken. code om de koppeling te laten werken, maar dat is niet voor deze tutorial. We hebben daar natuurlijk een voor 👨‍💻

Btw React wordt niet eens ondersteund door DropPages dus laten we gewoon … ehm laten vallen.

Wat gebeurt er?

Het probleem is dat als je dit volgt en tegelijkertijd een goede workflow wilt hebben voor het publiceren van paginas naar Dropbox via DropPages, we deze regel moeten overtreden. Soms zijn er regels om te overtreden 😬 👍

Zo niet, dan zal deze foutmelding je als een steen raken als je eenmaal probeert te klikken op elementen die naar andere paginas zijn gelinkt nadat je je website (of prototype) op DropPages hebt gepubliceerd :

Is de URL correct? Inhoudspaginas mogen geen extensie hebben.

En dat willen we niet ooit gebeuren, toch? Dit is de oplossing waarvan ik ontdekte dat het werkt als een charme.

De oplossing 🤖 💪

Verwijder gewoon de gebruikelijke .html-extensie en het zal werken. Maar niet van alle links die teruggaan naar Start! ⚠️

DropPages-specifieke regels voor Sketch2React-links

  1. Selecteer een component met een eigenschap om te linken
  2. Gebruik de W snelkoppeling in Sketch om te linken tussen dat onderdeel en een andere pagina
  3. Toevoegen ./artboardname naar het {attribuut.url} paneel binnen die component, zoals hieronder:

./artboardname

  1. Ook alle links die teruggaan naar Start hebben nog steeds nodig om een ​​naam te krijgen:

./index.html

Besteed speciale aandacht aan die laatste regel, nr 4 .

Hoe stel je dan een workflow in die zowel werkt voor normale exports als voor DropPages-specifieke? Omdat het eigenlijk alleen de links zijn die een beetje moeten worden aangepast, zou ik het eerst ontwerpen en bouwen met de gebruikelijke workflow en dan gewoon hetzelfde Sketch-bestand dupliceren, het zoiets noemen myfilename-droppages en doorgaan met mijn leven.

We zijn ontwerpers, dus handarbeid maakt ons niet bang, toch? 😆 👍

Eindelijk zijn we klaar om godamnit te exporteren!

Okey, dus als je nu nog niet in slaap bent gevallen of een zenuwinzinking hebt gehad, groet ik je beste vriend! Nu komt het leuke deel van deze tutorial, het feitelijk exporteren van dingen uit Sketch2React naar HTML en het publiceren naar je Dropbox!

Exporteren van Sketch2React naar HTML

  1. Zorg ervoor dat je elke pagina die je hebt ontworpen eenmaal – het wordt op die manier toegevoegd aan onze exportbundel
  2. Druk op de knop Downloaden 👉 HTML en sla het op schijf op
  3. Pak je zip uit
  4. Voila je bent klaar! Laten we dit nu uploaden naar Dropbox!

Uploaden naar Dropbox.com

Wat ik heb ontdekt dat de meest effectieve manier is om dit te uploaden, is door dit daadwerkelijk te doen rechtstreeks vanuit uw browser . De synchronisatie is sneller, vooral wanneer u dezelfde bestanden steeds opnieuw begint te uploaden, wat u waarschijnlijk zult doen, aangezien men dingen altijd bijwerkt / repareert zodra u ze live ziet.

Maar voordat u dat doet zorg ervoor dat je je afbeeldingsitems comprimeert , ik gebruik de uitstekende TinyPNG service daarvoor. Die, in tegenstelling tot zijn naam, ook JPGS ondersteunt.

Zet deze bestanden neer in Content

Al je HTML-paginas gaan naar de Content-map op je nieuw gemaakte website, de mijne ziet er als volgt uit:

Zet uw geëxporteerde Sketch2React HTML-bestanden neer in de map Content

Zet deze bestanden neer in Public

Public bevat al uw CSS-, Javascript- en afbeeldingsitems. De mijne ziet er als volgt uit:

Zet je geëxporteerde Sketch2React CSS-, JS- en afbeeldingsmappen hier neer

Ga nu terug naar je DropPages-account en klik op Nu publiceren en je bent klaar! Soms kan het een paar minuten duren voordat alles is gesynchroniseerd en geüpload, wees geduldig, het zal werken.

Als u synchronisatieproblemen ondervindt, drukt u op de rode knop Synchronisatie opnieuw instellen, publiceert u opnieuw en het werkt uiteindelijk.

Hier is mijn upload btw 👇

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

😺 👍 Dat is het mensen, ik hoop dat je genoten hebt van deze tutorial en dat het nuttig is voor je ontwerp om de workflow te coderen.