Tutorial 👉 Cum să publicați găzduiți site-ul dvs. web pe Dropbox

(19 octombrie 2020)

Acest tutorial este destinat exportului din Sketch2React ca HTML și publicării acestuia în propriul dvs. Dropbox! Și nu vă va costa nici un ban în găzduire 🤖 💪

Asta v-a interesat, nu? 😺 Cine nu ar vrea? Cazul de utilizare pentru acest flux de lucru ar putea fi:

  1. Ți-ai turnat sufletul și ai creat un site sau prototip frumos, complet receptiv cu instrumentul nostru pentru Sketch
  2. Îți spui:
    ”Acum ce ?! Chiar trebuie să plătesc pentru găzduirea asta? Trebuie chiar să mă deranjez să învăț detaliile despre cum să gestionez un serviciu de publicare FTP / Cloud?
  3. Spun: Nu prietenul meu, nu!

Dacă aveți deja Dropbox, există o soluție potrivită pentru dvs. numită DropPages . Este gratuit până la 50 MB de spațiu de stocare a site-ului web, deci este perfect pentru a-ți scoate designurile acolo. Îmi place foarte repede 🚀

De asemenea, întrucât întregul dvs. site este pe Dropbox, editarea și actualizarea fișierelor este doar o chestiune de înlocuire a celor vechi , așteptați ca Dropbox să se sincronizeze și voila – actualizat!

Se pare că Dropbox este rapid aprins . Toți cei care au avut experiența de a găzdui fișiere descărcabile pe serviciu știu deja acest lucru, dar habar nu aveam de găzduit HTML, CSS și Javascript ar fi, de asemenea, extrem de rapid. înainte, în interiorul Sketch și, de asemenea, după ce v-ați exportat site-ul în HTML din Sketch2React .

Nu vă faceți griji, este foarte ușor și eu sunt cu tine tot drumul. 🤖 💪

Cerințe pentru tutorial

Site web demonstrativ simplu

100\% realizat cu Sketch folosind Sketch2React 100\% componente stilabile

În scopul acestui tutorial am creat acest site web demonstrativ 100\% realizat în Sketch folosind Sketch2React găzduit în Dropbox. Neat eh?

Puteți descărca fișierul meu de schiță de aici în scopuri de studiu 💎

👨‍🍳 Dacă Mai ești cu mine, să pregătim gătitul?

Pasul 1 – Noțiuni introductive

Acest folder este adăugat în Dropbox
  1. Accesați aici , conectați-vă la Dropbox și permiteți DropPages să aibă acces la contul dvs. DropPages creează un folder separat numit My.DropPages în folderul denumit Aplicații. Nu vă faceți griji, totul este separat separat de toate celelalte chestii ale dvs.
DropPages – Apăsați butonul albastru din stânga
  1. Apăsați butonul albastru Creați un buton de site nou și dați-i un nume în care includeți cuvintele droppages.com sau nu va funcționa în limitele contului gratuit DropPages.

    yourname.droppages.com

    T 💪 ProTip! Dacă doriți să aveți un domeniu personalizat + mai mult spațiu de stocare, vă puteți înscrie doar pentru un abonament plătit . Acest tutorial presupune că doriți doar să încercați acest lucru 100\% gratuit, la fel ca mine. 😆

  2. Să vedem ce a creat DropPages pentru noi. Avem trei dosare:

Conținutul și publicul sunt cele pe care le acoperim în acest tutorial
  1. Accesați Conținut și Public și ștergeți ceea ce DropPages a instalat pentru dvs. (index.txt și main.css) – noi nu au nevoie de acestea. Nu vă faceți griji, vom înlocui acele fișiere cu propriile noastre minunate fișiere Sketch2React HTML. Șabloane pe care le puteți ignora în totalitate.

Pasul 2 – Să trecem în Sketch! 💎

Am pregătit un pic frumos site-ul web demonstrativ din Sketch folosind doar marcajul nostru . Deoarece este doar o demonstrație, de ce să ne deranjăm să creăm mai mult de două pagini? Da exact .

Am folosit componente din biblioteca noastră gratuită Componente Sketch2React și le-am făcut modificări personalizate (desigur, sunt designer, ce altceva aș face toată ziua? 😆)

Doar adăugând clasa Bootstrap btn-block acest mic butonul devine lățime completă în aplicația noastră de cod – yummi!

Câteva lucruri îngrijite pe care le-am făcut au fost:

  • Restilizat una dintre componentele cardului nostru cu un fundal albastru frumos
  • Ne-am redistribuit butonul pentru a avea lățimea totală utilizând o clasă Bootstrap numită
    btn-block
  • Am folosit ilustrații gratuite uimitoare de la unul dintre furnizorii mei preferați absolut de lucruri bune, Icons8 .
Whaaaat ?! Nu-mi place deloc acest stil, sunt un designer godamnit 😆
  • După cum puteți vedea 👆 mai sus când utilizați anumite clase Bootstrap care manipulează aspectul componentelor, moștenești automat unele comportamente implicite care nu sunt suprascrise de Sketch2React. Pentru a remedia acest lucru, am creat un CSS personalizat :
Am scris eu singur acest cod? Nu, am cercetat-o ​​pe Google. 😆

Asta a realizat ceea ce căutam, scăpând de chestia aceea urâtă de subliniat din frumosul meu buton! 👨🏻‍💻Rezultatul utilizării unui CSS personalizat 👇

Aaaa nu subliniază urât aici!

Dacă credeți că codul este într-adevăr înfricoșător, nu vă faceți griji, Sketch2React funcționează perfect fără toate aceste lucruri suplimentare pe care le-am adăugat, CSS personalizat. Amintiți-vă, am folosit acest lucru de când am lansat primul alpha public, începutul anului 2018. 😺 💪

Regulile trebuie încălcate (uneori)

un pic de urmă și eroare de înțeles. Se dovedește că o regulă DropPages foarte importantă merge total împotriva uneia dintre cele mai importante reguli de conectare ale Sketch2React 😆

În mod normal atunci când proiectați pentru Sketch2React, vă legați astfel:

Comportament regulat de conectare Sketch2React

  1. Selectați o componentă care are o proprietate care poate fi conectată
  2. Utilizați W din interiorul Sketch pentru a face legătura dintre acea componentă și o altă pagină
  3. Adăugați ./artboardname.html la panoul {attribute.url} din interiorul acelei componente, ca mai jos:

./artboardname.html

  1. De asemenea, toate linkurile revenind la Start trebuie să fie denumit:

./index.html

Îl primești 🤖 💪 Acest lucru asigură că totul este îngrijit și frumos în minunatul nostru export de cod. De asemenea, înseamnă că puteți trage și plasa întregul folder exportat (HTML) pe un server FTP și toate linkurile funcționează.

Pentru exportul nostru React este puțin diferit, deoarece trebuie să vă scufundați în exportul cod pentru a face legătura să funcționeze, dar acest lucru nu este pentru acest tutorial. De fapt, avem unul pentru asta, desigur 👨‍💻

Btw React nici măcar nu este acceptat de DropPages, așa că hai să … ehm renunțăm la asta.

Ce se întâmplă?

Problema este că, dacă urmați acest lucru și în același timp doriți să aveți un flux de lucru bun pentru publicarea paginilor în Dropbox prin DropPages, trebuie să încălcăm această regulă. Uneori, regulile sunt încălcate 😬 👍

Dacă nu, acest mesaj de eroare vă va lovi ca o cărămidă odată ce încercați să faceți clic pe orice element legat de alte pagini după ce ați publicat site-ul dvs. (sau prototipul) pe DropPages :

Este adresa URL corectă? Paginile de conținut nu trebuie să aibă o extensie.

Și nu vrem acest lucru să se întâmple vreodată, nu? Aceasta este soluția pe care am aflat-o că funcționează ca un farmec.

Remedierea 🤖 💪

Eliminați extensia obișnuită .html și va funcționa. Dar nu din toate linkurile care revin la Start! ⚠️

Regulile specifice DropPages pentru linkurile Sketch2React

  1. Selectați o componentă care are o proprietate care poate fi conectată
  2. Utilizați comanda rapidă W din Sketch pentru a lega între componenta respectivă și o altă pagină
  3. Adăugați ./artboardname la atributul {.url} panoul din componenta respectivă, ca mai jos:

./artboardname

  1. De asemenea, toate linkurile care revin la Start mai au nevoie de pentru a fi denumite:

./index.html

Acordați o atenție specială ultimei reguli, nr 4 .

Cum configurați apoi un flux de lucru care funcționează atât pentru exporturile normale, cât și pentru cele specifice DropPages? De fapt, deoarece doar link-urile au nevoie de puțină ajustare, aș concepe și construi mai întâi cu fluxul de lucru obișnuit și apoi doar să duplic același fișier Sketch, să-l numesc ca myfilename-droppages și să continuăm cu viața mea.

Suntem designeri, așa că munca manuală nu ne sperie, nu? 😆 👍

În sfârșit, suntem gata să exportăm godamnit!

Okey, așa că dacă nu ați adormit până acum sau ați avut o ruptură mentală, vă salut cel mai bun prieten! Acum vine partea amuzantă a acestui tutorial, exportul real al lucrurilor din Sketch2React, în HTML și publicarea în Dropbox!

Exportul din Sketch2React în HTML

  1. Asigurați-vă că vizitați fiecare pagină pe care ați proiectat-o ​​ o dată – se adaugă în pachetul nostru de export în acest fel
  2. Apăsați butonul Descărcați 👉 HTML și salvați-l pe disc
  3. Dezarhivați codul zip
  4. Voila ai terminat! Acum, să încărcăm acest lucru în Dropbox!

Încărcarea pe Dropbox.com

Ceea ce am găsit că este cel mai eficient mod de a încărca acest lucru este de a face acest lucru direct din browserul dvs. . Sincronizarea este mai rapidă, mai ales atunci când începeți să încărcați din nou și din nou aceleași fișiere, lucru pe care probabil îl veți face, deoarece unul actualizează / remediază întotdeauna lucrurile odată ce le vedeți live.

Dar înainte de a face asta asigurați-vă că vă comprimați activele de imagine , folosesc excelentul TinyPNG serviciu pentru asta. Care, spre deosebire de numele său, acceptă și JPGS.

Plasați aceste fișiere în Conținut

Toate paginile HTML intră în folderul Conținut de pe site-ul dvs. web nou creat, al meu arată astfel:

Plasați fișierele HTML Sketch2React exportate în folderul numit Conținut

Plasați aceste fișiere în Public

Public deține toate materialele CSS, Javascript și Image. Al meu arată astfel:

Eliminați folderele exportate Sketch2React CSS, JS și Image aici

Acum reveniți la contul dvs. DropPages și apăsați pe Publicați acum și gata! Uneori poate dura câteva minute pentru ca totul să fie sincronizat și încărcat, doar aveți răbdare, va funcționa.

Dacă aveți probleme de sincronizare, apăsați butonul roșu Resetare sincronizare, publicați din nou și, în cele din urmă, va funcționa.

Iată încărcarea mea btw 👇

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

😺 👍 Asta este, oameni buni, sperăm că v-a plăcut acest tutorial și vă va fi util pentru proiectarea dvs. pentru codificarea fluxului de lucru.