opetusohjelma 👉 Kuinka julkaista isĂ€nnöidĂ€ verkkosivustoasi Dropboxissa

(19. lokakuuta 2020)

TĂ€mĂ€ opetusohjelma on tarkoitettu vietĂ€vĂ€ksi Sketch2Reactista HTML-muodossa ja julkaisemaan se omaan Dropboxiin! Ja se ei maksa sinulle penniĂ€kÀÀn isĂ€nnöinnissĂ€ đŸ€– đŸ’Ș

Se sai sinut kiinnostumaan oikein? Kuka ei? TÀmÀn työnkulun kÀyttötapa voi olla:

  1. Olet kaatanut sielusi ja luonut kauniin, tÀysin reagoivan verkkosivuston tai prototyypin -työkalumme luonnokselle
  2. Sanot itsellesi:
    ”MitĂ€ nyt ?! PitÀÀkö minun todella maksaa tĂ€mĂ€n isĂ€nnöinnistĂ€? TĂ€ytyykö minun vaivautua edes itseĂ€ni oppimalla FTP- / pilvipalvelupalvelun hallinnan yksityiskohdat?
  3. Sanon: Ei, ystÀvÀni, et ole!

    Jos sinulla on jo Dropbox, sinulle on siisti ratkaisu, jota kutsutaan DropPages . Se on ilmainen, jopa 50 Mt verkkosivustotallennustilaa, joten se sopii tĂ€ydellisesti malliesi saamiseen siellĂ€. Kuten todella nopeasti 🚀

    Koska koko verkkosivustosi on silloin Dropboxissa, tiedostojen muokkaaminen ja pĂ€ivittĂ€minen on vain vanhojen korvaamista , odota, ettĂ€ Dropbox synkronoituu ja voila – pĂ€ivitetty!

    Osoittautuu, ettÀ Dropbox on palava nopeasti . Kaikki, joilla on ollut kokemusta ladattavien tiedostojen isÀnnöimisestÀ palveluun, tietÀvÀt tÀmÀn jo, mutta minulla ei ollut aavistustakaan, ettÀ HTML: n, CSS: n ja Javascriptin isÀnnöinti olisi myös erittÀin nopeaa.

    DropPages vaatii pienen mÀÀrityksen, molemmat aiemmin, Sketchin sisÀllÀ ja myös sen jÀlkeen, kun olet vienyt verkkosivustosi HTML-muotoon Sketch2React -palvelusta.

    Ei hĂ€tÀÀ, se on erittĂ€in helppoa ja olen kanssasi koko matkan. đŸ€– đŸ’Ș

    Opetusohjelman vaatimukset

    Yksinkertainen esittelysivusto

    100\% tehty SketchillÀ Sketch2React 100\% tyylikkÀillÀ komponenteilla

    TÀtÀ opetusohjelmaa varten olen luonut tÀmÀn esittelysivusto on tehty 100\% Sketchin sisÀllÀ kÀyttÀmÀllÀ Dretchboxissani isÀnnöityÀ Sketch2Reactia. Siisti?

    Voit ladata luonnostiedostoni tÀÀltĂ€ opiskelua varten 💎

    👹‍🍳 Jos haluat olet edelleen kanssani, aloitetaan ruoanlaitto?

    Vaihe 1 – Aloittaminen

    TÀmÀ kansio lisÀtÀÀn Dropboxiin
    1. Siirry tÀnne , kirjaudu Dropboxiin ja anna DropPagesille pÀÀsy tilillesi. DropPages luo sinulle erillisen kansion nimeltÀ My.DropPages kansioon nimeltÀ Apps. Ei hÀtÀÀ, kaikki on siististi erotettu muista esineistÀsi.
    DropPages – Paina sinistĂ€ painiketta vasemmalla
    1. Paina sinistÀ Luo uusi sivustopainike ja anna sille nimi, johon lisÀtÀÀn sanat droppages.com tai muuten se ei toimi ilmaisen DropPages-tilin rajoissa.

      yourname.droppages.com

      đŸ’Ș đŸ’Ș ProTip! Jos haluat mukautetun verkkotunnuksen + lisÀÀ tallennustilaa, voit kirjautua vain maksettuun tilaukseen . TĂ€ssĂ€ opetusohjelmassa oletetaan, ettĂ€ haluat vain kokeilla tĂ€tĂ€ 100\% ilmaiseksi, kuten minĂ€. 😆

    2. Katsotaanpa, mitÀ DropPages on luonut meille. MeillÀ on kolme kansiota:
    Katamme sisÀltö ja julkinen tÀssÀ opetusohjelmassa
    1. Siirry kohtaan SisĂ€ltö ja Julkinen ja poista DropPages-sovelluksen sinulle asennetut tiedostot (index.txt ja main.css) – emme tarvitsevat niitĂ€. Ei hĂ€tÀÀ, korvaamme nĂ€mĂ€ tiedostot omilla mahtavilla Sketch2React HTML-tiedostoillamme. Mallit, jotka voit jĂ€ttÀÀ kokonaan huomiotta.

    Vaihe 2 – HyppÀÀmme Sketchiin! 💎

    Olen valmistanut mukavan pienen esittelysivusto SketchissÀ yksinkertaisen -merkinnÀn avulla . Koska se on vain demo, miksi vaivautua tekemÀÀn enemmÀn kuin kaksi sivua? Joo tÀsmÀlleen .

    Olen kĂ€yttĂ€nyt komponentteja vapaasta Sketch2React Components -kirjastostamme ja tehnyt niihin mukautettuja muutoksia (tietysti olen suunnittelija, mitĂ€ muuta tekisinkö koko pĂ€ivĂ€n? 😆)

    LisÀÀmĂ€llĂ€ vain Bootstrap-luokka btn-estĂ€ tĂ€mĂ€ pieni painikkeesta tulee tĂ€ysi leveys koodisovelluksessamme – yummi!

    Muutama siisti asia, jonka tein:

    • uudelleen muotoiltu yksi korttikomponenteistamme, jolla on mukava sininen tausta
    • Muotoili painikkeemme tĂ€ysleveĂ€ksi kĂ€yttĂ€mĂ€llĂ€ Bootstrap-luokkaa, jonka nimi on
      btn-block
    • KĂ€ytti hĂ€mmĂ€styttĂ€viĂ€ ilmaisia ​​piirroksia yhdeltĂ€ ehdottomasta suosikkitarjontajistani, kuvakkeet8 .
    Whaaaat ?! En pidĂ€ tĂ€stĂ€ tyylistĂ€ ollenkaan, olen suunnittelija godamnit 😆
    • Kuten yllĂ€ olevasta 👆: stĂ€ nĂ€et, kun kĂ€ytĂ€t tiettyjĂ€ Bootstrap-luokkia joka manipuloi komponenttien ulkoasua, perit automaattisesti joitain oletuskĂ€yttĂ€ytymisiĂ€, joita Sketch2React ei korvaa. TĂ€mĂ€n korjaamiseksi luin mukautetun CSS: n:
    Kirjoitin itse tĂ€mĂ€n koodin? En googlannut sitĂ€. 😆

    Se saavutti etsimĂ€ni ja pÀÀsi eroon tuosta ruma alleviivausjutusta kauniissa painikkeessani! đŸ‘šđŸ»â€đŸ’» Mukautetun CSS: n kĂ€ytön tulos 👇

    Aaaa tÀssÀ ei ole rumaa alleviivaa!

    Jos sinusta tuntuu, ettĂ€ koodi on todella pelottava, ei hĂ€tÀÀ, Sketch2React toimii tĂ€ydellisesti ilman kaikkia nĂ€itĂ€ lisĂ€yksiĂ€, mukautettua CSS: ÀÀ. Muista, ettĂ€ olen kĂ€yttĂ€nyt tĂ€tĂ€ siitĂ€ lĂ€htien, kun julkaisimme ensimmĂ€isen julkisen alfan, vuoden 2018 alusta. đŸ˜ș đŸ’Ș

    SÀÀntöjen rikkominen (joskus)

    TÀmÀ on ottanut vÀhÀn jÀlkeÀ ja virheitÀ ymmÀrtÀÀ. Osoittautuu, ettÀ yksi erittÀin tÀrkeÀ DropPages-sÀÀntö on tÀysin yhden Sketch2Reactin tÀrkeimmÀn linkityssÀÀnnön vastainen kun suunnittelet Sketch2Reactia, linkitÀt nÀin:

    SÀÀnnöllinen Sketch2React-linkkikÀyttÀytyminen
    1. Valitse yksi komponentti, jolla on linkitettÀvÀ ominaisuus
    2. KÀytÀ W pikakuvake Sketchin sisÀllÀ linkittÀÀksesi kyseisen komponentin ja toisen sivun
    3. LisÀÀ ./artboardname.html kyseisen komponentin sisÀllÀ olevaan {attribute.url} -paneeliin, kuten alla:

    ./artboardname.html

    1. Myös kaikki linkit palaa alkuun on nimettÀvÀ:

    ./index.html

    Saat sen đŸ€– đŸ’Ș TĂ€mĂ€ varmistaa, ettĂ€ kaikki on siistiĂ€ ja mukavaa upeassa koodin viennissĂ€. Se tarkoittaa myös, ettĂ€ voit vain vetÀÀ ja pudottaa koko viedyn kansion (HTML) FTP-palvelimelle ja kaikki linkit vain toimivat.

    React-viennissĂ€mme se on hieman erilainen, koska sinun on sukelettava vietyyn koodi saadaksesi linkityksen toimimaan, mutta se ei ole tĂ€lle opetusohjelmalle. MeillĂ€ todellisuudessa on sellainen tietysti tietenkin đŸ‘šâ€đŸ’»

    DropPages ei tue edes Btw React -ohjelmaa, joten pudotetaan vain
 ehm.

    MitÀ tapahtuu?

    Ongelma on, ettĂ€ jos noudatat tĂ€tĂ€ ja haluat samalla luoda hyvĂ€n työnkulun sivujen julkaisemiseen Dropboxiin DropPagesin kautta, meidĂ€n on rikottava tĂ€mĂ€ sÀÀntö. Joskus sÀÀntöjĂ€ voidaan rikkoa 😬 👍

    Jos ei, tÀmÀ virheilmoitus osuu sinuun kuin tiili, kun yritÀt napsauttaa muita sivuja linkitettyjÀ elementtejÀ, kun olet julkaissut verkkosivustosi (tai prototyypin) DropPages-sivustolla :

    Onko URL oikea? SisÀltösivuilla ei pitÀisi olla laajennusta.

    Ja emme halua tÀtÀ koskaan tapahtua, eikö? TÀmÀ on ratkaisu, jonka sain selville toimivan kuin viehÀtys.

    Korjaus đŸ€– đŸ’Ș

    Poista vain tavallinen .html-laajennus ja se toimii. Mutta ei kaikista linkeistĂ€, jotka palaavat Alkuun! ⚠

    DropPages-erityissÀÀnnöt Sketch2React-linkeille

    1. Valitse yksi komponentti, jolla on linkitettÀvÀ ominaisuus
    2. LinkitÀ kyseisen komponentin ja toisen sivun vÀlillÀ Sketchin sisÀllÀ W -pikanÀppÀimellÀ
    3. LisÀÀ ./artboardname {-mÀÀritteeseen.url} -paneeli kyseisen komponentin sisÀllÀ, kuten alla:

    ./artboardname

    1. Myös kaikki Start -linkit palaavat -nimiin:

    ./index.html

    KiinnitÀ erityistÀ huomiota viimeiseen sÀÀntöön, nr 4 .

    Kuinka mÀÀritÀt sitten työnkulun, joka toimii sekÀ tavallisessa viennissÀ ettÀ DropPages-tietyissÀ? Itse asiassa, koska vain linkit tarvitsevat vÀhÀn sÀÀtöÀ, suunnittelen ensin ja rakennan sen tavallisella työnkululla ja kopioin sitten vain saman Sketch-tiedoston, kutsumme sitÀ nimellÀ myfilename-droppages ja pÀÀsen eteenpÀin elÀmÀni.

    Olemme suunnittelijoita, joten manuaalinen työ ei pelota meitĂ€, eikö? 😆 👍

    Viimeinkin olemme valmiita viemÀÀn godamnitin!

    Okey, joten jos et ole vielÀ nukahtanut tai sinulla on henkinen hajoaminen, tervehdin sinua ystÀvÀllesi! Nyt tulee tÀmÀn opetusohjelman hauska osa, varsinainen tavaroiden vieminen Sketch2Reactista HTML-muotoon ja julkaiseminen Dropboxiin!

    Vie Sketch2Reactista HTML-muotoon

    1. Varmista, ettĂ€ vierailet jokaisella suunnittelemallasi sivulla kerran – se lisĂ€tÀÀn vientipakettiin tĂ€llĂ€ tavalla
    2. Paina Lataa 👉 HTML-painiketta ja tallenna se levylle
    3. Pura pakattu zip
    4. Voila olet valmis! Ladataan nyt tÀmÀ Dropboxiin!

    Lataaminen Dropbox.com-sivustoon

    Minun mielestĂ€ni tehokkain tapa ladata tĂ€mĂ€ on todella tehdĂ€ tĂ€mĂ€ suoraan selaimeltasi . Synkronointi on nopeampaa, varsinkin kun aloitat samojen tiedostojen uudelleenlataamisen uudestaan ​​ja uudestaan, mitĂ€ todennĂ€köisesti teetkin, koska joku pĂ€ivittÀÀ / korjaa asiat aina, kun nĂ€et ne livenĂ€.

    Mutta ennen kuin teet niin varmista, ettÀ pakkaat kuvavarasi , kÀytÀn erinomaista TinyPNG palvelu sitÀ varten. MikÀ pÀinvastoin kuin sen nimi tukee myös JPGS: ÀÀ.

    Pudota nÀmÀ tiedostot SisÀltöön

    Kaikki HTML-sivusi menevÀt uuden luomasi verkkosivuston SisÀltö-kansioon, minun nÀyttÀÀ tÀltÀ:

    Pudota viedyt Sketch2React-HTML-tiedostot kansioon nimeltÀ SisÀltö

    Pudota nÀmÀ tiedostot julkiseksi

    Julkinen pitÀÀ sisÀllÀÀn kaikki CSS-, Javascript- ja Image-resurssit. Oma nÀyttÀÀ tÀltÀ:

    Pudota viedyt Sketch2React CSS-, JS- ja Image-kansiot tÀnne

    Palaa nyt DropPages-tilillesi ja paina Julkaise nyt ja olet valmis! Joskus kaiken synkronointi ja lataaminen voi viedÀ muutaman minuutin, ole vain kÀrsivÀllinen, se toimii.

    Jos sinulla on synkronointiongelmia, osoita sitÀ punaista Nollaa synkronointipainiketta, julkaise uudelleen ja se lopulta toimii.

    TĂ€ssĂ€ on lataamani btw 👇

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

    đŸ˜ș 👍 Se on se, ihmiset, toivottavasti pidit tĂ€stĂ€ opetusohjelmasta ja pidĂ€t sitĂ€ hyödyllisenĂ€ suunnittelussa työnkulun koodaamiseen.