Tutorial 👉 Come pubblicare ospitare il tuo sito web su Dropbox

(19 ottobre 2020)

Questo tutorial serve per esportare da Sketch2React come HTML e pubblicarlo sul tuo Dropbox! E non ti costerà un centesimo in hosting 🤖 💪

Questo ti ha interessato, giusto? 😺Chi non lo farebbe? Il caso duso per questo flusso di lavoro potrebbe essere:

  1. Hai riversato la tua anima e creato un bellissimo sito web o prototipo completamente reattivo con il nostro strumento per Sketch
  2. Dici a te stesso:
    “E adesso ?! Devo davvero pagare per ospitare questo? Devo anche preoccuparmi di imparare i dettagli su come gestire un servizio di pubblicazione FTP / Cloud?
  3. Dico: No amico mio, non lo fai!

Se hai già Dropbox, esiste una soluzione chiara per te chiamata DropPages . È gratuito fino a 50 MB di spazio di archiviazione per il sito web, quindi è perfetto solo per pubblicare i tuoi progetti. Mi piace molto velocemente 🚀

Inoltre, poiché lintero sito web è su Dropbox, modificare e aggiornare i file è solo questione di sostituire quelli vecchi , attendi che Dropbox si sincronizzi e voilà – aggiornato!

Si scopre che Dropbox è velocissimo . Tutti coloro che hanno avuto lesperienza di ospitare file scaricabili sul servizio lo sanno già, ma non avevo idea che ospitare HTML, CSS e Javascript sarebbe stato anche iperveloce.

DropPages richiede una piccola quantità di configurazione, entrambi prima, allinterno di Sketch e anche dopo aver esportato il tuo sito web in HTML da Sketch2React .

Nessun problema, è semplicissimo e io con te fino in fondo. 🤖 💪

Requisiti del tutorial

Sito web dimostrativo semplice

100\% realizzato con Sketch utilizzando Sketch2React 100\% componenti stilizzabili

Ai fini di questo tutorial ho creato questo sito web dimostrativo 100\% realizzato allinterno di Sketch utilizzando Sketch2React ospitato sul mio Dropbox. Perfetto eh?

Puoi scaricare il mio file di schizzo da qui per motivi di studio 💎

👨‍🍳 Se tu sei ancora con me, mettiamoci a cucinare, vero?

Passaggio 1 – Guida introduttiva

Questa cartella viene aggiunta al tuo Dropbox
  1. Vai qui , accedi a Dropbox e consenti a DropPages di avere accesso al tuo account. DropPages crea una cartella separata per te chiamata My.DropPages nella cartella denominata Apps. Nessun problema, tutto è ben separato da tutte le altre cose.
DropPages – Premi il pulsante blu a sinistra
  1. Premi il pulsante blu Crea un nuovo sito e assegnagli un nome in cui includi le parole droppages.com altrimenti non funzionerà entro i limiti dellaccount DropPages gratuito.

    yourname.droppages.com

    🤖 💪 ProTip! Se desideri avere un dominio personalizzato + più spazio di archiviazione, puoi semplicemente registrarti per un abbonamento a pagamento . Questo tutorial presuppone che tu voglia provarlo al 100\% gratuitamente, come me. 😆

  2. Diamo unocchiata a ciò che DropPages ha creato per noi. Abbiamo tre cartelle:

Contenuti e Pubblico sono quelli trattati in questo tutorial
  1. Accedi a Contenuti e pubblico ed elimina ciò che DropPages ha installato per te (index.txt e main.css) – non lo facciamo bisogno di quelli. Nessun problema, sostituiremo quei file con i nostri fantastici file HTML Sketch2React. Modelli che puoi ignorare completamente.

Passaggio 2: passiamo a Sketch! 💎

Ho preparato un bel po sito web dimostrativo in Sketch utilizzando solo il nostro semplice markup . Dato che è solo una demo, perché preoccuparsi di creare più di due pagine? Sì, esattamente .

Ho utilizzato componenti dalla nostra libreria gratuita Sketch2React Components e ho apportato modifiche personalizzate (ovviamente, sono un designer, cosaltro farei tutto il giorno? 😆)

Semplicemente aggiungendo la classe Bootstrap btn-block questo piccolo Il pulsante diventa a tutta larghezza nella nostra app di codice – yummi!

Un paio di cose carine che ho fatto sono state:

  • Restyling uno dei componenti della nostra scheda con un bel sfondo blu
  • Restyling del nostro pulsante a tutta larghezza utilizzando una classe Bootstrap chiamata
    btn-block
  • Ho utilizzato fantastiche illustrazioni gratuite da uno dei miei fornitori preferiti in assoluto di cose buone, Icons8 .
Whaaaat ?! Non mi piace affatto questo stile, sono un designer godamnit 😆
  • Come puoi vedere 👆 sopra quando usi determinate classi Bootstrap che manipola laspetto dei componenti, erediti automaticamente alcuni comportamenti predefiniti che non vengono sovrascritti da Sketch2React. Per risolvere questo problema ho creato un CSS personalizzato :
Ho scritto io stesso questo codice? No, lho cercato su Google. 😆

Questo ha ottenuto quello che stavo cercando, eliminando quella brutta cosa di sottolineatura nel mio bellissimo pulsante! 👨🏻‍💻 Il risultato dellutilizzo di un CSS personalizzato 👇

Aaaa no ugly underlines here!

Se ritieni che il codice faccia davvero paura, non preoccuparti, Sketch2React funziona perfettamente senza tutte queste cose extra che ho aggiunto, il CSS personalizzato. Ricorda, lo uso da prima del rilascio della prima alpha pubblica, allinizio del 2018. 😺 💪

Le regole devono essere infrante (a volte)

Ci sono voluti un un po di traccia ed errore da capire. Risulta che una regola DropPages molto importante va totalmente contro una delle regole di collegamento più importanti di Sketch2React 😆

Normalmente quando si progetta per Sketch2React si collega in questo modo:

Comportamento di collegamento normale di Sketch2React

  1. Seleziona un componente con una proprietà collegabile
  2. Utilizza W allinterno di Sketch per collegare quel componente e unaltra pagina
  3. Aggiungi ./artboardname.html al pannello {attribute.url} allinterno di quel componente, come di seguito:

./artboardname.html

  1. Anche tutti i link che tornano allinizio deve essere denominato:

./index.html

Hai capito 🤖 💪 Questo assicura che tutto sia ordinato e piacevole nella nostra meravigliosa esportazione del codice. Significa anche che puoi semplicemente trascinare e rilasciare lintera cartella esportata (HTML) su un server FTP e tutti i collegamenti funzionano.

Per la nostra esportazione React è un po diverso poiché devi immergerti nel file esportato codice per far funzionare il collegamento, ma non è per questo tutorial. In realtà ne abbiamo uno per quello ovviamente 👨‍💻

Btw React non è nemmeno supportato da DropPages quindi lasciamo solo … ehm lascia perdere.

Cosa succede?

Il problema è che se segui questo e allo stesso tempo vuoi avere un buon flusso di lavoro per la pubblicazione di pagine su Dropbox tramite DropPages, dobbiamo infrangere questa regola. A volte le regole possono essere violate 😬 👍

In caso contrario, questo messaggio di errore ti colpirà come un mattone una volta che proverai a fare clic su qualsiasi elemento collegato ad altre pagine dopo aver pubblicato il tuo sito web (o prototipo) su DropPages :

LURL è corretto? Le pagine di contenuti non devono avere unestensione.

E non vogliamo che questo che succeda mai, giusto? Questa è la soluzione che ho scoperto funziona a meraviglia.

La correzione 🤖 💪

Basta rimuovere la solita estensione .html e funzionerà. Ma non da tutti i collegamenti che risalgono a Start! ⚠️

Regole specifiche di DropPages per i link di Sketch2React

  1. Seleziona un componente con una proprietà collegabile
  2. Utilizza la scorciatoia W allinterno di Sketch per collegare quel componente e unaltra pagina
  3. Aggiungi ./artboardname allattributo {.url} pannello allinterno di quel componente, come di seguito:

./artboardname

  1. Inoltre, tutti i link che tornano a Start devono ancora essere denominati :

./index.html

Presta particolare attenzione a questultima regola, nr 4 .

Come si imposta quindi un flusso di lavoro che funzioni sia per le esportazioni normali che per quelle specifiche di DropPages? In realtà, poiché sono solo i collegamenti che richiedono un po di aggiustamento, vorrei prima progettarlo e costruirlo con il normale flusso di lavoro e poi duplicare semplicemente lo stesso file di schizzo, chiamarlo qualcosa come myfilename-droppages e andare avanti con la mia vita.

Siamo designer quindi il lavoro manuale non ci spaventa, giusto? 😆 👍

Finalmente siamo pronti per esportare godamnit!

Okey quindi se non ti sei addormentato o hai avuto un esaurimento nervoso ti saluto migliore amico! Ora arriva la parte divertente di questo tutorial, lesportazione effettiva di oggetti da Sketch2React, in HTML e la pubblicazione sul tuo Dropbox!

Esportazione da Sketch2React a HTML

  1. Assicurati di visitare ogni pagina che hai progettato una volta – viene aggiunto al nostro pacchetto di esportazione in questo modo
  2. Premi il pulsante Download 👉 HTML e salvalo su disco
  3. Decomprimi il tuo zip
  4. Voilà hai finito! Ora carichiamolo su Dropbox!

Caricamento su Dropbox.com

Quello che ho trovato essere il modo più efficace per caricarlo è farlo effettivamente direttamente dal tuo browser . La sincronizzazione è più veloce, specialmente quando inizi a ricaricare gli stessi file più e più volte, cosa che probabilmente farai poiché uno aggiorna / corregge sempre le cose una volta che le vedi dal vivo.

Ma prima di farlo assicurati di comprimere le tue risorse immagine , io uso leccellente TinyPNG servizio per quello. Che, a differenza del suo nome, supporta anche JPGS.

Trascina questi file in Content

Tutte le tue pagine HTML vanno nella cartella Content del tuo sito web appena creato, il mio ha questo aspetto:

Rilascia i file HTML di Sketch2React esportati nella cartella denominata Content

Trascina questi file in pubblico

Pubblico contiene tutte le risorse CSS, Javascript e immagini. Il mio ha questo aspetto:

Trascina qui le cartelle CSS, JS e Immagine esportate di Sketch2React

Ora torna al tuo account DropPages e fai clic su Pubblica ora e il gioco è fatto! A volte possono essere necessari un paio di minuti perché tutto venga sincronizzato e caricato, sii paziente, funzionerà.

Se riscontri problemi di sincronizzazione premi il pulsante rosso Ripristina sincronizzazione, pubblica di nuovo e alla fine funzionerà.

Ecco il mio caricamento btw 👇

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

😺 👍 Questo è tutto gente, spero che questo tutorial vi sia piaciuto e lo troviate utile per il vostro flusso di lavoro dal design al codice.