{"id":591,"date":"2020-10-17T16:39:35","date_gmt":"2020-10-17T14:39:35","guid":{"rendered":"https:\/\/sketch2react.io\/blog\/?p=591"},"modified":"2021-10-11T20:24:42","modified_gmt":"2021-10-11T18:24:42","slug":"tutorial-how-to-publish-host-your-website-on-dropbox","status":"publish","type":"post","link":"https:\/\/sketch2react.io\/blog\/tutorial-how-to-publish-host-your-website-on-dropbox\/","title":{"rendered":"Tutorial &#8211; How to publish &#038; host your website on Dropbox"},"content":{"rendered":"\r\n<div class=\"boldgrid-section is-layout-flow wp-block-quote-is-layout-flow\">\r\n<div class=\"container\">\r\n<div class=\"row\" style=\"padding-bottom: 16px; padding-top: 0px;\">\r\n<div class=\"col-md-12 col-xs-12 col-sm-12\">\r\n<blockquote class=\"wp-block-quote\">\r\n<p>This tutorial is for exporting from Sketch2React as HTML and publishing it to your own Dropbox! And it will not cost you a dime in hosting.<\/p>\r\n<\/blockquote>\r\n<p class=\"\">That got you interested right? Who wouldn\u2019t? Use case for this workflow could be:<\/p>\r\n<ol class=\"\" style=\"padding: 0px 0px 16px 40px;\">\r\n<li>You have poured your soul into and created a beautiful, fully responsive website or prototype with our <a href=\"https:\/\/sketch2react.io\" target=\"_blank\" rel=\"noopener noreferrer\">tool<\/a> for Sketch<\/li>\r\n<li>You say to yourself:<br>\u201dNow what?! Do I really need to pay for hosting this? Do I even need to bother myself with learning the ins and outs of how to manage a FTP\/Cloud publishing service?<\/li>\r\n<li>I say: No my friend you don\u2019t!<\/li>\r\n<\/ol>\r\n<p class=\"\">If you already have Dropbox there\u2019s a neat solution for you called <a href=\"https:\/\/droppages.com\" target=\"_blank\" rel=\"noopener noreferrer\">DropPages<\/a>. It\u2019s free up to 50MB of website storage so it\u2019s perfect for just getting your designs out there. Like really fast ?<\/p>\r\n<p class=\"\">Also since your entire website is then on Dropbox, <strong>editing and updating the files is just a matter of replacing the old ones<\/strong>, wait for Dropbox to sync and voila \u2013 updated!<\/p>\r\n<p class=\"\">Turns out Dropbox is <strong>blazing fast<\/strong>. Everyone who has had the experience of hosting downloadable files on the service already knows this, but I had no idea hosting HTML, CSS and Javascript would also be hyper fast.<\/p>\r\n<p class=\"\">DropPages requires a small amount of setup, both before, inside Sketch and also after you have exported your website to HTML from <a href=\"https:\/\/sketch2react.io\" target=\"_blank\" rel=\"noopener noreferrer\">Sketch2React<\/a>.<\/p>\r\n<p class=\"\">No worries, it\u2019s super easy and I\u2019m with you all the way.&nbsp;<\/p>\r\n<h2 class=\"\">Tutorial requirements<\/h2>\r\n<ul class=\"\">\r\n<li>Sketch app 68+<\/li>\r\n<li><a href=\"https:\/\/sketch2react.io\" target=\"_blank\" rel=\"noopener noreferrer\">Sketch2React app 1.6.8<\/a><\/li>\r\n<li><a href=\"https:\/\/www.dropbox.com\" target=\"_blank\" rel=\"noopener noreferrer\">Dropbox account<\/a><\/li>\r\n<li><a href=\"https:\/\/droppages.com\" target=\"_blank\" rel=\"noopener noreferrer\">DropPages account<\/a>, works with the free plan<\/li>\r\n<\/ul>\r\n<\/div>\r\n<\/div>\r\n<h2 class=\"\">Simple demo website<\/h2>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n<div class=\"wp-block-image\">\r\n<figure class=\"aligncenter\">\r\n<p class=\"mod-reset\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-582\" src=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/10\/s2rdemowebsitedroppages.png\" alt=\"100% made with Sketch using Sketch2React 100% styleable components\" width=\"1395\" height=\"1388\"><\/p>\r\n<figcaption>100% made with Sketch using Sketch2React 100% styleable components<\/figcaption>\r\n<\/figure>\r\n<\/div>\r\n\r\n\r\n\r\n<div class=\"boldgrid-section\">\r\n<div class=\"container\">\r\n<div class=\"row\">\r\n<div class=\"col-md-12 col-xs-12 col-sm-12\">\r\n<p class=\"\">For purpose of this tutorial I created this <a href=\"http:\/\/s2rdemo.droppages.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">demo website<\/a> 100% made inside Sketch using Sketch2React that\u2019s hosted on my Dropbox. Neat eh?<\/p>\r\n<p class=\"\">You can download my <a href=\"https:\/\/www.dropbox.com\/s\/vt1dnwmqxlomomq\/Portfolio%20From%20Scratch%20Article.sketch?dl=0\" target=\"_blank\" rel=\"noopener noreferrer\">Sketch file<\/a> from here for studying purposes&nbsp;<\/p>\r\n<p class=\"\">If you\u2019re still with me let\u2019s get cooking shall we?<\/p>\r\n<h2 class=\"\">Step 1 &#8211; Getting started<\/h2>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n<div class=\"wp-block-image\">\r\n<figure class=\"aligncenter\">\r\n<p class=\"mod-reset\"><img loading=\"lazy\" decoding=\"async\" width=\"845\" height=\"521\" class=\"wp-image-590\" src=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/10\/droppagesfolder.gif\" alt=\"This folder gets added to your Dropbox\"><\/p>\r\n<figcaption>This folder gets added to your Dropbox<\/figcaption>\r\n<\/figure>\r\n<\/div>\r\n\r\n\r\n\r\n<div class=\"boldgrid-section\">\r\n<div class=\"container\">\r\n<div class=\"row\" style=\"padding-bottom: 16px;\">\r\n<div class=\"col-md-12 col-xs-12 col-sm-12\">\r\n<ol class=\"wp-block-list\">\r\n<li>Go <a href=\"https:\/\/my.droppages.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">here<\/a>, sign in to Dropbox and allow DropPages to have access to your account. DropPages creates a separate folder for you called My.DropPages in the folder named Apps. No worries, everything is neatly separated from all of your other thingies.<\/li>\r\n<\/ol>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\n<div class=\"wp-block-image\">\r\n<figure class=\"aligncenter\">\r\n<p class=\"mod-reset\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"471\" class=\"wp-image-583\" src=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/10\/droppages-addwebsite.gif\" alt=\"DropPages - Press the blue button on the left\"><\/p>\r\n<figcaption>DropPages &#8211; Press the blue button on the left<\/figcaption>\r\n<\/figure>\r\n<\/div>\r\n\r\n\r\n\r\n<div class=\"boldgrid-section\">\r\n<div class=\"container\">\r\n<div class=\"row\" style=\"padding-bottom: 16px;\">\r\n<div class=\"col-md-12 col-xs-12 col-sm-12\">\r\n<ol class=\"wp-block-list\" start=\"2\">\r\n<li>Press the blue <strong>Create a new site button<\/strong> and give it a name where you include the words <em>droppages.com<\/em> or it will not work within the limits of the free DropPages account.<br><br><code>yourname.droppages.com<\/code><br><br><strong>ProTip!<\/strong> If you want to have a custom domain + more storage you can just sign up for a <a href=\"https:\/\/my.droppages.com\/account\/subscription\" target=\"_blank\" rel=\"noopener noreferrer\">paid subscription<\/a>. This tutorial assumes you just want to try this out 100% for free, like me.&nbsp;<\/li>\r\n<li>Let\u2019s look at what DropPages has created for us. We have three folders:<\/li>\r\n<\/ol>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\n<div class=\"wp-block-image\">\r\n<figure class=\"aligncenter\">\r\n<p class=\"mod-reset\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-587\" src=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/10\/dpthreefolder.png\" alt=\"Content and Public are the ones we're covering in this tutorial\" width=\"903\" height=\"596\"><\/p>\r\n<figcaption>Content and Public are the ones we&#8217;re covering in this tutorial<\/figcaption>\r\n<\/figure>\r\n<\/div>\r\n\r\n\r\n\r\n<div class=\"boldgrid-section\">\r\n<div class=\"container\">\r\n<div class=\"row\">\r\n<div class=\"col-md-12 col-xs-12 col-sm-12\">\r\n<ol class=\"wp-block-list\" start=\"4\">\r\n<li>Go into <strong>Content<\/strong> and <strong>Public<\/strong> and delete what DropPages has installed for you (index.txt and main.css) &#8211; we don\u2019t need those. No worries, we\u2019ll be replacing those files with our own, awesome Sketch2React HTML files. Templates you can totally ignore.<\/li>\r\n<\/ol>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\n<div class=\"boldgrid-section\">\r\n<div class=\"container\">\r\n<div class=\"row bg-editor-hr-wrap\">\r\n<div class=\"col-md-12 col-xs-12 col-sm-12\">\r\n<div class=\"row bg-editor-hr-wrap\">\r\n<div class=\"col-md-12 col-xs-12 col-sm-12\"><hr class=\"wp-block-separator\"><\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\n<div class=\"boldgrid-section\">\r\n<div class=\"container\">\r\n<div class=\"row\">\r\n<div class=\"col-md-12 col-xs-12 col-sm-12\">\r\n<h2 class=\"wp-block-heading\">Step 2 &#8211; Let\u2019s jump into Sketch! ?<\/h2>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\n<div class=\"wp-block-image\">\r\n<figure class=\"aligncenter\">\r\n<p class=\"mod-reset\"><a href=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/10\/Sk\u00e4rmavbild-2020-10-13-kl.-16.39.28-e1602944926122.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-606 size-full\" src=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/10\/sketchview.png\" alt=\"\" width=\"2872\" height=\"1668\" srcset=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/10\/sketchview.png 2872w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/10\/sketchview-300x174.png 300w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/10\/sketchview-1024x595.png 1024w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/10\/sketchview-768x446.png 768w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/10\/sketchview-1536x892.png 1536w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/10\/sketchview-2048x1189.png 2048w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/10\/sketchview-250x145.png 250w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/10\/sketchview-550x319.png 550w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/10\/sketchview-800x465.png 800w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/10\/sketchview-310x180.png 310w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/10\/sketchview-517x300.png 517w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/10\/sketchview-861x500.png 861w\" sizes=\"auto, (max-width: 2872px) 100vw, 2872px\" \/><\/a><\/p>\r\n<\/figure>\r\n<\/div>\r\n\r\n\r\n\r\n<div class=\"boldgrid-section\">\r\n<div class=\"container\">\r\n<div class=\"row\">\r\n<div class=\"col-md-12 col-xs-12 col-sm-12\">\r\n<p class=\"\">I have prepared a nice little demo website in Sketch using just our simple <a href=\"https:\/\/sketch2react.gitbook.io\/sketch2react-io\/learn\/cheat-sheet\" target=\"_blank\" rel=\"noopener noreferrer\">markup<\/a>. Since it\u2019s just a demo why bother making more than two pages? <em>Yeah exactly<\/em>.<\/p>\r\n<p class=\"\">I have used components from our free <a href=\"https:\/\/www.sketch.com\/s\/3fbdbeeb-cfb4-4a26-be9b-632358ee1e64\" target=\"_blank\" rel=\"noopener noreferrer\">Sketch2React Components<\/a> library and made custom changes to them (of course, I am a designer, what else would I do all day?)<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\n\r\n\r\n<div class=\"wp-block-image\">\r\n<figure class=\"aligncenter\">\r\n<p class=\"mod-reset\"><a href=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/10\/custombutton.png\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-578\" src=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/10\/custombutton.png\" alt=\"Just by adding the Bootstrap class btn-block this little button becomes full width in our code app - yummi!\" width=\"2218\" height=\"1198\" srcset=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/10\/custombutton.png 2218w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/10\/custombutton-300x162.png 300w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/10\/custombutton-1024x553.png 1024w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/10\/custombutton-768x415.png 768w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/10\/custombutton-1536x830.png 1536w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/10\/custombutton-2048x1106.png 2048w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/10\/custombutton-250x135.png 250w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/10\/custombutton-550x297.png 550w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/10\/custombutton-800x432.png 800w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/10\/custombutton-333x180.png 333w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/10\/custombutton-555x300.png 555w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/10\/custombutton-926x500.png 926w\" sizes=\"auto, (max-width: 2218px) 100vw, 2218px\" \/><\/a><\/p>\r\n<figcaption>Just by adding the Bootstrap class btn-block this little button becomes full width in our code app &#8211; yummi!<\/figcaption>\r\n<\/figure>\r\n<\/div>\r\n\r\n\r\n\r\n<div class=\"boldgrid-section\">\r\n<div class=\"container\">\r\n<div class=\"row\">\r\n<div class=\"col-md-12 col-xs-12 col-sm-12\">\r\n<h2 class=\"wp-block-heading\">A couple of neat things I did was:<\/h2>\r\n<ul class=\"\">\r\n<li>Restyled one of our card components with a nice blue background<\/li>\r\n<li>Restyled our button to be full width by using a Bootstrap class called <br><code>btn-block<\/code><\/li>\r\n<li>Used amazing free illustrations from one of my absolute favourite providers of good things, <a href=\"https:\/\/icons8.com\/illustrations\" target=\"_blank\" rel=\"noopener noreferrer\">Icons8<\/a>.<\/li>\r\n<\/ul>\r\n<p>&nbsp;<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\n\r\n\r\n<div class=\"wp-block-image\">\r\n<figure class=\"aligncenter\">\r\n<p class=\"mod-reset\"><img loading=\"lazy\" decoding=\"async\" width=\"475\" height=\"648\" class=\"wp-image-584\" src=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/10\/linkissue.gif\" alt=\"Whaaaat?! I don't like this styling at all, I'm a designer godamnit ?\"><\/p>\r\n<figcaption>Whaaaat?! I don&#8217;t like this styling at all, I&#8217;m a designer godamnit\r\n<p class=\"mod-reset\">?<\/p>\r\n<\/figcaption>\r\n<\/figure>\r\n<\/div>\r\n\r\n\r\n\r\n<div class=\"boldgrid-section\">\r\n<div class=\"container\">\r\n<div class=\"row\" style=\"padding-top: 0px;\">\r\n<div class=\"col-md-12 col-xs-12 col-sm-12\">\r\n<ul class=\"wp-block-list\">\r\n<li>As you can see above when using certain Bootstrap classes that manipulates the look of components you automatically inherit some default behaviours that are not overwritten by Sketch2React. To fix this I created a <a href=\"https:\/\/www.dropbox.com\/s\/yy9vp4h18xd51xr\/nolink.css?dl=0\" target=\"_blank\" rel=\"noopener noreferrer\">custom CSS<\/a>:<\/li>\r\n<\/ul>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\n<div class=\"wp-block-image\">\r\n<figure class=\"aligncenter\">\r\n<p class=\"mod-reset\"><img loading=\"lazy\" decoding=\"async\" width=\"869\" height=\"713\" class=\"wp-image-579\" src=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/10\/Carbonize-2020-10-15-at-08.44.18.png\" alt=\"Did I write this code myself? Nope I googled it. ?\" srcset=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/10\/Carbonize-2020-10-15-at-08.44.18.png 869w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/10\/Carbonize-2020-10-15-at-08.44.18-300x246.png 300w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/10\/Carbonize-2020-10-15-at-08.44.18-768x630.png 768w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/10\/Carbonize-2020-10-15-at-08.44.18-250x205.png 250w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/10\/Carbonize-2020-10-15-at-08.44.18-550x451.png 550w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/10\/Carbonize-2020-10-15-at-08.44.18-800x656.png 800w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/10\/Carbonize-2020-10-15-at-08.44.18-219x180.png 219w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/10\/Carbonize-2020-10-15-at-08.44.18-366x300.png 366w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/10\/Carbonize-2020-10-15-at-08.44.18-609x500.png 609w\" sizes=\"auto, (max-width: 869px) 100vw, 869px\" \/><\/p>\r\n<figcaption>Did I write this code myself? Nope I googled it.\r\n<p class=\"mod-reset\">?<\/p>\r\n<\/figcaption>\r\n<\/figure>\r\n<\/div>\r\n\r\n\r\n\r\n<div class=\"boldgrid-section\">\r\n<div class=\"container\">\r\n<div class=\"row\">\r\n<div class=\"col-md-12 col-xs-12 col-sm-12\">\r\n<p class=\"\">That achieved what I was looking for, getting rid of that ugly underline thingie in my beautiful button! The result of using a custom CSS<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\n<div class=\"wp-block-image\">\r\n<figure class=\"aligncenter\">\r\n<p class=\"mod-reset\"><img loading=\"lazy\" decoding=\"async\" width=\"468\" height=\"588\" class=\"wp-image-581\" src=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/10\/nolinkcss.gif\" alt=\"Aaaa no ugly underlines here!\"><\/p>\r\n<figcaption>Aaaa no ugly underlines here!<\/figcaption>\r\n<\/figure>\r\n<\/div>\r\n\r\n\r\n\r\n<div class=\"boldgrid-section\">\r\n<div class=\"container\">\r\n<div class=\"row\">\r\n<div class=\"col-md-12 col-xs-12 col-sm-12\">\r\n<p class=\"\">If you feel that code is really scary, no worries, Sketch2React works perfectly well without all these extra thingies I added, the custom CSS. Remember, I\u2019ve been using this since before we released the first public alpha, beginning of 2018.<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\n<div class=\"boldgrid-section\">\r\n<div class=\"container\">\r\n<div class=\"row bg-editor-hr-wrap\">\r\n<div class=\"col-md-12 col-xs-12 col-sm-12\">\r\n<div class=\"row bg-editor-hr-wrap\">\r\n<div class=\"col-md-12 col-xs-12 col-sm-12\"><hr class=\"wp-block-separator\"><\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\n<div class=\"boldgrid-section\">\r\n<div class=\"container\">\r\n<div class=\"row\">\r\n<div class=\"col-md-12 col-xs-12 col-sm-12\">\r\n<h2 class=\"wp-block-heading\">Rules are ment to be broken (sometimes)<\/h2>\r\n<p class=\"\">This has taken a bit of trail and error to understand. Turns out one very important DropPages rule <strong>goes totally against one of Sketch2React\u2019s most important linking rules.<\/strong><\/p>\r\n<h4>Normally when designing for Sketch2React you link like this:<\/h4>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n<div class=\"wp-block-image\">\r\n<figure class=\"aligncenter\">\r\n<p class=\"mod-reset\"><a href=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/10\/NormalS2RLinking@2x.png\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-577\" src=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/10\/NormalS2RLinking@2x.png\" alt=\"Normal Sketch2React linking behaviour\" width=\"2048\" height=\"1028\" srcset=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/10\/NormalS2RLinking@2x.png 2048w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/10\/NormalS2RLinking@2x-300x151.png 300w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/10\/NormalS2RLinking@2x-1024x514.png 1024w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/10\/NormalS2RLinking@2x-768x386.png 768w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/10\/NormalS2RLinking@2x-1536x771.png 1536w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/10\/NormalS2RLinking@2x-250x125.png 250w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/10\/NormalS2RLinking@2x-550x276.png 550w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/10\/NormalS2RLinking@2x-800x402.png 800w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/10\/NormalS2RLinking@2x-359x180.png 359w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/10\/NormalS2RLinking@2x-598x300.png 598w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/10\/NormalS2RLinking@2x-996x500.png 996w\" sizes=\"auto, (max-width: 2048px) 100vw, 2048px\" \/><\/a><\/p>\r\n<figcaption>Normal Sketch2React linking behaviour<\/figcaption>\r\n<\/figure>\r\n<\/div>\r\n\r\n\r\n\r\n<div class=\"boldgrid-section\">\r\n<div class=\"container\">\r\n<div class=\"row\">\r\n<div class=\"col-md-12 col-xs-12 col-sm-12\">\r\n<ol class=\"wp-block-list\">\r\n<li>Select one component that has a linkable property<\/li>\r\n<li>Use the <strong>W<\/strong> shortcut inside Sketch to link between that component and another page<\/li>\r\n<li>Add .\/artboardname.html to the {attribute.url} panel inside that component, like below:<\/li>\r\n<\/ol>\r\n<p class=\"\"><code>.\/artboardname.html<\/code><\/p>\r\n<ol start=\"4\">\r\n<li>Also all links <strong>going back to Start<\/strong> need to be named:<\/li>\r\n<\/ol>\r\n<p><code>.\/index.html<\/code><\/p>\r\n<p class=\"\">You get it. This makes sure everything is neat and nice in our wonderful code export. It also means you can just drag and drop the entire exported folder (HTML) onto a FTP server and all the links just work.<\/p>\r\n<p class=\"\">For our React export it\u2019s a bit different since you need to dive into the exported code to get the linking working but that\u2019s not for this tutorial. We actually <a href=\"https:\/\/youtu.be\/fp6RYhMvPmQ\" target=\"_blank\" rel=\"noopener noreferrer\">have one<\/a> for that of course.<\/p>\r\n<p>Btw React is not even supported by DropPages so let\u2019s just \u2026 ehm drop that.<\/p>\r\n<h2 class=\"\">What happens?<\/h2>\r\n<p class=\"\">Problem is, if you follow this and at the same time want to have a good workflow for publishing pages to Dropbox via DropPages we need to break this rule. Sometimes rules are there to be broken.<\/p>\r\n<p class=\"\">If not this error message will hit you like a brick once you try clicking on any elements linked to other pages once you have published your website (or prototype) to DropPages:<\/p>\r\n<blockquote class=\"wp-block-quote\">\r\n<p>Is the URL correct? <strong>Content pages should not have an extension.<\/strong><\/p>\r\n<\/blockquote>\r\n<p class=\"\">And we don\u2019t want this to ever happen, right? This is the solution I found out works like a charm.<\/p>\r\n<h2 class=\"\">The fix<\/h2>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n<div class=\"wp-block-image\">\r\n<figure class=\"aligncenter\">\r\n<p class=\"mod-reset\"><a href=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/10\/DropPagesLinking@2x.png\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-588\" src=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/10\/DropPagesLinking@2x.png\" alt=\"Just remove the usual .html extension and it will work. But not from all links going back to Start! \u26a0\ufe0f\" width=\"2048\" height=\"1028\" srcset=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/10\/DropPagesLinking@2x.png 2048w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/10\/DropPagesLinking@2x-300x151.png 300w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/10\/DropPagesLinking@2x-1024x514.png 1024w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/10\/DropPagesLinking@2x-768x386.png 768w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/10\/DropPagesLinking@2x-1536x771.png 1536w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/10\/DropPagesLinking@2x-250x125.png 250w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/10\/DropPagesLinking@2x-550x276.png 550w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/10\/DropPagesLinking@2x-800x402.png 800w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/10\/DropPagesLinking@2x-359x180.png 359w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/10\/DropPagesLinking@2x-598x300.png 598w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/10\/DropPagesLinking@2x-996x500.png 996w\" sizes=\"auto, (max-width: 2048px) 100vw, 2048px\" \/><\/a><\/p>\r\n<figcaption>Just remove the usual .html extension and it will work. But not from all links going back to Start!\r\n<p class=\"mod-reset\">\u26a0\ufe0f<\/p>\r\n<\/figcaption>\r\n<\/figure>\r\n<\/div>\r\n\r\n\r\n\r\n<div class=\"boldgrid-section\">\r\n<div class=\"container\">\r\n<div class=\"row\" style=\"padding-bottom: 16px;\">\r\n<div class=\"col-md-12 col-xs-12 col-sm-12\">\r\n<h3 class=\"wp-block-heading\">DropPages specific rules for Sketch2React links<\/h3>\r\n<ol>\r\n<li>Select one component that has a linkable property<\/li>\r\n<li>Use the <strong>W<\/strong> shortcut inside Sketch to link between that component and another page<\/li>\r\n<li>Add .\/artboardname to the <strong>{attribute.url}<\/strong> panel inside that component, like below:<\/li>\r\n<\/ol>\r\n<p class=\"\"><code>.\/artboardname<\/code><\/p>\r\n<ol start=\"4\">\r\n<li>Also all links going back to Start <strong>still need <\/strong>to be named:<\/li>\r\n<\/ol>\r\n<p class=\"\"><code>.\/index.html<\/code><\/p>\r\n<p class=\"\">Pay special attention to that last rule, nr 4.<\/p>\r\n<p class=\"\">How do you then setup a workflow that both works for normal exports and DropPages specific ones? Actually since it\u2019s only the links that need a bit of adjustment I would first design and build it with the usual workflow and then just duplicate that same Sketch file, call it something like <em>myfilename-droppages<\/em> and get on with my life.<\/p>\r\n<p class=\"\">We are designers so manual labour does not scare us, right?<\/p>\r\n<h2 class=\"\">Finally we\u2019re ready to export godamnit!<\/h2>\r\n<p class=\"\">Okey so if you haven\u2019t fallen asleep by now or had a mental break down I salute you best of friend! Now comes the fun part of this tutorial, the actual exporting things out of Sketch2React, out to HTML and publishing it onto your Dropbox!<\/p>\r\n<h2 class=\"\">Exporting from Sketch2React to HTML<\/h2>\r\n<p><div class=\"nv-iframe-embed\"><iframe loading=\"lazy\" title=\"Sketch2React - Add pages For HTML export\" width=\"1200\" height=\"675\" src=\"https:\/\/www.youtube.com\/embed\/7Fun9SUitx0?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/div><\/p>\r\n<ol class=\"\" style=\"padding: 0px 0px 16px 40px;\">\r\n<li>Make sure you visit each page you have designed <strong>once<\/strong> &#8211; it gets added to our export bundle that way<\/li>\r\n<li>Press the Download ? HTML button and save it to disc<\/li>\r\n<li>Unzip your zip<\/li>\r\n<li>Voila you\u2019re done! Now let\u2019s upload this to Dropbox!<\/li>\r\n<\/ol>\r\n<h2 class=\"\">Uploading to Dropbox.com<\/h2>\r\n<p class=\"\">What I have found be the most effective way of uploading this is to actually do this <strong>directly from your browser<\/strong>. The syncing is faster, specially when you start re-uploading the same files over and over again, which you probably will do since one always updates\/fixes things once you see them live.<\/p>\r\n<p class=\"\">But before you do that make sure <strong>you compress your image assets<\/strong>, I use the excellent <a href=\"https:\/\/tinypng.com\" target=\"_blank\" rel=\"noopener noreferrer\">TinyPNG<\/a> service for that. Which, in contrast to its name also supports JPGS.<\/p>\r\n<h2 class=\"\">Drop these files into Content<\/h2>\r\n<p class=\"\">All your HTML pages goes into the Content folder on your newly created website, mine looks like this:<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n<div class=\"wp-block-image\">\r\n<figure class=\"aligncenter\">\r\n<p class=\"mod-reset\"><a href=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/10\/droppages-content.png\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-586\" src=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/10\/droppages-content.png\" alt=\"Drop your exported HTML files into the folder called Content\" width=\"2793\" height=\"1189\" srcset=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/10\/droppages-content.png 2793w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/10\/droppages-content-300x128.png 300w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/10\/droppages-content-1024x436.png 1024w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/10\/droppages-content-768x327.png 768w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/10\/droppages-content-1536x654.png 1536w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/10\/droppages-content-2048x872.png 2048w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/10\/droppages-content-250x106.png 250w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/10\/droppages-content-550x234.png 550w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/10\/droppages-content-800x341.png 800w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/10\/droppages-content-423x180.png 423w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/10\/droppages-content-705x300.png 705w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/10\/droppages-content-1175x500.png 1175w\" sizes=\"auto, (max-width: 2793px) 100vw, 2793px\" \/><\/a><\/p>\r\n<figcaption>Drop your exported HTML files into the folder called Content<\/figcaption>\r\n<\/figure>\r\n<\/div>\r\n\r\n\r\n\r\n<div class=\"boldgrid-section\">\r\n<div class=\"container\">\r\n<div class=\"row\" style=\"padding-bottom: 16px;\">\r\n<div class=\"col-md-12 col-xs-12 col-sm-12\">\r\n<h2 class=\"wp-block-heading\">Drop these files into Public<\/h2>\r\n<p>Public holds all your CSS, Javascript and Image assets. Mine looks like this:<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\n\r\n\r\n<div class=\"wp-block-image\">\r\n<figure class=\"aligncenter\">\r\n<p class=\"mod-reset\"><a href=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/10\/droppages-public.png\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-580\" src=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/10\/droppages-public.png\" alt=\"Drop your CSS, JS and Image folders here\" width=\"2800\" height=\"1376\" srcset=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/10\/droppages-public.png 2800w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/10\/droppages-public-300x147.png 300w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/10\/droppages-public-1024x503.png 1024w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/10\/droppages-public-768x377.png 768w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/10\/droppages-public-1536x755.png 1536w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/10\/droppages-public-2048x1006.png 2048w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/10\/droppages-public-250x123.png 250w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/10\/droppages-public-550x270.png 550w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/10\/droppages-public-800x393.png 800w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/10\/droppages-public-366x180.png 366w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/10\/droppages-public-610x300.png 610w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/10\/droppages-public-1017x500.png 1017w\" sizes=\"auto, (max-width: 2800px) 100vw, 2800px\" \/><\/a><\/p>\r\n<figcaption>Drop your CSS, JS and Image folders here<\/figcaption>\r\n<\/figure>\r\n<\/div>\r\n\r\n\r\n\r\n<div class=\"boldgrid-section\">\r\n<div class=\"container\">\r\n<div class=\"row\">\r\n<div class=\"col-md-12 col-xs-12 col-sm-12\">\r\n<p class=\"\">Now go back to your DropPages account and hit <strong>Publish now<\/strong> and you\u2019re done! Sometimes it can take a couple of minutes for everything to get synced and uploaded, just be patient, it will work.<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\n<div class=\"wp-block-image\">\r\n<figure class=\"aligncenter\">\r\n<p class=\"mod-reset\"><img loading=\"lazy\" decoding=\"async\" width=\"944\" height=\"586\" class=\"wp-image-585\" src=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/10\/2020-10-17-13.46.44.gif\" alt=\"\"><\/p>\r\n<\/figure>\r\n<\/div>\r\n\r\n\r\n\r\n<div class=\"boldgrid-section\">\r\n<div class=\"container\">\r\n<div class=\"row\">\r\n<div class=\"col-md-12 col-xs-12 col-sm-12\">\r\n<p>If you experience sync issues hit that red Reset sync button, publish again and it eventually work.<\/p>\r\n<h2 class=\"\">Final result<\/h2>\r\n<p class=\"\"><a href=\"http:\/\/articledemo.droppages.com\/index.html\" target=\"_blank\" rel=\"noopener noreferrer\">http:\/\/articledemo.droppages.com\/index.html<\/a><\/p>\r\n<p class=\"\">That\u2019s it folks, hope you enjoyed this tutorial and find it useful for your design to code workflow.<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n","protected":false},"excerpt":{"rendered":"<p>This tutorial is for exporting from Sketch2React as HTML and publishing it to your own Dropbox! And it will not cost you a dime in hosting. That got you interested right? Who wouldn\u2019t? Use case for this workflow could be: You have poured your soul into and created a beautiful, fully responsive website or prototype&hellip;&nbsp;<a href=\"https:\/\/sketch2react.io\/blog\/tutorial-how-to-publish-host-your-website-on-dropbox\/\" class=\"\" rel=\"bookmark\">Read More &raquo;<span class=\"screen-reader-text\">Tutorial &#8211; How to publish &#038; host your website on Dropbox<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":598,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"bgseo_title":"","bgseo_description":"","bgseo_robots_index":"index","bgseo_robots_follow":"follow","neve_meta_sidebar":"full-width","neve_meta_container":"","neve_meta_enable_content_width":"off","neve_meta_content_width":0,"neve_meta_title_alignment":"","neve_meta_author_avatar":"","neve_post_elements_order":"","neve_meta_disable_header":"","neve_meta_disable_footer":"","neve_meta_disable_title":"","footnotes":""},"categories":[166],"tags":[55,191],"class_list":["post-591","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-sketch2react","tag-tutorials"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Tutorial &#8211; How to publish &#038; host your website on Dropbox | Sketch2React Blog<\/title>\n<meta name=\"description\" content=\"This tutorial is for exporting from Sketch2React as HTML and publishing it to your own Dropbox! And it will not cost you a dime in hosting.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/sketch2react.io\/blog\/tutorial-how-to-publish-host-your-website-on-dropbox\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Tutorial - How to publish &amp; host your website on Dropbox - Sketch2React Blog\" \/>\n<meta property=\"og:description\" content=\"This tutorial is for exporting from Sketch2React as HTML and publishing it to your own Dropbox! And it will not cost you a dime in hosting.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/sketch2react.io\/blog\/tutorial-how-to-publish-host-your-website-on-dropbox\/\" \/>\n<meta property=\"og:site_name\" content=\"Sketch2React Blog\" \/>\n<meta property=\"article:published_time\" content=\"2020-10-17T14:39:35+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-10-11T18:24:42+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/10\/PublishOnDropbox@2x.png\" \/>\n\t<meta property=\"og:image:width\" content=\"3840\" \/>\n\t<meta property=\"og:image:height\" content=\"2160\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Juan Maguid\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Juan Maguid\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/sketch2react.io\/blog\/tutorial-how-to-publish-host-your-website-on-dropbox\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/tutorial-how-to-publish-host-your-website-on-dropbox\/\"},\"author\":{\"name\":\"Juan Maguid\",\"@id\":\"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/7fc8fe20e137be20a66bc8634c059f4e\"},\"headline\":\"Tutorial &#8211; How to publish &#038; host your website on Dropbox\",\"datePublished\":\"2020-10-17T14:39:35+00:00\",\"dateModified\":\"2021-10-11T18:24:42+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/tutorial-how-to-publish-host-your-website-on-dropbox\/\"},\"wordCount\":1586,\"publisher\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/tutorial-how-to-publish-host-your-website-on-dropbox\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/10\/PublishOnDropbox@2x.png\",\"keywords\":[\"Sketch2react\",\"Tutorials\"],\"articleSection\":[\"Tutorials\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/sketch2react.io\/blog\/tutorial-how-to-publish-host-your-website-on-dropbox\/\",\"url\":\"https:\/\/sketch2react.io\/blog\/tutorial-how-to-publish-host-your-website-on-dropbox\/\",\"name\":\"Tutorial - How to publish & host your website on Dropbox - Sketch2React Blog\",\"isPartOf\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/tutorial-how-to-publish-host-your-website-on-dropbox\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/tutorial-how-to-publish-host-your-website-on-dropbox\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/10\/PublishOnDropbox@2x.png\",\"datePublished\":\"2020-10-17T14:39:35+00:00\",\"dateModified\":\"2021-10-11T18:24:42+00:00\",\"description\":\"This tutorial is for exporting from Sketch2React as HTML and publishing it to your own Dropbox! And it will not cost you a dime in hosting.\",\"breadcrumb\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/tutorial-how-to-publish-host-your-website-on-dropbox\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/sketch2react.io\/blog\/tutorial-how-to-publish-host-your-website-on-dropbox\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/sketch2react.io\/blog\/tutorial-how-to-publish-host-your-website-on-dropbox\/#primaryimage\",\"url\":\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/10\/PublishOnDropbox@2x.png\",\"contentUrl\":\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/10\/PublishOnDropbox@2x.png\",\"width\":3840,\"height\":2160},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/sketch2react.io\/blog\/tutorial-how-to-publish-host-your-website-on-dropbox\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/sketch2react.io\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Tutorial &#8211; How to publish &#038; host your website on Dropbox\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/sketch2react.io\/blog\/#website\",\"url\":\"https:\/\/sketch2react.io\/blog\/\",\"name\":\"Sketch2React Blog\",\"description\":\"Articles, tutorials, tips &amp; tricks\",\"publisher\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/sketch2react.io\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/sketch2react.io\/blog\/#organization\",\"name\":\"Sketch2React Blog\",\"url\":\"https:\/\/sketch2react.io\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/sketch2react.io\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/10\/cropped-S2R2021Icon.png\",\"contentUrl\":\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/10\/cropped-S2R2021Icon.png\",\"width\":512,\"height\":512,\"caption\":\"Sketch2React Blog\"},\"image\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/7fc8fe20e137be20a66bc8634c059f4e\",\"name\":\"Juan Maguid\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/eac199ca87b7cbb76863825e2f447fafd34ac3b7c4a03c94f499103333c24832?s=96&d=wavatar&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/eac199ca87b7cbb76863825e2f447fafd34ac3b7c4a03c94f499103333c24832?s=96&d=wavatar&r=g\",\"caption\":\"Juan Maguid\"},\"url\":\"https:\/\/sketch2react.io\/blog\/author\/sketch2react\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Tutorial &#8211; How to publish &#038; host your website on Dropbox | Sketch2React Blog","description":"This tutorial is for exporting from Sketch2React as HTML and publishing it to your own Dropbox! And it will not cost you a dime in hosting.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/sketch2react.io\/blog\/tutorial-how-to-publish-host-your-website-on-dropbox\/","og_locale":"en_US","og_type":"article","og_title":"Tutorial - How to publish & host your website on Dropbox - Sketch2React Blog","og_description":"This tutorial is for exporting from Sketch2React as HTML and publishing it to your own Dropbox! And it will not cost you a dime in hosting.","og_url":"https:\/\/sketch2react.io\/blog\/tutorial-how-to-publish-host-your-website-on-dropbox\/","og_site_name":"Sketch2React Blog","article_published_time":"2020-10-17T14:39:35+00:00","article_modified_time":"2021-10-11T18:24:42+00:00","og_image":[{"width":3840,"height":2160,"url":"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/10\/PublishOnDropbox@2x.png","type":"image\/png"}],"author":"Juan Maguid","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Juan Maguid","Est. reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/sketch2react.io\/blog\/tutorial-how-to-publish-host-your-website-on-dropbox\/#article","isPartOf":{"@id":"https:\/\/sketch2react.io\/blog\/tutorial-how-to-publish-host-your-website-on-dropbox\/"},"author":{"name":"Juan Maguid","@id":"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/7fc8fe20e137be20a66bc8634c059f4e"},"headline":"Tutorial &#8211; How to publish &#038; host your website on Dropbox","datePublished":"2020-10-17T14:39:35+00:00","dateModified":"2021-10-11T18:24:42+00:00","mainEntityOfPage":{"@id":"https:\/\/sketch2react.io\/blog\/tutorial-how-to-publish-host-your-website-on-dropbox\/"},"wordCount":1586,"publisher":{"@id":"https:\/\/sketch2react.io\/blog\/#organization"},"image":{"@id":"https:\/\/sketch2react.io\/blog\/tutorial-how-to-publish-host-your-website-on-dropbox\/#primaryimage"},"thumbnailUrl":"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/10\/PublishOnDropbox@2x.png","keywords":["Sketch2react","Tutorials"],"articleSection":["Tutorials"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/sketch2react.io\/blog\/tutorial-how-to-publish-host-your-website-on-dropbox\/","url":"https:\/\/sketch2react.io\/blog\/tutorial-how-to-publish-host-your-website-on-dropbox\/","name":"Tutorial - How to publish & host your website on Dropbox - Sketch2React Blog","isPartOf":{"@id":"https:\/\/sketch2react.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/sketch2react.io\/blog\/tutorial-how-to-publish-host-your-website-on-dropbox\/#primaryimage"},"image":{"@id":"https:\/\/sketch2react.io\/blog\/tutorial-how-to-publish-host-your-website-on-dropbox\/#primaryimage"},"thumbnailUrl":"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/10\/PublishOnDropbox@2x.png","datePublished":"2020-10-17T14:39:35+00:00","dateModified":"2021-10-11T18:24:42+00:00","description":"This tutorial is for exporting from Sketch2React as HTML and publishing it to your own Dropbox! And it will not cost you a dime in hosting.","breadcrumb":{"@id":"https:\/\/sketch2react.io\/blog\/tutorial-how-to-publish-host-your-website-on-dropbox\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/sketch2react.io\/blog\/tutorial-how-to-publish-host-your-website-on-dropbox\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/sketch2react.io\/blog\/tutorial-how-to-publish-host-your-website-on-dropbox\/#primaryimage","url":"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/10\/PublishOnDropbox@2x.png","contentUrl":"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/10\/PublishOnDropbox@2x.png","width":3840,"height":2160},{"@type":"BreadcrumbList","@id":"https:\/\/sketch2react.io\/blog\/tutorial-how-to-publish-host-your-website-on-dropbox\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/sketch2react.io\/blog\/"},{"@type":"ListItem","position":2,"name":"Tutorial &#8211; How to publish &#038; host your website on Dropbox"}]},{"@type":"WebSite","@id":"https:\/\/sketch2react.io\/blog\/#website","url":"https:\/\/sketch2react.io\/blog\/","name":"Sketch2React Blog","description":"Articles, tutorials, tips &amp; tricks","publisher":{"@id":"https:\/\/sketch2react.io\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/sketch2react.io\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/sketch2react.io\/blog\/#organization","name":"Sketch2React Blog","url":"https:\/\/sketch2react.io\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/sketch2react.io\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/10\/cropped-S2R2021Icon.png","contentUrl":"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/10\/cropped-S2R2021Icon.png","width":512,"height":512,"caption":"Sketch2React Blog"},"image":{"@id":"https:\/\/sketch2react.io\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/7fc8fe20e137be20a66bc8634c059f4e","name":"Juan Maguid","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/eac199ca87b7cbb76863825e2f447fafd34ac3b7c4a03c94f499103333c24832?s=96&d=wavatar&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/eac199ca87b7cbb76863825e2f447fafd34ac3b7c4a03c94f499103333c24832?s=96&d=wavatar&r=g","caption":"Juan Maguid"},"url":"https:\/\/sketch2react.io\/blog\/author\/sketch2react\/"}]}},"_links":{"self":[{"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/posts\/591","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/comments?post=591"}],"version-history":[{"count":10,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/posts\/591\/revisions"}],"predecessor-version":[{"id":1142,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/posts\/591\/revisions\/1142"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/media\/598"}],"wp:attachment":[{"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/media?parent=591"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/categories?post=591"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/tags?post=591"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}