Výukový program 👉 Jak publikovat hostovat svůj web na Dropboxu

(19. října 2020)

Tento výukový program slouží k exportu ze Sketch2React jako HTML a jeho publikování do vašeho vlastního Dropboxu! A to vás při hostování nebude stát desetník 🤖 💪

To vás zaujalo, že? „Kdo by ne? Příkladem použití pro tento pracovní postup může být:

  1. Vložili jste svou duši a pomocí našeho nástroje ytvořili krásný, plně responzivní web nebo prototyp pro Sketch
  2. Říkáš si:
    „Co teď ?! Opravdu musím za hostování platit? Musím se vůbec obtěžovat tím, že se učím o tom, jak spravovat publikační službu FTP / Cloud?
  3. Říkám: Ne, příteli, ne!

Pokud již Dropbox máte, máte pro vás elegantní řešení s názvem DropPages . Je to zdarma až 50 MB úložiště na webu, takže je perfektní k tomu, abyste své návrhy mohli dostat kamkoli. Stejně jako opravdu rychlé 🚀

Protože je celá vaše webová stránka v Dropboxu, úpravy a aktualizace souborů jsou otázkou výměny těch starých , počkejte, až se Dropbox synchronizuje a voila – aktualizováno!

Ukázalo se, že Dropbox je rychle planoucí . Každý, kdo má zkušenosti s hostováním stahovatelných souborů ve službě, to už ví, ale neměl jsem tušení, že hostování HTML, CSS a Javascript bude také hyperrychlé.

DropPages vyžaduje malé množství nastavení, obojí dříve, uvnitř aplikace Sketch a také poté, co jste exportovali svůj web do HTML z Sketch2React .

Žádné obavy, je to super snadné a já celou cestu s tebou. 🤖 💪

Požadavky na výuku

Jednoduchý ukázkový web

100\% vytvořeno pomocí aplikace Sketch pomocí 100\% stylovatelných komponent Sketch2React

Pro účely tohoto tutoriálu jsem vytvořil tento demo web 100\% vytvořeno uvnitř aplikace Sketch pomocí aplikace Sketch2React, která je hostována v mém Dropboxu. Úhledně?

Odtud si můžete stáhnout můj soubor náčrtu pro studijní účely 💎

👨‍🍳 Pokud jsi stále se mnou, pojďme vařit, že?

Krok 1 – Začínáme

Tato složka bude přidána do vašeho Dropboxu
  1. Přejít sem , přihlaste se do Dropboxu a povolte DropPages přístup k vašemu účtu. DropPages pro vás vytvoří samostatnou složku s názvem My.DropPages ve složce s názvem Aplikace. Žádné starosti, všechno je úhledně odděleno od všech vašich dalších věcí.
DropPages – Stiskněte modré tlačítko vlevo
  1. Stiskněte modré tlačítko Vytvořit nový web a pojmenujte jej tak, že do něj zahrnete slova droppages.com , jinak to nebude fungovat v mezích bezplatného účtu DropPages.

    yourname.droppages.com

    🤖 💪 ProTip! Pokud chcete mít vlastní doménu a více úložiště, stačí se zaregistrovat k placenému předplatnému . Tento výukový program předpokládá, že si to chcete vyzkoušet na 100\% zdarma, jako já. 😆

  2. Podívejme se, co pro nás DropPages vytvořilo. Máme tři složky:

Obsah a veřejné jsou ty, které pokrýváme v tomto výukovém programu
  1. přejděte do obsahu a Veřejné a smažte, co vám DropPages nainstaloval (index.txt a main.css) – ne potřebovat ty. Žádný strach, nahradíme tyto soubory vlastními úžasnými soubory HTML Sketch2React. Šablony, které můžete zcela ignorovat.

Krok 2 – Pojďme skočit do aplikace Sketch! 💎

Připravil jsem pěknou malou předváděcí web v aplikaci Sketch pomocí pouze našeho jednoduchého označení . Jelikož je to jen ukázka, proč se obtěžovat vytvářet více než dvě stránky? Jo přesně .

Použil jsem komponenty z naší bezplatné knihovny Sketch2React Components a provedl jsem v nich vlastní změny (samozřejmě jsem designér, co jiného dělal bych celý den? 😆)

Pouhým přidáním třídy Bootstrap btn-block this little tlačítko se v naší aplikaci pro kód stává plnou šířkou – mňam!

Pár věcí, které jsem udělal, bylo:

  • Restyled jedna z našich karetních komponent s pěkně modrým pozadím
  • Přepracovali jsme naše tlačítko tak, aby mělo plnou šířku, pomocí třídy Bootstrap s názvem
    btn-block
  • Použité úžasné bezplatné ilustrace od jednoho z mých absolutně oblíbených poskytovatelů dobrých věcí, Icons8 .
Whaaaat ?! Tento styl se mi vůbec nelíbí, jsem designér godamnit 😆
  • jak vidíte 👆 výše při použití určitých tříd Bootstrap který manipuluje se vzhledem komponent, automaticky zdědíte některá výchozí chování, která nejsou Sketch2React přepsána. Abych to napravil, vytvořil jsem vlastní CSS :
Napsal jsem tento kód sám? Ne, já jsem to vygooglil. 😆

Tím se dosáhlo toho, co jsem hledal, a zbavil se té ošklivé podtržené věci v mém krásném tlačítku! 👨🏻‍💻Výsledek použití vlastního CSS 👇

Aaaa žádné ošklivé podtržení zde!

Pokud máte pocit, že je kód opravdu děsivý, nemusíte se bát, Sketch2React funguje perfektně bez všech těchto dalších věcí, které jsem přidal, vlastní CSS. Pamatujte, že to používám od doby, kdy jsme vydali první veřejnou verzi alfa, začátek roku 2018. 😺 💪

Pravidla jsou porušována (někdy)

trochu stezky a chyby k pochopení. Ukázalo se, že jedno velmi důležité pravidlo DropPages je zcela v rozporu s jedním z nejdůležitějších pravidel propojení Sketch2React 😆

normálně při navrhování pro Sketch2React propojujete takto:

běžné chování při propojování Sketch2React
  1. Vyberte jednu komponentu, která má propojitelnou vlastnost
  2. Použijte W zástupce uvnitř aplikace Sketch pro propojení mezi touto komponentou a jinou stránkou
  3. Přidejte ./artboardname.html do panelu {attribute.url} uvnitř této komponenty, například níže:

./artboardname.html

  1. Také všechny odkazy zpět na Start je třeba pojmenovat:

./index.html

Rozumíte 🤖 💪 Díky tomu je v našem skvělém exportu kódu zajištěno, že je vše čisté a hezké. To také znamená, že můžete celou exportovanou složku (HTML) jednoduše přetáhnout na server FTP a všechny odkazy fungují.

U našeho React exportu je to trochu jiné, protože se musíte ponořit do exportovaného kód, aby propojení fungovalo, ale to není pro tento tutoriál. Vlastně máme samozřejmě jeden 👨‍💻

Btw React není ani podporován DropPages, tak to prostě … ehm upusťte.

Co se stane?

Problém je, že pokud budete postupovat podle tohoto a zároveň chcete mít dobrý pracovní postup pro publikování stránek na Dropbox přes DropPages, musíme toto pravidlo porušit. Někdy jsou pravidla porušována 😬 👍

Pokud ne, tato chybová zpráva vás zasáhne jako cihla, jakmile zkusíte kliknout na jakékoli prvky spojené s jinými stránkami, jakmile svůj web (nebo prototyp) publikujete na DropPages :

Je adresa URL správná? Obsahové stránky by neměly mít příponu.

A toto nechceme někdy se to stane, že? Toto je řešení, které jsem zjistil, funguje jako kouzlo.

Oprava 🤖 💪

Stačí odstranit obvyklou příponu .html a bude to fungovat. Ale ne ze všech odkazů, které se vracejí na začátek! ⚠️

Specifická pravidla DropPages pro odkazy Sketch2React

  1. Vyberte jednu komponentu, která má propojitelnou vlastnost
  2. Pomocí W zkratky uvnitř aplikace Sketch propojíte tuto komponentu s jinou stránkou.
  3. Přidat ./artboardname k atributu {.url} panel uvnitř této komponenty, například níže:

./artboardname

  1. Všechny odkazy směřující zpět na Start stále musí mít název :

./index.html

Věnujte zvláštní pozornost tomuto poslednímu pravidlu, č. 4 .

Jak nastavíte pracovní postup, který funguje jak pro normální exporty, tak pro konkrétní DropPages? Ve skutečnosti, protože je to jen odkazy, které potřebují trochu úpravy, nejdříve bych je navrhl a vytvořil s obvyklým pracovním tokem a pak jen duplikoval stejný soubor Sketch, nazval to něco jako myfilename-droppages a pokračoval s můj život.

Jsme designéři, takže nás manuální práce neděsí, že? 😆 👍

Konečně jsme připraveni exportovat godamnit!

Dobře, takže pokud jste doposud nezaspali nebo jste se psychicky zhroutili, zdravím vás, nejlepší příteli! Nyní přichází zábavná část tohoto výukového programu, skutečný export věcí ze Sketch2React, do HTML a jejich publikování do vašeho Dropboxu!

Export ze Sketch2React do HTML

  1. Nezapomeňte navštívit každou stránku, kterou jste navrhli jednou – tímto způsobem se přidá do našeho exportního balíčku
  2. Stiskněte tlačítko Stáhnout 👉 HTML a uložte jej na disk
  3. Rozbalte zip
  4. Voila, hotovo! Nyní to nahrajeme na Dropbox!

Nahrávání na Dropbox.com

To, co jsem našel, je nejúčinnější způsob nahrávání, je to vlastně udělat přímo z vašeho prohlížeče . Synchronizace je rychlejší, zvláště když začnete znovu a znovu nahrávat stejné soubory, což pravděpodobně uděláte, protože člověk vždy aktualizuje / opravuje věci, jakmile je uvidíte naživo.

Ale než to uděláte ujistěte se, že komprimujete své obrázkové podklady , používám vynikající TinyPNG služba za to. Který na rozdíl od svého názvu podporuje také JPGS.

Přetáhněte tyto soubory do obsahu

Všechny vaše stránky HTML přejdou do složky Obsah na vašem nově vytvořeném webu, moje vypadá takto:

Přetáhněte exportované soubory HTML Sketch2React do složky s názvem Content

Umístit tyto soubory na veřejné

Veřejné uchovává všechny vaše podklady CSS, Javascript a Image. Moje vypadá takto:

Sem přetáhněte exportované složky CSS, JS a obrázků Sketch2React

Nyní se vraťte ke svému účtu DropPages a stiskněte Publikovat nyní a máte hotovo! Někdy to může trvat několik minut, než se vše synchronizuje a nahraje, buďte trpěliví, bude to fungovat.

Pokud narazíte na problémy se synchronizací, stiskněte červené tlačítko Resetovat synchronizaci, znovu publikujte a nakonec to bude fungovat.

Tady je můj upload btw 👇

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

😺 👍 To jsou lidé, doufám, že se vám tento návod líbil a bude pro váš návrh užitečný pro pracovní tok kódu.